{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Topics{% endblock %}
{% block heading %}Topics{% endblock %}
{% block subheading %}Référentiel des thèmes — hiérarchie, emoji et activation{% endblock %}

{% block content %}
  <div data-topics data-list-url="{{ listUrl }}" data-item-base="{{ itemBase }}">

    {# ── Barre d'outils : recherche, filtres, création ─────────────────── #}
    <div class="cpn-toolbar" data-animate>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-topic-search placeholder="Filtrer par slug ou libellé…" autocomplete="off">
      </label>
      <div class="mfilter__status" role="group" aria-label="Filtrer par état">
        <button class="mm-period__btn is-active" type="button" data-topic-filter="">Tous</button>
        <button class="mm-period__btn" type="button" data-topic-filter="active">Actifs</button>
        <button class="mm-period__btn" type="button" data-topic-filter="inactive">Inactifs</button>
      </div>
      <div class="mfilter__status" role="group" aria-label="Filtrer par niveau">
        <button class="mm-period__btn is-active" type="button" data-topic-level="">Tous niveaux</button>
        <button class="mm-period__btn" type="button" data-topic-level="root">Racines</button>
        <button class="mm-period__btn" type="button" data-topic-level="sub">Sous-thèmes</button>
      </div>
      <button class="btn cpn-toolbar__new" type="button" data-topic-new>
        {{ icons.i('plus') }} Nouveau thème
      </button>
    </div>

    <div class="alert alert--danger" data-topic-error hidden>
      Le service Hydrogen est injoignable. Réessaie dans un instant.
    </div>

    {# ── Liste des thèmes ──────────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="tpc-table-wrap">
        <table class="tpc-table" data-topics-table>
          <thead>
            <tr>
              <th>Thème</th><th>Slug</th><th>Niveau</th>
              <th class="tpc-num">Position</th><th>Traduction</th><th>État</th><th></th>
            </tr>
          </thead>
          <tbody data-topics-body>
            {% for i in 1..4 %}
              <tr class="tpc-row tpc-row--skeleton">
                <td colspan="7"><span class="skeleton skeleton--text" style="width:100%;height:20px"></span></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <p class="muted tpc-empty" data-topics-empty hidden>Aucun thème ne correspond.</p>
    </article>

    {# ── Modale création / édition ─────────────────────────────────────── #}
    <div class="modal modal--form" data-topic-modal hidden>
      <div class="cpnmodal" role="dialog" aria-modal="true" aria-labelledby="topic-modal-title">
        <button class="modal__close" type="button" data-topic-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="cpnmodal__head">
          <span class="cpnmodal__icon">{{ icons.i('layers') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="topic-modal-title" data-topic-modal-title>Nouveau thème</h2>
            <p class="cpnmodal__sub muted">Identité, hiérarchie et paramètres d'affichage.</p>
          </div>
        </div>

        <form class="cpnmodal__body" data-topic-form>
          <div class="cpnform__grid">
            <div class="field">
              <label for="tpc-slug">Slug</label>
              <input id="tpc-slug" type="text" data-tpc-slug maxlength="64" autocomplete="off"
                     placeholder="street-art" pattern="[a-z0-9-]{1,64}">
              <p class="field__hint muted" data-tpc-slug-hint>Identité + clé i18n. <strong>Immuable</strong> après création.</p>
            </div>

            <div class="field">
              <label for="tpc-emoji">Emoji <span class="muted">(optionnel)</span></label>
              <input id="tpc-emoji" type="text" data-tpc-emoji maxlength="8" autocomplete="off" placeholder="🎨">
            </div>

            <div class="field">
              <label for="tpc-position">Position</label>
              <input id="tpc-position" type="number" data-tpc-position min="0" step="1" value="0">
              <label class="cpn-check">
                <input type="checkbox" data-tpc-active checked> Thème actif
              </label>
            </div>

            <div class="field">
              <label for="tpc-parents">Parents <span class="muted">(aucun = racine)</span></label>
              <select id="tpc-parents" data-tpc-parents multiple size="6"></select>
              <p class="field__hint muted">Un thème peut relever de plusieurs parents (Ctrl/Cmd pour une sélection multiple).</p>
            </div>
          </div>

          {# Bloc lecture seule (édition) : libellés, usage, suppression. #}
          <div class="tpc-info" data-tpc-info hidden>
            <div class="tpc-info__labels" data-tpc-labels></div>
            <p class="tpc-info__usage muted" data-tpc-usage></p>
          </div>

          <p class="cpnform__error" data-topic-form-error hidden></p>
        </form>

        <div class="cpnmodal__foot">
          <button class="btn-ghost btn-ghost--danger tpc-del" type="button" data-topic-delete hidden>Supprimer</button>
          <span class="tpc-foot-spacer"></span>
          <button class="btn-ghost" type="button" data-topic-cancel>Annuler</button>
          <button class="btn" type="button" data-topic-save>Enregistrer</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}