{% if app.user %}
<div class="relative" data-controller="dropdown">
    <button
        data-action="click->dropdown#toggle"
        data-dropdown-target="button"
        class="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg px-3 py-2 transition-colors">
        {# User avatar/initials #}
        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
            {% if app.user.firstName %}
                {{ app.user.firstName|slice(0, 1)|upper }}{{ app.user.lastName|slice(0, 1)|upper }}
            {% else %}
                {{ app.user.email|slice(0, 1)|upper }}
            {% endif %}
        </div>

        {# User name/email #}
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
            {{ app.user.fullName ?: app.user.email }}
        </span>

        {# Dropdown icon #}
        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
        </svg>
    </button>

    {# Dropdown menu #}
    <div
        data-dropdown-target="menu"
        class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-2 z-50">
        {# User info #}
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
            <p class="text-sm font-medium text-gray-900 dark:text-white">{{ app.user.fullName ?: 'Utilisateur' }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ app.user.email }}</p>
            {% if app.user.roles %}
                <div class="mt-1">
                    {% for role in app.user.roles %}
                        {% if role != 'ROLE_USER' %}
                            <span class="inline-block px-2 py-1 text-xs rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400 mr-1">
                                {{ role|replace({'ROLE_': ''})|lower|capitalize }}
                            </span>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        {# Menu items - Role-specific profile routes #}
        {% set rolePrefix = active_role()|lower|replace({'role_': ''}) %}
        <a href="{{ path('app_' ~ rolePrefix ~ '_profile_view') }}"
           class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <svg class="w-4 h-4 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
            Mon profil
        </a>

        <a href="{{ path('app_' ~ rolePrefix ~ '_profile_security') }}"
           class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <svg class="w-4 h-4 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
            </svg>
            Sécurité
        </a>

        <a href="{{ path('app_' ~ rolePrefix ~ '_profile_change_password') }}"
           class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <svg class="w-4 h-4 mr-3 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
            </svg>
            Changer le mot de passe
        </a>

        <hr class="my-2 border-gray-200 dark:border-gray-700">

        <a href="{{ path('app_logout') }}"
           class="flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
            <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
            </svg>
            Déconnexion
        </a>
    </div>
</div>
{% endif %}