{% set navbar_is_transparent = navbar_is_transparent|default(false) %}
{% set current = app.request.attributes.get('_route') %}
{% set base_classes = 'navbar navbar-expand-lg festava-navbar navbar-dark' %}
{% set state_class = navbar_is_transparent ? 'navbar-ghost' : 'nav-solid' %}

<nav id="mainNav"
     class="{{ base_classes }} {{ state_class }}"
     role="navigation"
     aria-label="Navigation principale">

    <div class="container">
        {# Brand #}
        <a class="navbar-brand p-0 me-2 d-flex align-items-center"
           href="{{ path('app_home') }}"
           aria-label="APPAC">
            <img id="brandLogo"
                 src="{{ asset('images/logo/logo-appac.svg') }}"
                 data-light="{{ asset('images/logo/logo-appac.svg') }}"
                 data-dark="{{ asset('images/logo/logo-appac-white.svg') }}"
                 alt="APPAC"
                 class="brand-logo">
        </a>

        {# Toggler mobile #}
        <button class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Basculer la navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        {# Menu #}
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav align-items-lg-center ms-auto me-lg-5">

                {#Accueil#}
                <li class="nav-item">
                    <a class="nav-link {{ current == 'app_home' ? 'active' : '' }}"
                       href="{{ path('app_home') }}"
                       aria-current="{{ current == 'app_home' ? 'page' : null }}">
                        Accueil
                    </a>
                </li>

                {#Activités#}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {{ current starts with 'app_about' ? 'active' : '' }}"
                       href="#" id="aboutDropdown" role="button"
                       aria-expanded="false">Activités<span class="dropdown-arrow">▾</span>
                    </a>
                <ul class="dropdown-menu" aria-labelledby="aboutDropdown">
                    <li><a class="dropdown-item" href="{{ path('app_home') }}#events-section">Événements</a></li>
                </ul>


                {#Vie de l'association#}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {{ current starts with 'app_about' ? 'active' : '' }}"
                       href="#" id="aboutDropdown" role="button"
                       aria-expanded="false">Vie de l'association<span class="dropdown-arrow">▾</span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="aboutDropdown">
                        <li><a class="dropdown-item" href="{{ path('app_home') }}#about">Qui sommes-nous ?</a></li>
                        <li><a class="dropdown-item" href="{{ path('board_member_organigram') }}">Trombinoscope CA</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_home') }}#actus">Actualités</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_home') }}#">Nos status</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_home') }}#">Archives</a></li>
                    </ul>
                </li>


                {#Infos pratiques#}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {{ current starts with 'app_about' ? 'active' : '' }}"
                       href="#" id="aboutDropdown" role="button"
                       aria-expanded="false">Infos pratiques<span class="dropdown-arrow">▾</span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="aboutDropdown">
                        <li><a class="dropdown-item" href="{{ path('app_home') }}#">Règlementation</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_home') }}#">Petites annonces</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_home') }}#partenaires">Partenaires</a></li>
                    </ul>
                </li>


                {#Galerie photo#}
                <li class="nav-item">
                    <a class="nav-link {{ current starts with 'gallery_index' ? 'active' : '' }}"
                       href="{{ path('gallery_index') }}">Galerie photo</a>
                </li>


                {#Contactez-nous#}
                <li class="nav-item">
                    <a class="nav-link {{ current starts with 'app_about' ? 'active' : '' }}"
                       href="{{ path('app_home') }}#contact">Contactez-nous</a>
                </li>

{#                <li class="nav-item">#}
{#                    <a class="nav-link {{ current starts with 'board_member_organigram' ? 'active' : '' }}"#}
{#                       href="{{ path('board_member_organigram') }}"#}
{#                       aria-current="{{ current starts with 'board_member_organigram' ? 'page' : null }}">#}
{#                        Trombinoscope#}
{#                    </a>#}
{#                </li>#}
{#            </ul>#}

            {# CTA derecha #}
            {% if app.user %}
                <div class="d-flex gap-2">
                    <a href="{{ path('app_account') }}" class="btn btn-outline-light">Mon compte</a>
                    <a href="{{ path('app_logout') }}" class="btn custom-btn">Déconnexion</a>
                </div>
            {% else %}
                <div class="d-flex gap-2">
                    <a href="{{ path('app_login') }}" class="btn custom-btn">Connexion</a>
                    <a href="{{ path('app_register') }}" class="btn btn-outline-light">S'inscrire</a>
                </div>
            {% endif %}
        </div>
    </div>
</nav>