{% load i18n static wagtailcore_tags wagtailimages_tags menu_tags static l10n %}
{% load i18n static l10n %}
<header role="banner" class="design-system-header lesgrandsvoisins-home">
  <div class="design-system-header__menu design-system-modal" id="design-system-menu-mobile" aria-labelledby="design-system-btn-menu-mobile">
    <div class="design-system-container">
      <button class="design-system-btn--close design-system-btn" id="design-system-menu-close-btn" aria-controls="design-system-menu-mobile"
        title='{% translate "Close" %}'>
        {% translate "Close" %}
      </button>
      <div class="design-system-header__menu-links"></div>
      <nav role="navigation"
      class="design-system-nav"
      id="design-system-navigation"
      aria-label="Menu principal"
      data-design-system-js-navigation="true">
{% block main_menu %}
        <nav class="design-system-nav" id="design-system-navigation" aria-label="{{ main_menu_label }}">
          {% main_menu max_levels=2 template="menus/custom_main_menu.html" sub_menu_template="menus/custom_sub_menu.html" %}
        </nav>
{% endblock main_menu %}
      </nav>
      <div class="design-system-header__tools">
        <div class="design-system-header__tools-links">
          <ul class="design-system-btns-group">
            <li>
              <button class="design-system-btn--display design-system-btn" aria-controls="design-system-theme-modal"
                data-design-system-opened="false">
                {% translate "Display settings" %}
              </button>
            </li>
{% block header_tools %}
            <li>
              {% include "sites_faciles/language_selector.html" %}
            </li>
              {% flat_menu handle="header_tools" template="menus/custom_flat_menu.html" %}
{% endblock header_tools %}
          </ul>
        </div>
{% block header_search %}
        <div class="design-system-header__search design-system-modal" id="modal-search"
          aria-labelledby="design-system-btn-search-mobile">
          <div class="design-system-container design-system-container-lg--fluid">
            {% translate "Search" as search_label %}
            {% translate "Close" as close_label %}
            <button class="design-system-btn--close design-system-btn" aria-controls="modal-search" title="{{ close_label }}">
              {{ close_label }}
            </button>
            <form action="{% url 'design_system_search' %}" method="get">
              <div class="design-system-search-bar" id="search-bar" role="search">
                <label class="design-system-label" for="search-bar-input">
                  {{ search_label }}
                </label>
                <input class="design-system-input" placeholder="{{ search_label }}" type="search" id="search-bar-input" name="q">
                <button class="design-system-btn" title="{{ search_label }}">
                  {{ search_label }}
                </button>
              </div>
            </form>
          </div>
        </div>
{% endblock header_search %}
      </div>
      <div class="design-system-header__menu-logo">
{% block brand %}
        {% translate "Home page" as home_page %}
        <a href="{{ home_url }}" title="{{ home_page }} — {{ SITE_CONFIG.site_title }}">
          {% if SITE_CONFIG.operator_logo_file and SITE_CONFIG.operator_logo_alt %}
          <div class='design-system-header__operator'>
            <img class='design-system-responsive-img' src='{{ SITE_CONFIG.operator_logo_file.url }}'
              alt='{{ SITE_CONFIG.operator_logo_alt }}' {% if SITE_CONFIG.operator_logo_width >= 1 %}
            style='max-width:{{ SITE_CONFIG.operator_logo_width|unlocalize }}rem;'
            {% endif %} />
          </div>
          {% else %}
          <p>{{ SITE_CONFIG.site_title }}</p>
          {% endif %}
        </a>
{% endblock brand %}
      </div>
    </div>
  </div>
  <div class="design-system-header__body">
    <div class="design-system-container">
      <div class="design-system-header__body-row">
        <div class="design-system-header__brand design-system-enlarge-link">
          <div class="design-system-header__brand-top">
            <div class="design-system-header__navbar">
{% block burger_menu %}
              {% translate "Search" as search_label %}
              <button class="design-system-btn--search design-system-btn" data-design-system-opened="false" aria-controls="modal-search"
                id="design-system-btn-search-mobile" title="{{ search_label }}">
                {{ search_label }}
              </button>
              {% translate "Menu" as menu_label %}
              <button class="design-system-btn--menu design-system-btn" data-design-system-opened="false" aria-controls="design-system-menu-mobile"
                id="design-system-btn-menu-mobile" title="{{ menu_label }}">
                {{ menu_label }}
              </button>
{% endblock burger_menu %}
            </div>
          </div>
            <div class="design-system-header__service">
{% block service_title %}
{% endblock service_title %}
{% block service_tagline %}
{% endblock service_tagline %}
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</header>