{% extends "django_fastoche/header.html" %}
{% load i18n static %}
{% url 'index' as home_url %}

{% block not_brand %}
  {% translate "Home page" as home_page %}
  <a href="{{ home_url }}"
     title="{{ home_page }} — {{ SITE_CONFIG.site_title }}">
     <img src="{% static 'django_fastoche/dist/artwork/logo/logo.svg' %}" class="fastoche-logo" alt="logo" />

  </a>
{% endblock not_brand %}

{% block not_service_title %}
  <a href="{{ home_url }}" title="Accueil — {{ SITE_CONFIG.site_title }}">
    <p class="fastoche-header__service-title">
      {{ SITE_CONFIG.site_title }}
      {% if SITE_CONFIG.beta_tag %}
        <span class="fastoche-badge fastoche-badge--sm fastoche-badge--green-emeraude">BETA</span>
      {% endif %}
    </p>
  </a>
{% endblock not_service_title %}

{% block not_header_tools %}
                <ul class="fastoche-btns-group">
                  <li>
                    <button class="fastoche-btn--display fastoche-btn" aria-controls="fastoche-theme-modal"
                      data-fastoche-opened="false">
                      {% translate "Display settings" %}
                    </button>
                  </li>
                  <li>
                    {% include "django_fastoche/blocks/language_selector.html" %}
                  </li>
                </ul>
{% endblock not_header_tools %}

{# Leave burger_menu and main_menu blocks empty if the main menu is not used #}
{% block not_burger_menu %}
  {% translate "Search" as search_label %}
  <div class="fastoche-header__navbar">
    <button class="fastoche-btn--search fastoche-btn"
            data-fastoche-opened="false"
            aria-controls="modal-search"
            id="fastoche-btn-search-mobile"
            title="{{ search_label }}"
            data-fastoche-js-modal-button="true">
      {{ search_label }}
    </button>
    {% translate "Menu" as menu_label %}
    <button class="fastoche-btn--menu fastoche-btn"
            data-fastoche-opened="false"
            aria-controls="fastoche-menu-mobile"
            id="fastoche-btn-menu-mobile"
            title="{{ menu_label }}"
            data-fastoche-js-modal-button="true">
      {{ menu_label }}
    </button>
  </div>
{% endblock not_burger_menu %}

{% block not_main_menu %}
  {% include "django_fastoche/main_menu.html" %}
{% endblock not_main_menu %}

{% block not_header_search %}
  {% translate "Search" as search_label %}
  <div class="fastoche-header__search fastoche-modal" id="modal-search">
    <div class="fastoche-container fastoche-container-lg--fluid">
      {% translate "Close" as close_label %}
      <button class="fastoche-btn--close fastoche-btn"
              aria-controls="modal-search"
              title="{{ close_label }}">
        {{ close_label }}
      </button>
      <form action="{% url 'page_search' %}" method="get">
        <div class="fastoche-search-bar" id="search-bar" role="search">
          <label class="fastoche-label" for="search-bar-input">
            {{ search_label }}
          </label>
          <input class="fastoche-input"
                 placeholder="{{ search_label }}"
                 type="search"
                 id="query"
                 name="q">
          <button class="fastoche-btn" title="{{ search_label }}">
            {{ search_label }}
          </button>
        </div>
      </form>
    </div>
  </div>
{% endblock not_header_search %}