{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Newsletter{% endblock %}
{% block heading %}Newsletter{% endblock %}
{% block subheading %}Administration des abonnés à la lettre d'information{% endblock %}

{% set kpis = {
  'total':        { 'label': 'Abonnés au total', 'icon': 'mail' },
  'confirmed':    { 'label': 'Confirmés',         'icon': 'check' },
  'pending':      { 'label': 'En attente',        'icon': 'bell' },
  'unsubscribed': { 'label': 'Désabonnés',        'icon': 'ban' }
} %}

{% block content %}
  <div data-newsletter
       data-stats-url="{{ statsUrl }}"
       data-list-url="{{ subscribersUrl }}"
       data-item-base="{{ subscribersUrl }}"
       data-export-url="{{ exportUrl }}"
       data-users-url="{{ usersUrl }}">

    {# ── Statistiques ──────────────────────────────────────────────────── #}
    <section class="grid grid--kpi">
      {% for key, def in kpis %}
        <article class="kpi glass" data-nl-kpi="{{ key }}" data-animate>
          <div class="kpi__top">
            <div class="kpi__icon">{{ icons.i(def.icon) }}</div>
          </div>
          <div class="kpi__value" data-nl-kpi-value>
            <span class="skeleton skeleton--text" style="width:80px;height:24px"></span>
          </div>
          <div class="kpi__label">{{ def.label }}</div>
        </article>
      {% endfor %}
    </section>

    <section class="grid grid--split">
      <article class="card glass" data-animate>
        <div class="card__head"><h2>Taux de confirmation</h2></div>
        <div class="nl-rate">
          <span class="nl-rate__value" data-nl-rate>
            <span class="skeleton skeleton--text" style="width:70px;height:30px"></span>
          </span>
          <div class="nl-rate__bar"><span class="nl-rate__fill" data-nl-rate-fill></span></div>
          <p class="muted nl-rate__hint">Part des abonnés ayant validé le double opt-in.</p>
        </div>
      </article>

      <article class="card glass" data-animate>
        <div class="card__head"><h2>Activité récente</h2></div>
        <ul class="nl-recent" data-nl-recent>
          {% for row in ['subscriptions', 'confirmations', 'unsubscriptions'] %}
            <li class="nl-recent__row" data-nl-recent-row="{{ row }}">
              <span class="nl-recent__label" data-nl-recent-label></span>
              <span class="nl-recent__nums">
                <span class="nl-recent__num"><b data-nl-recent-7>—</b> <span class="muted">· 7 j</span></span>
                <span class="nl-recent__num"><b data-nl-recent-30>—</b> <span class="muted">· 30 j</span></span>
              </span>
            </li>
          {% endfor %}
        </ul>
      </article>
    </section>

    {# ── Barre d'outils : filtre de statut, recherche e-mail, export ────── #}
    <div class="nl-toolbar" data-animate>
      <div class="mfilter__status" role="group" aria-label="Filtrer par statut">
        <button class="mm-period__btn is-active" type="button" data-nl-filter-status="">Tous</button>
        <button class="mm-period__btn" type="button" data-nl-filter-status="confirmed">Confirmés</button>
        <button class="mm-period__btn" type="button" data-nl-filter-status="pending">En attente</button>
        <button class="mm-period__btn" type="button" data-nl-filter-status="unsubscribed">Désabonnés</button>
      </div>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-nl-search placeholder="Filtrer par e-mail…" autocomplete="off">
      </label>
      <a class="btn-ghost nl-toolbar__export" data-nl-export href="{{ exportUrl }}" download>
        {{ icons.i('down') }} Exporter (CSV)
      </a>
    </div>

    {# ── Alerte d'indisponibilité ──────────────────────────────────────── #}
    <div class="alert alert--error" data-newsletter-error hidden>
      Le service Hydrogen est injoignable — impossible de charger les abonnés.
    </div>

    {# ── Liste des abonnés ─────────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="nl-list" data-nl-list>
        {% for i in 1..5 %}
          <div class="nl-row nl-row--skeleton">
            <span class="skeleton skeleton--text" style="width:100%;height:34px"></span>
          </div>
        {% endfor %}
      </div>
      <p class="muted nl-empty" data-nl-empty hidden>Aucun abonné ne correspond à ces filtres.</p>
      <div class="nl-more">
        <button class="btn-ghost" type="button" data-nl-more hidden>Charger plus</button>
      </div>
    </article>
  </div>
{% endblock %}