{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Badges{% endblock %}
{% block heading %}Badges{% endblock %}
{% block subheading %}Catalogue de gamification — badges et paliers{% endblock %}

{% block content %}
  <div data-badges
       data-list-url="{{ listUrl }}"
       data-item-base="{{ itemBase }}"
       data-icon-base="{{ iconBase }}"
       data-icon-resolve-base="{{ iconResolveBase }}"
       data-categories-url="{{ categoriesUrl }}"
       data-category-base="{{ categoryBase }}">

    {# ── Barre d'outils : recherche, filtre d'état, création ────────────── #}
    <div class="cpn-toolbar" data-animate>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-badge-search placeholder="Filtrer par slug, métrique…" autocomplete="off">
      </label>
      <div class="mfilter__status" role="group" aria-label="Filtrer par état">
        <button class="mm-period__btn is-active" type="button" data-badge-filter="">Tous</button>
        <button class="mm-period__btn" type="button" data-badge-filter="active">Actifs</button>
        <button class="mm-period__btn" type="button" data-badge-filter="inactive">Inactifs</button>
      </div>
      <button class="btn-ghost cpn-toolbar__manage" type="button" data-bcat-manage>
        {{ icons.i('cog') }} Catégories
      </button>
      <button class="btn cpn-toolbar__new" type="button" data-badge-new>
        {{ icons.i('plus') }} Nouveau badge
      </button>
    </div>

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

    {# ── Liste des badges ──────────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="cpn-list" data-badge-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-badge-empty hidden>Aucun badge ne correspond.</p>
    </article>

    {# ── Modale création / édition ─────────────────────────────────────── #}
    <div class="modal modal--form" data-badge-modal hidden>
      <div class="cpnmodal cpnmodal--badge" role="dialog" aria-modal="true" aria-labelledby="badge-modal-title">
        <button class="modal__close" type="button" data-badge-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('medal') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="badge-modal-title" data-badge-modal-title>Nouveau badge</h2>
            <p class="cpnmodal__sub muted">Identité, métrique et paliers de progression.</p>
          </div>
        </div>

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

            <div class="field">
              <label for="bd-metric">Métrique</label>
              <input id="bd-metric" type="text" data-bd-metric maxlength="120" autocomplete="off"
                     placeholder="media.uploaded">
              <p class="field__hint muted">Convention <code>domaine.événement</code> rapprochée des seuils.</p>
            </div>

            <div class="field">
              <label for="bd-type">Type</label>
              <select id="bd-type" data-bd-type>
                <option value="unique">Unique — un seul palier (niveau 1)</option>
                <option value="level">Paliers — 1 à 5 niveaux</option>
              </select>
            </div>

            <div class="field">
              <label for="bd-category">Catégorie</label>
              <select id="bd-category" data-bd-category>
                <option value="">Aucune catégorie</option>
              </select>
              <p class="field__hint muted" data-bd-category-warn hidden>
                Référentiel des catégories injoignable — classement désactivé.
              </p>
            </div>

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

          {# ── Contenu localisable (label + description) — édition seule,
             remplacement intégral par locale côté Hydrogen, indexé par le slug. #}
          <div class="brand-edito" data-bd-edit-only data-bd-editorial hidden>
            <div class="brand-edito__head">
              <span class="brand-edito__label muted">Contenu localisé</span>
              <div class="mm-period brand-edito__locales" role="group" aria-label="Langue">
                <button class="mm-period__btn is-active" type="button" data-bd-edito-locale="fr-FR">FR</button>
                <button class="mm-period__btn" type="button" data-bd-edito-locale="en-US">EN</button>
              </div>
            </div>
            <div class="brand-edito__fields" data-bd-edito-fields>
              <div class="field field--wide">
                <label for="bd-label">Libellé <span class="muted">(≤ 160 caractères)</span></label>
                <input id="bd-label" type="text" data-bd-label maxlength="160" autocomplete="off"
                       placeholder="Photographe">
              </div>
              <div class="field field--wide">
                <label for="bd-desc">Description <span class="muted">(≤ 2 048 caractères)</span></label>
                <textarea id="bd-desc" data-bd-desc rows="4" maxlength="2048"
                          placeholder="Récompense votre régularité à publier."></textarea>
              </div>
              <div class="brand-edito__foot">
                <span class="brand-edito__status muted" data-bd-edito-status></span>
                <button class="btn-ghost" type="button" data-bd-edito-save>Enregistrer le contenu</button>
              </div>
              <p class="field__hint muted">Vider le libellé retire le contenu de cette langue.</p>
            </div>
          </div>

          {# ── Éditeur de paliers ──────────────────────────────────────── #}
          <div class="badge-tiers" data-bd-tiers-wrap>
            <div class="badge-tiers__head">
              <span class="badge-tiers__title">Paliers</span>
              <button class="btn-ghost badge-tiers__add" type="button" data-bd-tier-add hidden>
                {{ icons.i('plus') }} Ajouter un palier
              </button>
            </div>
            <div class="badge-tiers__list" data-bd-tiers></div>
            <p class="field__hint muted" data-bd-tiers-hint>Chaque palier : niveau, seuil (≥ 0) et XP récompensé (≥ 0).</p>
          </div>

          {# ── Icônes SVG (édition seule : dérivées du slug) ─────────────── #}
          <div class="badge-icons" data-bd-icons-wrap hidden>
            <div class="badge-icons__head">
              <span class="badge-icons__title">Icônes</span>
              <span class="field__hint muted">SVG uniquement · une icône par palier + la silhouette « verrouillée ».</span>
            </div>
            <div class="badge-icons__grid" data-bd-icons></div>
          </div>

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

        {# Input fichier partagé, piloté par le slot cliqué. #}
        <input type="file" accept="image/svg+xml,.svg" data-bd-icon-file hidden>

        <div class="cpnmodal__foot">
          <span class="badge-holders muted" data-badge-holders hidden></span>
          <button class="btn-ghost" type="button" data-badge-cancel>Annuler</button>
          <button class="btn" type="button" data-badge-save>Enregistrer</button>
        </div>
      </div>
    </div>

    {# ── Modale référentiel des catégories de badge ─────────────────────── #}
    <div class="modal modal--form" data-bcat-modal hidden>
      <div class="cpnmodal cpnmodal--badge" role="dialog" aria-modal="true" aria-labelledby="bcat-modal-title">
        <button class="modal__close" type="button" data-bcat-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('cog') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="bcat-modal-title">Catégories de badge</h2>
            <p class="cpnmodal__sub muted">Référentiel de regroupement — un badge relève d'au plus une catégorie.</p>
          </div>
        </div>

        <div class="cpnmodal__body">
          <div class="alert alert--danger" data-bcat-error hidden>
            Le référentiel est injoignable. Réessaie dans un instant.
          </div>

          <div class="bcat-list" data-bcat-list>
            {% for i in 1..3 %}
              <div class="cpn-row cpn-row--skeleton"><span class="skeleton cpn-skel"></span></div>
            {% endfor %}
          </div>
          <p class="muted cpn-empty" data-bcat-empty hidden>Aucune catégorie définie.</p>

          <form class="bcat-create" data-bcat-form>
            <span class="bcat-create__title muted">Nouvelle catégorie</span>
            <div class="bcat-create__fields">
              <input type="text" data-bcf-slug autocomplete="off" maxlength="64"
                     pattern="[a-z0-9-]{1,64}" placeholder="slug (creation)">
              <input type="text" data-bcf-fr autocomplete="off" maxlength="120" placeholder="Libellé FR">
              <input type="text" data-bcf-en autocomplete="off" maxlength="120" placeholder="Libellé EN">
              <button class="btn" type="submit" data-bcat-add>{{ icons.i('plus') }} Ajouter</button>
            </div>
            <p class="field__hint muted">Le slug est l'identité publique (clé i18n) — <strong>immuable</strong> après création. Glisse les lignes par la poignée pour les réordonner.</p>
            <p class="cpnform__error" data-bcat-error-form hidden></p>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}