{% load i18n %}
{% load static %}

<div class="flex flex-center userpanel">
    <div class="userinfo text-align-center">
        <img src="/profilepictures/{{ user.profile_picture_filename|urlencode }}"><span>{% if user.first_name != "" %}
            {{ user.first_name }} {{ user.last_name }} ({{ user.username }}){% else %}{{ user.username }}{% endif %}
            &nbsp;-&nbsp;
            {% if user.balance < 0.01 %}
            <span class="userbalancewarn">{% translate "Balance" %}: {{ user.balance }} {{ currency_suffix }}</span>
            {% else %}
            <span>{% translate "Balance" %}: {{ user.balance }} {{ currency_suffix }}</span>
            {% endif %}
        </span>
    </div>
    <div class="flex flex-row flex-center flex-wrap userpanel-buttons">
        <a class="button" href="/">Home</a>
        <a class="button" href="/deposit">{% translate "Deposit" %}</a>
        <a class="button" href="/accounts/logout">{% translate "Logout" %}</a>
        <div class="dropdownmenu" id="dropdownmenu">
            <button class="dropdownbutton" id="dropdownmenu-button">
                <div>{% translate "Account" %}</div>
            </button>
            <div class="dropdownlist">
                <a class="button dropdownchoice" href="/history">{% translate "History" %}</a>
                <a class="button dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
                {% if user.is_superuser or user.is_staff %}
                <a class="button dropdownchoice" href="/admin/">Admin Panel</a>
                {% endif %}
                <a class="button dropdownchoice" href="/transfer/">{% translate "Transfer" %}</a>
                {% if user.is_superuser or user.allowed_to_supply %}
                <a class="button dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
                {% endif %}
                <a class="button dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
            </div>
        </div>
    </div>
</div>