<div class="theme-navbar theme-navbar-nav-simple" x-data="menu">
    {% block header_brand %}
        <div class="theme-menu-logo">
            <a href="{{ path('homepage') }}" data-turbo-frame="_top" title="{{ 'homepage.balise'|trans({}, 'meta') }}">
                <twig:theme:BrandMark variant="logo" alt="{{ 'content.logo'|trans({}, 'img') }}" />
            </a>
        </div>
    {% endblock %}

    {% block header_navigation %}
        <nav aria-label="{{ 'balise.menu'|trans({}, 'meta') }}">
            {% block header_navigation_brand %}
                <div class="theme-menu-picto">
                    <a href="{{ path('homepage') }}" data-turbo-frame="_top" title="{{ 'homepage.balise'|trans({}, 'meta') }}"></a>
                    <twig:theme:BrandMark variant="pictogram_color" alt="{{ 'balise.picto'|trans({}, 'meta') }}" />
                </div>
            {% endblock %}
            <div class="theme-menu-labels">
                {% block header_menu_toggle %}
                    <button type="button"
                            class="theme-nav-open"
                            data-theme-menu-toggle
                            @click="toggle"
                            :aria-expanded="open.toString()"
                            aria-label="{{ 'balise.menu'|trans({}, 'meta') }}"
                            aria-controls="theme-nav-panel">
                        <span aria-hidden="true" class="theme-nav-open__lines" :class="open ? 'theme-is-open' : 'theme-is-closed'">
                            <i></i>
                            <i></i>
                            <i></i>
                        </span>
                    </button>
                {% endblock %}
                {% block header_actions %}
                    {% set account_label = app.user ? 'account_page.heading'|trans : 'security.login.title'|trans %}
                    <div class="theme-nav-actions">
                        {% include 'partials/_language_switcher.html.twig' %}
                        <a href="{{ app.user ? path('app_account') : path('app_login') }}"
                           class="theme-nav-icon-button theme-nav-account"
                           data-turbo-frame="_top"
                           aria-label="{{ account_label }}"
                           title="{{ account_label }}">
                            <svg aria-hidden="true"
                                 class="theme-nav-icon-button__icon"
                                 viewBox="0 0 24 24"
                                 fill="none"
                                 stroke="currentColor"
                                 stroke-width="2"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
                                 focusable="false">
                                <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                                <circle cx="12" cy="7" r="4" />
                            </svg>
                        </a>
                        <button type="button"
                                class="theme-nav-icon-button theme-nav-cart"
                                @click.stop="openCart"
                                aria-controls="theme-cart-drawer"
                                aria-label="{{ 'cart.open'|trans }}">
                            <svg aria-hidden="true"
                                 class="theme-nav-icon-button__icon theme-nav-cart__icon"
                                 viewBox="0 0 24 24"
                                 fill="none"
                                 stroke="currentColor"
                                 stroke-width="2"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
                                 focusable="false">
                                <circle cx="8" cy="21" r="1" />
                                <circle cx="19" cy="21" r="1" />
                                <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
                            </svg>
                            <span class="theme-nav-cart__count cart-items-count" aria-hidden="true">0</span>
                        </button>
                    </div>
                {% endblock %}
            </div>
        </nav>
    {% endblock %}

    {% block header_menu_panel %}
        <div id="theme-nav-panel"
             class="theme-nav-container"
             data-theme-menu-panel
             :class="open ? 'theme-is-open' : 'theme-is-closed'"
             x-cloak>
            <div class="theme-container">
                <twig:site:MainMenu id="masonry" />
            </div>
        </div>
    {% endblock %}
</div>
