{% load i18n insight_tags %}

{% if user.is_authenticated %}
    {# User-Dropdown menu #}
    <div class="relative h-full">
        <button type="button" data-insight-dropdown="user-menu" class="btn-subtle-secondary size-10 rounded-insight-full overflow-hidden" aria-label="{{ usermenu.avatar_alt|default:user.get_username }}">
            {% if usermenu.avatar_url %}
                <img src="{{ usermenu.avatar_url }}" alt="{{ usermenu.avatar_alt|default:user.get_username }}" class="object-cover size-full rounded-insight-full">
            {% else %}
                {{ user.get_username|default:''|slice:":1"|upper }}
            {% endif %}
        </button>
        <div class="divide-y divide-insight-border-raised hidden absolute top-full ltr:right-0 rtl:left-0 z-50 mt-2 min-w-56 text-lg bg-insight-surface border border-insight-raised rounded-insight-overlay shadow-insight-overlay" id="user-menu">
            <span class="flex flex-col gap-1 px-6 py-1 text-xs">
                <span class="text-insight-body">{% trans "Logged in as" %}: </span>
                <span class="font-bold">{{ user.get_username }}</span>
            </span>
            {% if usermenu.links %}
                <ul>
                    {% for link in usermenu.links %}
                        <li>
                            {% if not link.staff_only or user.is_staff %}
                                <a href="{{ link.request_url }}" class="flex gap-2 items-center px-6 py-2 w-full text-sm hover:bg-insight-base">
                                    {% if link.icon %}
                                        {% icon config=link.icon %}
                                    {% endif %}
                                    {{ link.text }}
                                </a>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
            <form method="post" action="{% url 'logout' %}">
                {% csrf_token %}
                <button type="submit" class="flex gap-2 items-center px-6 py-2 w-full text-sm text-insight-danger text-start rounded-insight-control-bottom hover:bg-insight-base">
                    {% icon name="arrow-left-on-rectangle" size="s" %}{% trans "Logout" %}
                </button>
            </form>
        </div>
    </div>
{% elif not hide_login %}
    {# Login and Register buttons #}
    <div class="flex gap-2">
        {% if register_url %}
            {% button request_url=register_url label=_("Register") type="secondary" size="s" extra_classes="lg:hidden xl:inline-flex" %}
        {% endif %}
        {% if login_url %}
            {% button request_url=login_url label=_("Login") type="primary" size="s" extra_classes="lg:*:hidden xl:*:inline-block" %}
        {% endif %}
    </div>
{% endif %}