{% block nav %}
    <header class="navbar-header">
        <h1>Groupement d'achat familial</h1>
    </header>
    <nav class="navbar">
        <!-- Bouton hamburger pour les écrans de petite taille -->
        <button class="navbar-toggler" type="button" id="navbarToggle">
            <i class="fas fa-bars"></i> <!-- Icône des trois lignes (hamburger) -->
        </button>

        <!-- Liens du menu, cachés par défaut sur mobile -->
        <div class="nav-links" id="navbarMenu">
            <a href="{{ path('app_home') }}">Accueil</a>
            <a href="{{ path('app_propose') }}">Proposer</a>
            <a href="{{ path('app_your_offers', {'offer_type': 1}) }}">Tes produits</a>

            {% if is_granted('ROLE_ADMIN') %}
                <div class="dropdown">
                    <a href="#" class="dropdown-toggle" id="adminMenu" data-bs-toggle="dropdown" aria-expanded="false">
                        Admin
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="adminMenu">
                        <li><a class="dropdown-item" href="{{ path('app_admin') }}">Tableau de bord</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_admin_users') }}">Gérer les utilisateurs</a></li>
                        <li><a class="dropdown-item" href="{{ path('app_admin_orders') }}">Gérer les commandes</a></li>
                    </ul>
                </div>
            {% endif %}
            <a href="https://wa.me/{{ user.gaf.settings.adminPhone }}?text=Salut%20{{ user.gaf.settings.adminDisplayName }}!%20Je%20viens%20de%20tomber%20sur%20un%20truc%20intéressant%20au%20sujet%20du%20GAF%20et%20j'aimerais%20en%20discuter.%20Quand%20tu%20as%20un%20moment,%20fais-moi%20signe!" class="nav-link">
                <i class="fab fa-whatsapp"></i> Contacte l'admin
            </a>
        </div>

        <div class="nav-icons">
            <a href="{{ path('app_profile') }}" title="Modifier ton profil">
                <i class="fas fa-user"></i>
            </a>
            {% if page_title != 'Ton Panier' %}
                <a href="{{ path('app_basket') }}" title="Panier" class="cart-icon">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-badge" style="display: none;"></span>
                </a>
            {% endif %}
        </div>
    </nav>

    {% if page_title != 'Ton Panier' and user.getUnsubmittedOrder() is not null %}
        <span id="itemsInBasket" data-itemsInBasket="{{ user.getUnsubmittedOrder().getTotalQuantity() }}"></span>
    {% else %}
        <span id="itemsInBasket" data-itemsInBasket="0"></span>
    {% endif %}
{% endblock %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const navbarToggle = document.getElementById('navbarToggle');
        const navbarMenu = document.getElementById('navbarMenu');

        navbarToggle.addEventListener('click', function () {
            navbarMenu.classList.toggle('show'); // Ajoute ou enlève la classe "show"
        });
    });
</script>