{% load i18n static main_extras %}
<nav class="header {{header_search_classes}} wrapper--full wrapper--centered">
  {% if url_redirection_prod %}
  <a class="logo logo__municipality" title="Accéder à la page d'Accueil" href="{{url_redirection_prod}}">
    <img src="{% static 'img/communes_et_commerces-logo--small.svg' %}" alt="Logo Communes et commerces">

    <h1 class="title__municipality">
      <span class="text--color">{{municipality_name}}-</span>
      Commerces.be
    </h1>
  </a>
  {% elif url_redirection_dev and municipality %}
  <a class="logo logo__municipality" title="Accéder à la page d'Accueil" href="{{url_redirection_dev}}">
    <img src="{% static 'img/communes_et_commerces-logo--small.svg' %}" alt="Logo Communes et commerces">

    <h1 class="title__municipality">
      <span class="text--color">{{municipality_name}}-</span>
      Commerces.be
    </h1>
  </a>
  {% else %}
  <a class="logo" title="Accéder à la page d'Accueil" href="{% url 'index' %}">
    <img src="{% static 'img/communes_et_commerces-logo.svg' %}" alt="Logo Communes et commerces">
  </a>
  {% endif %}

  {% comment %}
  <ul class="column header__menu">
    <li class="header__el {% if request.path|is_reverse_of:'index' %}header__el--actif{% endif %}">
      <a title="Accéder à la page d'Accueil" href="{% url 'index' %}">Accueil</a>
    </li>

    <li class="header__el {% if request.path|is_reverse_of:'about' %}header__el--actif{% endif %}">
      <a title="Accéder à la page: À propos" href="{% url 'about' %}">À propos</a>
    </li>

    <li class="header__el {% if request.path|is_reverse_of:'contact' %}header__el--actif{% endif %}">
      <a title="Accéder à la page: Contact" href="{% url 'contact' %}">Contact</a>
    </li>
  </ul>
  {% endcomment %}

  {% if relevant_category %}


  <div class="research__header column column--spaced">

    <a href="#" class="btn btn__new submenu__link" title="Afficher les catégories et sous-catégories">Catégories
      <img src="{% static 'img/icon__select--white.svg' %}" alt="Icône flèche">
    </a>

    <div class="submenu__nav">
      <a class="submenu__link--close modal__close close__basket" href="#">Fermer</a>
      <nav class="submenu__left">
        <ul class="categories__menu">

          {% for category in relevant_category.categories %}
            {% if not forloop.counter0 %}
              <li class="category__menu category__menu--active ">
            {% else %}
              <li class="category__menu category__menu">
            {% endif %}
          
            <a onclick="addExtendedMunicipalities(this)" data-menu="{{category.name}}"
              href="{{request.path}}?category_id={{category.id}}"
              title="Voir les commerces et les article de la catégorie: {{category.name}}">
              <span>{{category.name}}</span>
              <img src="{% static 'img/arrow__next.svg' %}" alt="Icône flèche">
            </a>
          </li>
          {% endfor %}
        </ul>
      </nav>



      <nav class="submenu__right">
        <a class="subcategories__link text--color" href="#" title="Retourner à la liste des catégories">Retour aux
          catégories</a>

        {% for category in relevant_category.categories %}
          {% if not forloop.counter0 %}
            <ul class="subcategories__list subcategories__list--active" data-list="{{category.name}}">
          {% else %}
            <ul class="subcategories__list" data-list="{{category.name}}">
          {% endif %}

          {% for subcategory in category.sub_categories %}  
            <li class="subcategory__item">
              <a onclick="addExtendedMunicipalities(this)" href="{{request.path}}?subcategory_id={{subcategory.id}}"
                title="Voir les commerces et les article de la sous-catégories: {{subcategory.name}}">{{subcategory.name}}</a>
            </li>
          {% endfor %}
        </ul>
        {% endfor %}
      </nav>

    </div>

    <div class="research">
      <form id=form__extendedmunicipality class="research__field--full wrapper--select2-scroll">
        <select id="select__extendedmunicipality" multiple="multiple" class="input--select2--d-placeholder"
          data-placeholder="Étendre la recherche à d'autres communes...">
          <option></option>
          {% for municipality in extended_municipalities %}
          <option id="option__extendedmunicipality__{{municipality.postal_code}}" style="display:none"
            value="{{municipality.postal_code}}">
            {{municipality.postal_code}} - {{municipality.name}}</option>
          {% endfor %}
        </select>

        <button class="research__btn" title="Rechercher"></button>
      </form>
    </div>
  </div>
  {% endif %}

  <div class="column column--centered header__submenu">
    <div class="header__el header__account account__inner">

      {% if not user.is_authenticated %}
      <a class="column column--centered" title="Accéder à mon espace commerçant" href="{% url 'login' %}">
        <span>Mon espace commerçant</span>
        <img src="{% static 'img/icon__user.svg' %}" alt="Icône d'un utilisateur">
      </a>
      {% else %}

      <a class="column column--centered link--open-user" title="Accéder à mon espace commerçant" href="#">
        <span>Mon espace commerçant</span>
        <img src="{% static 'img/icon__user.svg' %}" alt="Icône d'un utilisateur">
      </a>

      <nav class="account__menu account__menu--closed">
        <p class="hide">Menu utilisateur</p>
        <ul class="account__list">
          <li id="li_mycommerce" class="account__item">
            <a class="column column--centered" title="Gérer mes commerces" href="{% url 'user_commerces' %}">
              <span>Mon commerce</span>
            </a>
          </li>
          <li id="li_create_commerce" class="account__item">
            <a class="column column--centered" title="Créer un nouveau commerce" href="{% url 'commerce_creation' %}">
              <span>Nouveau commerce</span>
            </a>

          </li>
          <li class="account__item">
            <a class="column column--centered" title="Se déconnecter" href="{% url 'user_logout' %}">
              <span>Se déconnecter</span>
            </a>
          </li>
        </ul>
      </nav>
      {% endif %}
    </div>

    <div class="header__el header__el--basket">
      <a title="Accéder à mon panier" href="{% url 'basket' %}">
        <img src="{% static 'img/icon--basket.svg' %}" alt="Icône d'un panier">

        <span id="basket__number" class="basket__number" style="display:none">
          <span id='indicator_number_article'></span>
        </span>
      </a>
    </div>

  </div>
