{% extends "includes/user-info.html" %}

{% block logged-in %}
  <li class="toplinks--list-item">
    <div class="toplinks--toggled-wrapper">
      <button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
        <svg class="toplinks-icon">
          <use href="/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
        </svg>
        <span class="desktop-only">
          {% include "includes/user-info-user-name.html" %}
        </span>
      </button>
      <ul class="toplinks--togglable-menu">
        {{ block.super }}
      </ul>
      <div class="toplinks--panel-mask"></div>
      <script>
        const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
        const toplinksMask = document.querySelector('.toplinks--panel-mask')
        toplinksMask.addEventListener('click', function(){
          toplinksBtn.click()
        });
      </script>
    </div>
  </li>
{% endblock %}

{% block user-info-login-label %}
  <span aria-label="{{ block.super }}">
    <svg class="toplinks-icon">
      <use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
    </svg>
    <span class="desktop-only">
      {{ block.super }}
    </span>
  </span>
{% endblock%}

{% block user-info-user-name %}
  Mon compte
{% endblock %}
