{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Utilisateurs{% endblock %}
{% block heading %}Utilisateurs{% endblock %}
{% block subheading %}Derniers inscrits et comptes bannis{% endblock %}

{% macro userListPanel(scope, emptyLabel) %}
  <article class="card glass" data-animate>
    <p class="muted" data-empty="{{ scope }}" hidden>{{ emptyLabel }}</p>
    <ul class="ulist" data-list="{{ scope }}">
      {% for i in 1..6 %}
        <li class="urow">
          <span class="skeleton uavatar"></span>
          <span class="skeleton skeleton--text" style="flex:1;height:18px"></span>
        </li>
      {% endfor %}
    </ul>
    <div class="ulist__foot">
      <button class="btn-ghost" type="button" data-more="{{ scope }}" hidden>Charger plus</button>
      <span class="muted" data-end="{{ scope }}" hidden>Fin de la liste</span>
    </div>
  </article>
{% endmacro %}
{% import _self as self %}

{% block content %}
  <div data-users data-list-url="{{ listUrl }}" data-detail-url="{{ detailUrl }}">
    <div class="alert alert--error" data-users-error hidden>
      Le service Hydrogen est injoignable — impossible de charger la liste des utilisateurs.
    </div>

    {# ── Onglets ──────────────────────────────────────────────────── #}
    <div class="tabs" role="tablist" data-animate>
      <button class="tab is-active" type="button" role="tab" aria-selected="true"
              data-tab="recent" id="tab-recent" aria-controls="panel-recent">
        Derniers inscrits
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="unconfirmed" id="tab-unconfirmed" aria-controls="panel-unconfirmed">
        Non confirmés
      </button>
      <button class="tab" type="button" role="tab" aria-selected="false"
              data-tab="banned" id="tab-banned" aria-controls="panel-banned">
        Bannis
      </button>
    </div>

    {# ── Onglet : Derniers inscrits ───────────────────────────────── #}
    <div class="tabpanel" id="panel-recent" role="tabpanel" aria-labelledby="tab-recent" data-panel="recent">
      {{ self.userListPanel('recent', 'Aucun utilisateur.') }}
    </div>

    {# ── Onglet : Non confirmés ───────────────────────────────────── #}
    <div class="tabpanel" id="panel-unconfirmed" role="tabpanel" aria-labelledby="tab-unconfirmed" data-panel="unconfirmed" hidden>
      {{ self.userListPanel('unconfirmed', 'Aucun compte non confirmé.') }}
    </div>

    {# ── Onglet : Bannis ──────────────────────────────────────────── #}
    <div class="tabpanel" id="panel-banned" role="tabpanel" aria-labelledby="tab-banned" data-panel="banned" hidden>
      {{ self.userListPanel('banned', 'Aucun compte banni.') }}
    </div>
  </div>
{% endblock %}