{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Signalements{% endblock %}
{% block heading %}Signalements{% endblock %}
{% block subheading %}File de modération des contenus et comptes signalés{% endblock %}

{% block content %}
  <div data-reports
       data-list-url="{{ listUrl }}"
       data-resolve-base="{{ resolveBase }}"
       data-users-url="{{ usersUrl }}"
       data-media-url="{{ mediaUrl }}">

    {# ── Barre de filtres : statut, type de cible ──────────────────────── #}
    <div class="log-toolbar" data-animate>
      <div class="mfilter__status" role="group" aria-label="Filtrer par statut">
        <button class="mm-period__btn is-active" type="button" data-rp-filter-status="">Tous</button>
        <button class="mm-period__btn" type="button" data-rp-filter-status="pending">En attente</button>
        <button class="mm-period__btn" type="button" data-rp-filter-status="reviewed">Examinés</button>
        <button class="mm-period__btn" type="button" data-rp-filter-status="action_taken">Action prise</button>
        <button class="mm-period__btn" type="button" data-rp-filter-status="dismissed">Rejetés</button>
      </div>
      <div class="mfilter__status" role="group" aria-label="Filtrer par type de cible">
        <button class="mm-period__btn is-active" type="button" data-rp-filter-target="">Toutes cibles</button>
        <button class="mm-period__btn" type="button" data-rp-filter-target="media">Médias</button>
        <button class="mm-period__btn" type="button" data-rp-filter-target="user">Comptes</button>
        <button class="mm-period__btn" type="button" data-rp-filter-target="comment">Commentaires</button>
      </div>
    </div>

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

    {# ── Liste des signalements ────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <ul class="rp-list" data-rp-list>
        {% for i in 1..6 %}
          <li class="rp-row rp-row--skeleton">
            <span class="skeleton skeleton--text" style="width:100%;height:56px"></span>
          </li>
        {% endfor %}
      </ul>
      <p class="muted rp-empty" data-rp-empty hidden>Aucun signalement ne correspond à ces filtres.</p>
      <div class="rp-more">
        <button class="btn-ghost" type="button" data-rp-more hidden>Charger plus</button>
      </div>
    </article>

    {# ── Modale de verdict ─────────────────────────────────────────────── #}
    <div class="modal modal--form" data-rp-modal hidden>
      <div class="rpmodal" role="dialog" aria-modal="true" aria-labelledby="rp-modal-title">
        <button class="modal__close" type="button" data-rp-cancel aria-label="Fermer">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6L6 18M6 6l12 12"/>
          </svg>
        </button>

        <div class="rpmodal__head">
          <span class="rpmodal__icon">{{ icons.i('flag') }}</span>
          <div>
            <h2 class="rpmodal__title" id="rp-modal-title">Signalement</h2>
            <p class="rpmodal__sub muted" data-rp-modal-sub></p>
          </div>
          <span class="badge" data-rp-modal-badge></span>
        </div>

        <div class="rpmodal__body">
          <dl class="rpmodal__meta">
            <div><dt>Cible</dt><dd data-rp-modal-target>—</dd></div>
            <div><dt>Motif</dt><dd data-rp-modal-reason>—</dd></div>
            <div><dt>Rapporteur</dt><dd data-rp-modal-reporter>—</dd></div>
            <div><dt>Signalé le</dt><dd data-rp-modal-created>—</dd></div>
          </dl>

          <div class="rpmodal__details" data-rp-modal-details-wrap hidden>
            <span class="rpmodal__label">Détails du rapporteur</span>
            <blockquote class="rpmodal__details-body" data-rp-modal-details></blockquote>
          </div>

          {# Bloc verdict déjà rendu (signalement résolu) #}
          <div class="rpmodal__resolved" data-rp-modal-resolved hidden>
            <span class="rpmodal__label">Verdict rendu</span>
            <p class="rpmodal__resolved-note" data-rp-modal-resolved-note></p>
          </div>

          {# Formulaire de verdict (signalement en attente) #}
          <div class="rpmodal__verdict" data-rp-modal-verdict hidden>
            <label class="rpmodal__label" for="rp-note">Note interne <span class="muted">(facultatif)</span></label>
            <textarea id="rp-note" class="rpmodal__note" data-rp-note rows="2"
                      maxlength="500" placeholder="Note de modération…" autocomplete="off"></textarea>
            <p class="alert alert--error rpmodal__err" data-rp-modal-error hidden></p>
          </div>
        </div>

        <div class="rpmodal__foot" data-rp-modal-foot hidden>
          <button class="btn-ghost" type="button" data-rp-verdict="dismissed">
            {{ icons.i('ban') }} Rejeter
          </button>
          <button class="btn-ghost" type="button" data-rp-verdict="reviewed">
            {{ icons.i('check') }} Marquer examiné
          </button>
          <button class="btn btn--danger" type="button" data-rp-verdict="action_taken">
            {{ icons.i('shield') }} Action prise
          </button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}