{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Contenu{% endblock %}
{% block heading %}Contenu{% endblock %}
{% block subheading %}Documents éditoriaux — CGU, politiques, aide{% endblock %}

{% set contentKpis = {
  'total':     { 'label': 'Documents', 'icon': 'article' },
  'published': { 'label': 'Publiés', 'icon': 'check' },
  'draft':     { 'label': 'Brouillons', 'icon': 'pencil' },
  'categories':{ 'label': 'Catégories', 'icon': 'compass' }
} %}

{% block content %}
  <div data-content data-documents-url="{{ documentsUrl }}">

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

    {# ── Barre d'outils : recherche, catégorie, statut, création ────────── #}
    <div class="cpn-toolbar" data-animate>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-content-search placeholder="Filtrer par slug, titre…" autocomplete="off">
      </label>
      <select class="cpn-toolbar__cat" data-content-filter-category aria-label="Filtrer par catégorie">
        <option value="">Toutes catégories</option>
      </select>
      <div class="mfilter__status" role="group" aria-label="Filtrer par statut">
        <button class="mm-period__btn is-active" type="button" data-content-filter-status="">Tous</button>
        <button class="mm-period__btn" type="button" data-content-filter-status="published">Publiés</button>
        <button class="mm-period__btn" type="button" data-content-filter-status="draft">Brouillons</button>
      </div>
      <button class="btn cpn-toolbar__new" type="button" data-content-new>
        {{ icons.i('plus') }} Nouveau document
      </button>
    </div>

    {# ── Alerte d'indisponibilité ──────────────────────────────────────── #}
    <div class="alert alert--danger" data-content-error hidden>
      Le service Hydrogen est injoignable. Réessaie dans un instant.
    </div>

    {# ── Liste des documents ───────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="cpn-list" data-content-list>
        {% for i in 1..4 %}
          <div class="cpn-row cpn-row--skeleton">
            <span class="skeleton cpn-skel"></span>
          </div>
        {% endfor %}
      </div>
      <p class="muted cpn-empty" data-content-empty hidden>Aucun document ne correspond.</p>
    </article>

    {# ── Modale d'édition ──────────────────────────────────────────────── #}
    <div class="modal modal--form" data-content-modal hidden>
      <div class="cpnmodal cpnmodal--wide" role="dialog" aria-modal="true" aria-labelledby="content-modal-title">
        <button class="modal__close" type="button" data-content-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('article') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="content-modal-title" data-content-modal-title>Document</h2>
            <p class="cpnmodal__sub muted" data-content-modal-sub></p>
          </div>
        </div>

        <div class="cpntabs" role="tablist">
          <button class="cpntab is-active" type="button" role="tab" data-content-tab data-panel="meta">Métadonnées</button>
          <button class="cpntab" type="button" role="tab" data-content-tab data-panel="translation">Traduction</button>
          <button class="cpntab" type="button" role="tab" data-content-tab data-panel="revisions">Révisions</button>
        </div>

        <div class="cpnmodal__body">
          {# ── Panneau Méta ─────────────────────────────────────────────── #}
          <section class="cpntab-panel" data-content-panel="meta">
            <div class="cpnform__grid">
              <div class="field">
                <label for="cf-category">Catégorie <span class="muted">(facultatif)</span></label>
                <input id="cf-category" type="text" data-cf-category autocomplete="off"
                       placeholder="legal" pattern="[a-z0-9-]{1,32}" maxlength="32">
                <p class="field__hint muted">Minuscules, chiffres, tirets — 32 caractères max.</p>
              </div>
              <div class="field">
                <label for="cf-status">Statut</label>
                <select id="cf-status" data-cf-status>
                  <option value="draft">Brouillon</option>
                  <option value="published">Publié</option>
                </select>
              </div>
              <div class="field">
                <label for="cf-version">Version <span class="muted">(facultatif)</span></label>
                <input id="cf-version" type="text" data-cf-version autocomplete="off"
                       placeholder="2024-11" maxlength="20">
              </div>
              <div class="field">
                <label for="cf-effective">Date d'effet <span class="muted">(facultatif)</span></label>
                <input id="cf-effective" type="datetime-local" data-cf-effective>
              </div>
            </div>
            <p class="cpnform__error" data-content-meta-error hidden></p>
            <div class="cpnmodal__foot cpnmodal__foot--inline">
              <button class="btn-ghost btn-ghost--danger" type="button" data-content-delete>Supprimer le document</button>
              <button class="btn" type="button" data-content-meta-save>Enregistrer la méta</button>
            </div>
          </section>

          {# ── Panneau Traduction ───────────────────────────────────────── #}
          <section class="cpntab-panel" data-content-panel="translation" hidden>
            <div class="content-editor__bar">
              <span class="trans-badge" data-content-trans-badge></span>
              <label class="content-editor__locale">
                <span class="muted">Locale</span>
                <select data-content-locale></select>
              </label>
            </div>
            <div class="cpnform__grid">
              <div class="field field--wide">
                <label for="cf-title">Titre</label>
                <input id="cf-title" type="text" data-cf-title autocomplete="off" maxlength="255"
                       placeholder="Conditions générales d'utilisation">
              </div>
              <div class="field">
                <label for="cf-meta-title">Meta title <span class="muted">(facultatif)</span></label>
                <input id="cf-meta-title" type="text" data-cf-meta-title autocomplete="off" maxlength="255">
              </div>
              <div class="field">
                <label for="cf-meta-desc">Meta description <span class="muted">(facultatif)</span></label>
                <input id="cf-meta-desc" type="text" data-cf-meta-desc autocomplete="off" maxlength="500">
              </div>
              <div class="field field--wide">
                <label for="cf-body">Corps <span class="muted">(Markdown)</span></label>
                <textarea id="cf-body" data-cf-body rows="16" class="content-editor__body"
                          placeholder="# Titre&#10;&#10;Contenu en Markdown…"></textarea>
              </div>
            </div>
            <p class="cpnform__error" data-content-trans-error hidden></p>
            <div class="cpnmodal__foot cpnmodal__foot--inline">
              <button class="btn-ghost btn-ghost--danger" type="button" data-content-trans-delete hidden>Retirer cette traduction</button>
              <button class="btn" type="button" data-content-trans-save>Enregistrer la traduction</button>
            </div>
          </section>

          {# ── Panneau Révisions ────────────────────────────────────────── #}
          <section class="cpntab-panel" data-content-panel="revisions" hidden>
            <p class="muted content-rev__intro">
              Historique légal append-only de la traduction
              <strong data-content-rev-locale></strong>.
            </p>
            <ul class="content-rev" data-content-rev-list></ul>
            <p class="muted cpn-empty" data-content-rev-empty hidden>Aucune révision pour cette locale.</p>
            <div class="cpn-more">
              <button class="btn-ghost" type="button" data-content-rev-more hidden>Charger plus</button>
            </div>
          </section>
        </div>
      </div>
    </div>

    {# ── Modale de création ────────────────────────────────────────────── #}
    <div class="modal modal--form" data-content-create-modal hidden>
      <div class="cpnmodal" role="dialog" aria-modal="true" aria-labelledby="content-create-title">
        <button class="modal__close" type="button" data-content-create-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('plus') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="content-create-title">Nouveau document</h2>
            <p class="cpnmodal__sub muted">Le slug est immuable après création.</p>
          </div>
        </div>
        <form class="cpnmodal__body" data-content-create-form>
          <div class="cpnform__grid">
            <div class="field field--wide">
              <label for="cf-new-slug">Slug</label>
              <input id="cf-new-slug" type="text" data-cf-new-slug autocomplete="off"
                     placeholder="terms-of-service" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" maxlength="80">
              <p class="field__hint muted">Kebab-case : minuscules, chiffres, tirets — 80 caractères max.</p>
            </div>
            <div class="field">
              <label for="cf-new-category">Catégorie <span class="muted">(facultatif)</span></label>
              <input id="cf-new-category" type="text" data-cf-new-category autocomplete="off"
                     placeholder="legal" pattern="[a-z0-9-]{1,32}" maxlength="32">
            </div>
            <div class="field">
              <label for="cf-new-status">Statut</label>
              <select id="cf-new-status" data-cf-new-status>
                <option value="draft">Brouillon</option>
                <option value="published">Publié</option>
              </select>
            </div>
          </div>
          <p class="cpnform__error" data-content-create-error hidden></p>
        </form>
        <div class="cpnmodal__foot">
          <button class="btn-ghost" type="button" data-content-create-cancel>Annuler</button>
          <button class="btn" type="button" data-content-create-save>Créer</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}