</nav>

{% if user.is_authenticated %}
<script>
  fetch('/api/webshop/get_commerce')
    .then(resp => resp.json())
    .then(json => {
      const has_commerce = json['has_commerce']
      const li_mycommerce = document.getElementById('li_mycommerce');
      const li_create_commerce = document.getElementById('li_create_commerce');
      if (has_commerce) {
        li_create_commerce.style.display = "none";
      } else {
        li_mycommerce.style.display = "none";
      }

    })
</script>
{% endif %}

<script>
  const form__extendedmunicipality = document.getElementById('form__extendedmunicipality');
  if (form__extendedmunicipality) {
    form__extendedmunicipality.onsubmit = function (e) {
      const select_input = e.target.elements.select__municipality;
      e.target.action = select_input.value;
    }
  }

  addExtendedMunicipalities = (target) => {
    let childrenFormHtmlTag = Array.from(form__extendedmunicipality.children)
    childrenFormHtmlTag = childrenFormHtmlTag.filter((htmlTag) => {
      return htmlTag.nodeName == 'INPUT'
    })

    let extendedMunicipalitiesQueryParam = ''
    for (let children of childrenFormHtmlTag) {
      extendedMunicipalitiesQueryParam += `&extended_municipalities=${children.value}`
    }
    if (extendedMunicipalitiesQueryParam){
      target.href = `${target.href}${extendedMunicipalitiesQueryParam}`
    }

  }

  fetch('/api/webshop/cart/get_number_article')
    .then(resp => resp.json())
    .then(json => {
      const numberArticle = json.number_article;
      if(numberArticle){
        const basket__number = document.getElementById('basket__number');
        basket__number.style.display = "";
        const indicatorNumberArticle = document.getElementById('indicator_number_article');
        indicatorNumberArticle.innerHTML = numberArticle;
      }


    })

  // fetch()




</script>