{# Barre de navigation principale #}
<nav class="bg-white border-b border-gris-clair shadow-sm sticky top-0 z-50 font-sora relative">
    {# --- Gestion de la barre --- #}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
            {# Logo de l'association #}
            <a href="{{ path('app_home') }}"
               class="flex-shrink-0 md:mr-8 flex items-center gap-2 transition-transform hover:scale-105">
                <img src="{{ asset('img/logo.svg') }}" alt="Logo de l'association Kaz"
                     class="h-10 w-auto object-contain">
            </a>

            {# Bouton Hamburger (Visible uniquement sur mobile) #}
            <div class="md:hidden">
                <button type="button" id="mobile-menu-button"
                        class="p-2 rounded-md text-gris-fonce hover:text-bouton focus:outline-none transition-colors"
                        aria-expanded="false">
                    <span class="sr-only">Ouvrir le menu</span>
                    {# Icône Menu (Hamburger) #}
                    <svg id="icon-menu-closed" class="block h-7 w-7" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                    {# Icône Fermer (Croix) #}
                    <svg id="icon-menu-open" class="hidden h-7 w-7" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {# --- Gestion des onglets --- #}
            <div id="main-menu"
                 class="hidden md:flex md:flex-1 absolute md:static top-full left-0 w-full md:w-auto bg-white md:bg-transparent border-b md:border-none border-gris-clair shadow-lg md:shadow-none px-4 md:px-0 py-4 md:py-0">

                {# Gestion de leur disposition horizontale ou verticale #}
                <ul class="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 lg:gap-8 w-full">

                    {# Onglet : Mon profil #}
                    <li>
                        <a href="{{ path('app_user') }}"
                           class="block px-4 py-3 md:py-2 text-base md:text-sm font-semibold transition-colors
                           {{ app.request.attributes.get('_route') == 'app_user'
                           ? 'bg-bouton/20 text-text md:border md:border-bouton md:rounded-lg'
                           : 'text-gris-fonce hover:bg-bg-primaire md:hover:bg-gris-clair md:hover:text-text rounded-lg md:border md:border-transparent' }}">
                            Mon profil
                        </a>
                    </li>

                    {# Onglet : Mon offre #}
                    <li>
                        <a href="https://kaz.bzh/offres/" target="_blank"
                           class="block px-4 py-3 md:py-2 text-base md:text-sm font-semibold text-gris-fonce hover:bg-bg-primaire md:hover:bg-gris-clair md:hover:text-text rounded-lg transition-colors md:border md:border-transparent">
                            Mon offre
                        </a>
                    </li>

                    {# Onglet : Gérer mes mots de passe #}
                    <li>
                        <a href="{{ path('app_user_edit_password') }}"
                           class="block px-4 py-3 md:py-2 text-base md:text-sm font-semibold transition-colors
                           {{ app.request.attributes.get('_route') == 'app_user_edit_password'
                           ? 'bg-bouton/20 text-text md:border md:border-bouton md:rounded-lg'
                           : 'text-gris-fonce hover:bg-bg-primaire md:hover:bg-gris-clair md:hover:text-text rounded-lg md:border md:border-transparent' }}">
                            Mes mots de passe
                        </a>
                    </li>

                    {# Onglet : Mon organisation (Conditionnel) #}
                    {% if is_granted('ROLE_ADMIN_ORGANISATION') %}
                        <li>
                            <a href="#"
                               class="block px-4 py-3 md:py-2 text-base md:text-sm font-semibold text-gris-fonce hover:bg-bg-primaire md:hover:bg-gris-clair md:hover:text-text rounded-lg transition-colors md:border md:border-transparent">
                                Mon organisation
                            </a>
                        </li>
                    {% endif %}
                </ul>

                {# Bouton de déconnexion #}
                <div class="pt-4 md:pt-0 mt-2 md:mt-0 border-t md:border-t-0 border-gris-clair">
                    <a href="{{ path('app_logout') }}"
                       class="flex items-center justify-center whitespace-nowrap w-full md:w-auto px-5 py-3 md:py-2 text-base md:text-sm font-bold bg-danger text-white rounded-lg hover:bg-danger-hover transition-all active:scale-95 shadow-sm">
                        Se déconnecter
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>