{% extends "dsfr/header.html" %}
{% load i18n static wagtailcore_tags wagtailimages_tags menu_tags wagtail_dsfr_tags %}

{% block brand %}
  <p class="fr-logo">{{ settings.sites_conformes_content_manager.CmsDsfrConfig.header_brand_html|safe }}</p>
{% endblock brand %}

{% block service_title %}
  {% translate "Home page" as home_page %}
  <a href="{% root_url %}"
     title="{{ home_page }} — {{ settings.sites_conformes_content_manager.CmsDsfrConfig.site_title }}">

    <p class="fr-header__service-title">
      {% if settings.sites_conformes_content_manager.CmsDsfrConfig.site_title|slice:"-2:" == "fr" %}
        {{ settings.sites_conformes_content_manager.CmsDsfrConfig.site_title|slice:":-2" }}<em>fr</em>
      {% else %}
        {{ settings.sites_conformes_content_manager.CmsDsfrConfig.site_title }}
      {% endif %}
      {% if settings.sites_conformes_content_manager.CmsDsfrConfig.beta_tag %}
        <span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
      {% endif %}
    </p>
  </a>
{% endblock service_title %}

{% block service_tagline %}
  {{ settings.sites_conformes_content_manager.CmsDsfrConfig.site_tagline }}
{% endblock service_tagline %}

{% block operator_logo %}
  {% if settings.sites_conformes_content_manager.CmsDsfrConfig.operator_logo_file %}
    {% image settings.sites_conformes_content_manager.CmsDsfrConfig.operator_logo_file original as logo_img %}

    <div class="fr-header__operator">
      <img class="fr-responsive-img"
           src="{{ logo_img.url }}"
           alt="{{ settings.sites_conformes_content_manager.CmsDsfrConfig.operator_logo_alt }}"
           {% if settings.sites_conformes_content_manager.CmsDsfrConfig.operator_logo_width >= 1 %}style="max-width:{{ settings.sites_conformes_content_manager.CmsDsfrConfig.operator_logo_width|floatformat:"1u" }}rem;"{% endif %} />
    </div>
  {% endif %}
{% endblock operator_logo %}

{% block header_tools %}
  {% if request %}
    {% flat_menu handle="header_tools" template="menus/custom_flat_menu.html" %}
  {% endif %}
  {% if user.is_authenticated %}
    <li>
      {# The logout operation has to be performed via a POST with a csrf token for security reasons, so using a form. #}
      {# Cf. https://docs.djangoproject.com/en/5.1/releases/4.1/#log-out-via-get #}
      <form action="{% settings_value 'LOGOUT_URL' %}" method="post">
        {% csrf_token %}
        <button type="submit" class="fr-btn fr-icon-logout-box-r-line">
          {% translate "Hello" %}, {{ user.get_full_name }} ({% translate "Log out" %})
        </button>
      </form>
    </li>
  {% elif settings.sites_conformes_content_manager.CmsDsfrConfig.header_login_button %}
    <li>
      <a class="fr-btn fr-icon-lock-line"
         href="{% settings_value 'LOGIN_URL' %}">{% translate "Log in" %}</a>
    </li>
  {% endif %}
{% endblock header_tools %}

{% block header_search %}
  {% translate "Search" as search_label %}
  {% if settings.sites_conformes_content_manager.CmsDsfrConfig.search_bar %}
    <div class="fr-header__search fr-modal" id="modal-search">
      <div class="fr-container fr-container-lg--fluid">
        {% translate "Close" as close_label %}
        <button class="fr-btn--close fr-btn"
                aria-controls="modal-search"
                title="{{ close_label }}">{{ close_label }}</button>
        <form action="{% url 'cms_search' %}" method="get">
          <div class="fr-search-bar" id="search-bar" role="search">
            <label class="fr-label" for="query">{{ search_label }}</label>
            <input class="fr-input"
                   placeholder="{{ search_label }}"
                   type="search"
                   id="query"
                   name="q">
            <button class="fr-btn" title="{{ search_label }}">{{ search_label }}</button>
          </div>
        </form>
      </div>
    </div>
  {% endif %}
{% endblock header_search %}

{% block burger_menu %}
  {% translate "Search" as search_label %}
  <div class="fr-header__navbar">
    {% if settings.sites_conformes_content_manager.CmsDsfrConfig.search_bar %}
      <button class="fr-btn--search fr-btn"
              data-fr-opened="false"
              aria-controls="modal-search"
              id="fr-btn-search-mobile"
              title="{{ search_label }}">{{ search_label }}</button>
    {% endif %}
    {% translate "Menu" as menu_label %}
    <button class="fr-btn--menu fr-btn"
            data-fr-opened="false"
            aria-controls="fr-menu-mobile"
            id="fr-btn-menu-mobile"
            title="{{ menu_label }}">{{ menu_label }}</button>
  </div>
{% endblock burger_menu %}

{% block main_menu %}
  {% if request %}
    <div class="fr-header__menu fr-modal"
         id="fr-menu-mobile"
         aria-labelledby="fr-btn-menu-mobile">
      <div class="fr-container">
        {% translate "Close" as close_label %}
        <button type="button"
                class="fr-btn--close fr-btn"
                aria-controls="fr-menu-mobile">{{ close_label }}</button>
        <div class="fr-header__menu-links"></div>
        {% translate "Main menu" as main_menu_label %}

        <nav class="fr-nav" id="fr-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>
      </div>
    </div>
  {% endif %}
{% endblock main_menu %}