{% set menu_items = menu_items() %}

<div class="top-header">
    <p><span class="emoji">🤝</span> Convivialité | Respect | Esprit d'équipe | Exigence</p>
</div>


<header class="modern-header">
    <div class="header-container">
        <a href="{{ path('app_home') }}" class="logo">
            <img src="{{ asset('img/front/logo/logo.png') }}" alt="{{ site_name() }}">
        </a>

        <nav class="main-nav">
            {% for item in menu_items %}
                {% if item.parent is null
                    and item.isActive
                    and (item.publishUntil is null or item.publishUntil >= "now"|date)
                    and (
                    item.visibility == 'all' or
                    (item.visibility == 'connected' and is_granted('ROLE_USER')) or
                    (item.visibility == 'guest' and not is_granted('ROLE_USER')) or
                    (item.visibility == 'admin' and is_granted('ROLE_ADMIN'))
                    )
                %}

                    {% set isExternal = item.url is not empty and item.url starts with 'http' %}
                    {% set href = item.url is not empty ? item.url : (item.route is not empty ? '/' ~ item.route : '#') %}
                    <div class="nav-item-wrapper">
                        <a
                                href="{{ href }}"
                                class="nav-item"
                                {% if isExternal %}target="_blank"{% endif %}
                        >
                            {{ icon(item.icon ?: 'circle') }}
                            <span>{{ item.title }}</span>
                        </a>

                        {% set children = item.children|filter(i => i.isActive and (i.publishUntil is null or i.publishUntil >= "now"|date)) %}
                        {% if children|length > 0 %}
                            <div class="nav-submenu">
                                {% for child in children %}
                                    {% set isChildExternal = child.url is not empty and child.url starts with 'http' %}
                                    {% set childHref = child.url is not empty ? child.url : (child.route is not empty ? '/' ~ child.route : '#') %}
                                    <a
                                            href="{{ childHref }}"
                                            class="nav-subitem"
                                            {% if isChildExternal %}target="_blank"{% endif %}
                                    >
                                        {{ icon(child.icon ?: 'circle') }}
                                        {{ child.title }}
                                    </a>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}

            {% if is_granted('ROLE_USER') %}
                <a href="{{ path('cart_index') }}" class="nav-item cart-item">
                    <div class="cart-icon-wrapper">
                        {{ front_icon('cart') }}
                        <span class="cart-badge">{{ total_order() }}</span>
                    </div>
                    <span>Panier</span>
                </a>
            {% endif %}
        </nav>

        <div class="action-buttons">
            {% if is_granted('ROLE_USER') %}
                <a href="{{ path('app_logout') }}" class="btn-action">Déconnexion</a>
            {% else %}
                <a href="{{ path('app_login') }}" class="btn-action">Connexion</a>
                <a href="{{ path('app_register_index') }}" class="btn-action">Inscription</a>
            {% endif %}
        </div>

        <button class="burger-menu-btn">{{ icon('burger') }}</button>

        <div class="mobile-menu">
            <button class="close-mobile-menu" onclick="document.querySelector('.mobile-menu').classList.remove('open')">
                {{ icon('menu-close') }}
            </button>

            {% for item in menu_items %}
                {% if item.parent is null
                    and item.isActive
                    and (item.publishUntil is null or item.publishUntil >= "now"|date)
                    and (
                    item.visibility == 'all' or
                    (item.visibility == 'connected' and is_granted('ROLE_USER')) or
                    (item.visibility == 'guest' and not is_granted('ROLE_USER')) or
                    (item.visibility == 'admin' and is_granted('ROLE_ADMIN'))
                    )
                %}

                    {% set isExternal = item.url is not empty and item.url starts with 'http' %}
                    {% set href = item.url is not empty ? item.url : (item.route is not empty ? '/' ~ item.route : '#') %}

                    <div class="mobile-menu-group">
                        <a href="{{ href }}"
                           class="mobile-menu-parent"
                           data-toggle="submenu-{{ item.id }}"
                           {% if isExternal %}target="_blank"{% endif %}
                        >
                            {{ icon(item.icon ?: 'circle') }}
                            {{ item.title }}
                        </a>

                        {% set children = item.children|filter(i => i.isActive and (i.publishUntil is null or i.publishUntil >= "now"|date)) %}
                        {% if children|length > 0 %}
                            <div class="mobile-submenu hidden" id="submenu-{{ item.id }}">
                                {% for child in children %}
                                    {% set childHref = child.url is not empty ? child.url : (child.route is not empty ? '/' ~ child.route : '#') %}
                                    {% set isChildExternal = child.url is not empty and child.url starts with 'http' %}
                                    <a href="{{ childHref }}" class="pl-6 text-sm block"
                                       {% if isChildExternal %}target="_blank"{% endif %}>
                                        {{ icon(child.icon ?: 'circle') }}
                                        {{ child.title }}
                                    </a>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}
            <div class="mobile-auth-actions mt-auto pt-6 border-t border-black/10 flex flex-col gap-3">
                {% if is_granted('ROLE_USER') %}
                    <form method="post" action="{{ path('app_logout') }}">
                        <button type="submit" class="mobile-auth-btn">Déconnexion</button>
                    </form>
                {% else %}
                    <form action="{{ path('app_login') }}">
                        <button type="submit" class="mobile-auth-btn">Connexion</button>
                    </form>
                    <form action="{{ path('app_register_index') }}">
                        <button type="submit" class="mobile-auth-btn">Inscription</button>
                    </form>
                {% endif %}
            </div>


        </div>
    </div>
</header>
<script>
    document.querySelectorAll('.mobile-menu-parent[data-toggle]').forEach(link => {
        link.addEventListener('click', function (e) {
            const targetId = this.getAttribute('data-toggle');
            const submenu = document.getElementById(targetId);
            if (submenu) {
                e.preventDefault(); // éviter navigation directe
                submenu.classList.toggle('hidden');
            }
        });
    });
</script>