{% if menu_pages|length > 1 %}
{#
    Burger Menu Overlay (menu ouvert)
    Figma: https://www.figma.com/design/ldjPgBvJ6j2I9RVTa17H33/Galta_2026?node-id=92-109

    Two nav groups, distinguished by layout/typography (not just color):
    - "main"      -> large serif links (Projets, Savoir-faire, L'agence)
    - "secondary" -> smaller serif links below a rule (News, Patrimoine)
#}
<div class="burger-menu" id="burger-menu" aria-hidden="true" data-burger-menu>
    <div class="burger-menu__backdrop" data-burger-backdrop></div>
    <div class="burger-menu__mountain-bg" aria-hidden="true"></div>

    <div class="burger-menu__content">
        <nav class="burger-menu__nav" role="navigation">
            <div class="burger-menu__nav-col">
                <ul class="burger-menu__list burger-menu__list--main">
                    {% for menuPage in menu_pages|filter(p => p.menuStyle == 'main') %}
                        <li class="burger-menu__item burger-menu__item--main">
                            {% if editMode|default(false) %}
                                {% set editRoute = app.request.locale == 'en' ? 'admin_edit_page_en' : 'admin_edit_page' %}
                                <a href="{{ path(editRoute, {slug: menuPage.slug}) }}" class="burger-menu__link burger-menu__link--main">
                                    {{ menuPage.title }}
                                </a>
                            {% else %}
                                <a href="{{ menuPage.url }}" class="burger-menu__link burger-menu__link--main">
                                    {{ menuPage.title }}
                                </a>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>

                <ul class="burger-menu__list burger-menu__list--secondary">
                    {% for menuPage in menu_pages|filter(p => p.menuStyle == 'secondary') %}
                        <li class="burger-menu__item burger-menu__item--secondary">
                            {% if editMode|default(false) %}
                                {% set editRoute = app.request.locale == 'en' ? 'admin_edit_page_en' : 'admin_edit_page' %}
                                <a href="{{ path(editRoute, {slug: menuPage.slug}) }}" class="burger-menu__link burger-menu__link--secondary">
                                    {{ menuPage.title }}
                                </a>
                            {% else %}
                                <a href="{{ menuPage.url }}" class="burger-menu__link burger-menu__link--secondary">
                                    {{ menuPage.title }}
                                </a>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>

                {% if is_granted('ROLE_ADMIN') %}
                    <a href="{{ path('admin_dashboard') }}" class="burger-menu__admin-link">Dashboard</a>
                {% endif %}
            </div>

            <div class="burger-menu__contact">
                {% if menu_bg_image_url or editMode|default(false) %}
                    <div class="burger-menu__contact-photo{% if editMode|default(false) and not menu_bg_image_url %} is-empty-image{% endif %}"{% if editMode|default(false) %}
                        data-editable-image="true"
                        data-standalone="true"
                        data-save-url="{{ path('api_admin_settings_menu_background_image') }}"
                        data-save-key="backgroundImageId"{% endif %}>
                        {% if editMode|default(false) and not menu_bg_image_url %}
                            <span class="editable-image__placeholder">
                                <span class="editable-image__placeholder-icon">+</span>
                                <span class="editable-image__placeholder-label">Ajouter une image</span>
                            </span>
                        {% endif %}
                        <img src="{{ menu_bg_image_url }}" alt="" class="burger-menu__contact-photo-image">
                    </div>
                {% endif %}

                <div class="burger-menu__contact-info">
                    <p class="burger-menu__contact-title">Contact</p>
                    <p class="burger-menu__contact-address">
                        Galta Architecte<br>
                        Le rond point des pistes, 20 Rue du Val Claret batiment B, 73320 Tignes
                    </p>
                </div>

                <div class="burger-menu__contact-actions">
                    {% if contact_page_published %}
                        {% set contact_cta_content %}{{ app.request.locale == 'fr' ? 'Contactez-nous' : 'Contact us' }}{% include 'components/_icon.html.twig' with {name: 'arrow-right', width: '14px', height: '12px'} only %}{% endset %}
                        {{ include('components/_button.html.twig', {
                            href: path(app.request.locale == 'en' ? 'page_show_en' : 'page_show', {slug: 'contact'}),
                            content: contact_cta_content,
                            variant: 'lined',
                            extra_class: 'link-btn--on-light burger-menu__contact-cta',
                        }) }}
                    {% endif %}

                    {# Language switch: mobile only, the header switcher is hidden there #}
                    {% set currentRoute = app.request.attributes.get('_route') %}
                    {% set routeParams = switch_locale_params(app.request.attributes.get('_route_params')) %}
                    {% set is_fr = app.request.locale == 'fr' %}
                    {% set lang_content %}{{ is_fr ? 'EN' : 'FR' }}{% endset %}
                    {{ include('components/_button.html.twig', {
                        href: is_fr ? path(currentRoute ~ '_en', routeParams) : path(currentRoute|replace({'_en': ''}), routeParams),
                        content: lang_content,
                        variant: 'lined',
                        extra_class: 'link-btn--on-light burger-menu__lang',
                        aria_label: is_fr ? 'Switch to English' : 'Passer en français',
                    }) }}

                    {# Audio toggle: mobile only, the header button is hidden there #}
                    {% set audio_label_on = app.request.locale == 'fr' ? 'Désactiver la musique' : 'Turn music off' %}
                    {% set audio_label_off = app.request.locale == 'fr' ? 'Activer la musique' : 'Turn music on' %}
                    <button type="button"
                            class="link-btn link-btn--lined link-btn--on-light link-btn--icon-static burger-menu__audio"
                            data-audio-toggle
                            data-audio-src="{{ asset('build/music/ambient.mp3') }}"
                            data-label-on="{{ audio_label_on }}"
                            data-label-off="{{ audio_label_off }}"
                            aria-pressed="false"
                            aria-label="{{ audio_label_off }}"
                            title="{{ audio_label_off }}">
                        {% include 'components/_audio-icon.html.twig' with {class: 'burger-menu__audio-icon'} only %}
                    </button>

                    {% set instagram_content %}{% include 'components/_icon.html.twig' with {name: 'instagram', size: '18px', class: 'burger-menu__social-icon'} only %}{% endset %}
                    {{ include('components/_button.html.twig', {
                        href: 'https://www.instagram.com/galta.archi/',
                        content: instagram_content,
                        variant: 'lined',
                        extra_class: 'link-btn--on-light link-btn--icon-static burger-menu__social',
                        target: '_blank',
                        rel: 'noopener noreferrer',
                        aria_label: 'Instagram',
                    }) }}
                </div>
            </div>
        </nav>
    </div>
</div>
{% endif %}