{% load i18n static main_extras %}
<div class="header--burger-menu wrapper--full wrapper--centered column column--spaced column--centered">
    <!-- url_redirection only in editing menu (account user) -->
    {% if url_redirection %}
      <a class="logo" title="Accéder à la page d'Accueil" href="{{url_redirection}}" >
        <img src="{% static 'img/communes_et_commerces-logo.svg' %}" alt="Logo Communes et commerces">
      </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 %}

    <button class="btn__burger">
      <span></span>
      <span></span>
  </button> 
</div>


<nav class="header wrapper--full wrapper--centered column column--spaced column--centered">
    {% if url_redirection %}
    <a class="logo" title="Accéder à la page d'Accueil" href="{{url_redirection}}" >
      <img src="{% static 'img/communes_et_commerces-logo.svg' %}" alt="Logo Communes et commerces">
    </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 %}

    <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>

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

        <div class="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>

      <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">
        </a>

        <span class="basket__number">
          <span id='indicator_number_article'></span>
        </span>
      </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>
  fetch('/api/webshop/cart/get_number_article')
    .then( resp => resp.json())
    .then( json => {
      const numberArticle = json.number_article;
      const indicatorNumberArticle = document.getElementById('indicator_number_article');
      indicatorNumberArticle.innerHTML = numberArticle;
    })

  // fetch()

  

  
</script>