{% extends "django_design_system/header.html" %}

{% load i18n static wagtailcore_tags wagtailimages_tags menu_tags static %}

{% block brand %}
        <a href="{{ home_url }}" title="{{ full_site_title }} ">
          <div class='design-system-header__operator'>
            <img class='design-system-responsive-img' src="{% static 'sites-faciles/artwork/web-logo-square.jpg' %}"
              alt='SitesFaciles Les Grands Voisins' 
            style='max-width:16rem;'
          </div>
        </a>
{% endblock brand %} 

<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">
  {% translate "Close" as close_label %}
    <button type="button"
          class="design-system-btn--close design-system-btn"
          aria-controls="design-system-menu-mobile">{{ close_label }}</button>
    <div class="design-system-header__menu-links"></div>
    {% translate "Main menu" as main_menu_label %}
{% 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 %}
  </div>
</div>

{% block header_tools %}
<li>
  {% include "wagtail_design_system/language_selector.html" %}
</li>
  {% flat_menu handle="header_tools" template="menus/custom_flat_menu.html" %}
{% endblock header_tools %}