{% comment %}
USER MENU MOLECULE — AVATAR DROPDOWN, OR LOG IN / SIGN UP WHEN ANONYMOUS.
{% endcomment %}
{% load django_fundamentals %}
{% if request.user.is_authenticated %}
    <div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false">
        <button type="button" @click="open = !open"
                class="flex items-center gap-2 rounded px-2 py-1.5 text-sm text-ink transition-colors hover:bg-sunken focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
                :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu">
            {% include "django_fundamentals/molecules/avatar.html" with user=request.user size="h-7 w-7" %}
            <span class="hidden max-w-[12rem] truncate sm:inline">{{ request.user.display_name }}</span>
            {% include "django_fundamentals/atoms/icon.html" with name="chevron-down" class="h-4 w-4" %}
        </button>

        <div x-show="open" x-transition x-cloak role="menu"
             class="absolute right-0 z-overlay mt-2 w-56 overflow-hidden rounded-lg border border-line bg-raised py-1 shadow-lg">
            {# ONE ENTRY POINT — EMAIL ADDRESSES AND PASSWORD ARE NOW TABS #}
            {# INSIDE THE SETTINGS PAGE RATHER THAN SEPARATE MENU ITEMS.  #}
            {% nav_url "django_fundamentals_settings" as settingsUrl %}
            {% if settingsUrl %}
                <a href="{{ settingsUrl }}" role="menuitem" class="flex items-center gap-2.5 px-3 py-2 text-sm text-muted hover:bg-sunken hover:text-ink">
                    {% include "django_fundamentals/atoms/icon.html" with name="settings" class="h-4 w-4" %}Settings
                </a>
            {% endif %}
            {% if request.user.is_staff %}
                <a href="/admin/" role="menuitem" class="flex items-center gap-2.5 px-3 py-2 text-sm text-muted hover:bg-sunken hover:text-ink">
                    {% include "django_fundamentals/atoms/icon.html" with name="shield" class="h-4 w-4" %}Admin
                </a>
            {% endif %}

            <div class="my-1 border-t border-line"></div>

            {# LOGOUT MUST BE A POST — allauth REJECTS GET LOGOUTS BY DEFAULT #}
            <form method="post" action="{% nav_url 'account_logout' %}" role="none">
                {% csrf_token %}
                <button type="submit" role="menuitem"
                        class="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-muted hover:bg-sunken hover:text-ink">
                    {% include "django_fundamentals/atoms/icon.html" with name="external" class="h-4 w-4" %}Log out
                </button>
            </form>
        </div>
    </div>
{% else %}
    <div class="flex items-center gap-2">
        {% nav_url "account_login" as loginUrl %}
        {% nav_url "account_signup" as signupUrl %}
        {% if loginUrl %}
            {% include "django_fundamentals/atoms/button.html" with label="Log in" variant="ghost" href=loginUrl %}
        {% endif %}
        {% if signupUrl %}
            {% include "django_fundamentals/atoms/button.html" with label="Sign up" href=signupUrl %}
        {% endif %}
    </div>
{% endif %}