{% extends 'layout.twig' %}
{% block title %}Leaderboard{% endblock %}
{% block heading %}Leaderboard{% endblock %}
{% block subheading %}Classement des comptes par métrique{% endblock %}

{% set metrics = [
  { 'slug': 'likesReceived',  'label': 'Likes reçus' },
  { 'slug': 'followers',      'label': 'Abonnés' },
  { 'slug': 'media',          'label': 'Médias' },
  { 'slug': 'xp',             'label': 'Expérience' },
  { 'slug': 'comments',       'label': 'Commentaires reçus' },
  { 'slug': 'views',          'label': 'Vues du profil' },
  { 'slug': 'commentsPosted', 'label': 'Commentaires postés' }
] %}

{% block content %}
  <div class="page" data-leaderboard
       data-leaderboard-url="{{ leaderboardUrl }}"
       data-user-base="{{ url_for('users') }}">

    {# ── Sélecteur de métrique ──────────────────────────────────────── #}
    <div class="tabs" role="tablist" data-animate>
      {% for m in metrics %}
        <button class="tab {{ loop.first ? 'is-active' }}" type="button" role="tab"
                aria-selected="{{ loop.first ? 'true' : 'false' }}"
                data-metric="{{ m.slug }}">
          {{ m.label }}
        </button>
      {% endfor %}
    </div>

    <div class="alert alert--error" data-leaderboard-error hidden>
      Le service Hydrogen est injoignable — impossible de charger le classement.
    </div>

    <section class="card glass" data-animate>
      <div class="card__head">
        <h2 data-leaderboard-title>Likes reçus</h2>
        <span class="muted" data-leaderboard-total></span>
      </div>

      <p class="muted" data-leaderboard-empty hidden>Aucun compte classé pour cette métrique.</p>

      <ol class="lb" data-leaderboard-list>
        {% for i in 1..8 %}
          <li class="lb__row">
            <span class="skeleton skeleton--text" style="width:100%;height:34px"></span>
          </li>
        {% endfor %}
      </ol>

      <div class="lb__foot" data-leaderboard-more hidden>
        <button class="btn-ghost" type="button" data-leaderboard-more-btn>Voir plus</button>
      </div>
    </section>
  </div>
{% endblock %}