{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Marques{% endblock %}
{% block heading %}Marques{% endblock %}
{% block subheading %}Catalogue des marques — MySQL fait foi, reprojeté dans Meilisearch{% endblock %}

{% set brandKpis = {
  'total':     { 'label': 'Marques', 'icon': 'tag' },
  'active':    { 'label': 'Actives', 'icon': 'check' },
  'inactive':  { 'label': 'Inactives', 'icon': 'ban' },
  'withLinks': { 'label': 'Avec liens', 'icon': 'compass' }
} %}

{% block content %}
  <div data-brands
       data-list-url="{{ listUrl }}"
       data-item-base="{{ itemBase }}"
       data-ptypes-url="{{ providerTypesUrl }}"
       data-ptype-base="{{ providerTypeBase }}">

    {# ── KPI ───────────────────────────────────────────────────────────── #}
    <section class="grid grid--kpi">
      {% for key, def in brandKpis %}
        <article class="kpi glass" data-brand-kpi="{{ key }}" data-animate>
          <div class="kpi__top">
            <div class="kpi__icon">{{ icons.i(def.icon) }}</div>
          </div>
          <div class="kpi__value" data-brand-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, statut, création ───────────────────── #}
    <div class="cpn-toolbar" data-animate>
      <label class="mfilter__search">
        {{ icons.i('search') }}
        <input type="search" data-brand-search placeholder="Filtrer par nom, code, id…" autocomplete="off">
      </label>
      <div class="mfilter__status" role="group" aria-label="Filtrer par statut">
        <button class="mm-period__btn is-active" type="button" data-brand-filter-status="">Toutes</button>
        <button class="mm-period__btn" type="button" data-brand-filter-status="active">Actives</button>
        <button class="mm-period__btn" type="button" data-brand-filter-status="inactive">Inactives</button>
      </div>
      <select class="cpn-toolbar__type" data-brand-filter-type aria-label="Filtrer par type de prestataire">
        <option value="">Tous les types</option>
      </select>
      <button class="btn-ghost cpn-toolbar__manage" type="button" data-ptype-manage>
        {{ icons.i('cog') }} Gérer les types
      </button>
      <button class="btn-ghost cpn-toolbar__order" type="button" data-brand-order>
        {{ icons.i('sort') }} Classer par type
      </button>
      <button class="btn cpn-toolbar__new" type="button" data-brand-new>
        {{ icons.i('plus') }} Nouvelle marque
      </button>
    </div>

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

    {# ── Liste des marques ─────────────────────────────────────────────── #}
    <article class="card glass" data-animate>
      <div class="cpn-list" data-brand-list>
        {% for i in 1..5 %}
          <div class="cpn-row cpn-row--skeleton">
            <span class="skeleton cpn-skel"></span>
          </div>
        {% endfor %}
      </div>
      <p class="muted cpn-empty" data-brand-empty hidden>Aucune marque ne correspond.</p>
    </article>

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

        <form class="cpnmodal__body" data-brand-form>
          <div class="cpnform__grid">
            {# frontId : création uniquement (immuable ensuite, non lu dans le document) #}
            <div class="field" data-brand-create-only>
              <label for="bf-frontid">Front id</label>
              <input id="bf-frontid" type="text" data-bf-frontid autocomplete="off"
                     placeholder="a1b2c3" pattern="[A-Za-z0-9]{6}" maxlength="6">
              <p class="field__hint muted">6 caractères alphanumériques — non modifiable ensuite.</p>
            </div>
            <div class="field field--wide">
              <label for="bf-name">Nom</label>
              <input id="bf-name" type="text" data-bf-name autocomplete="off" maxlength="45"
                     placeholder="Acme">
            </div>

            {# Contenu éditorial localisable (résumé + description) — édition seule,
               remplacement intégral par locale côté Hydrogen, indexé par le code. #}
            <div class="brand-edito" data-brand-edit-only data-brand-editorial hidden>
              <div class="brand-edito__head">
                <span class="brand-edito__label muted">Contenu éditorial</span>
                <div class="mm-period brand-edito__locales" role="group" aria-label="Langue">
                  <button class="mm-period__btn is-active" type="button" data-brand-edito-locale="fr-FR">FR</button>
                  <button class="mm-period__btn" type="button" data-brand-edito-locale="en-US">EN</button>
                </div>
              </div>
              <p class="brand-edito__warn muted" data-brand-edito-warn hidden>
                Renseigne un code pour la marque afin de gérer le contenu éditorial.
              </p>
              <div class="brand-edito__fields" data-brand-edito-fields>
                <div class="field field--wide">
                  <label for="bf-shortdesc">Résumé court <span class="muted">(≤ 1 024 caractères)</span></label>
                  <textarea id="bf-shortdesc" data-bf-shortdesc rows="2" maxlength="1024"
                            placeholder="Voyages organisés."></textarea>
                </div>
                <div class="field field--wide">
                  <label for="bf-desc">Description <span class="muted">(Markdown)</span></label>
                  <textarea id="bf-desc" data-bf-desc rows="6"
                            placeholder="FRAM, spécialiste du voyage organisé depuis 1949."></textarea>
                </div>
                <div class="brand-edito__foot">
                  <span class="brand-edito__status muted" data-brand-edito-status></span>
                  <button class="btn-ghost" type="button" data-brand-edito-save>Enregistrer le contenu</button>
                </div>
              </div>
            </div>

            <div class="field">
              <label for="bf-code">Code <span class="muted">(facultatif)</span></label>
              <input id="bf-code" type="text" data-bf-code autocomplete="off" maxlength="45"
                     placeholder="acme">
            </div>
            <div class="field">
              <label for="bf-status">Statut</label>
              <select id="bf-status" data-bf-status>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>

            <div class="field">
              <label for="bf-brandmargin">Marge marque <span class="muted">(facultatif)</span></label>
              <input id="bf-brandmargin" type="number" step="0.01" min="0" data-bf-brandmargin
                     autocomplete="off" placeholder="1.32">
            </div>
            <div class="field">
              <label for="bf-margin">Marge <span class="muted">(facultatif)</span></label>
              <input id="bf-margin" type="number" step="0.01" data-bf-margin autocomplete="off"
                     placeholder="1.32">
            </div>
            <div class="field">
              <label for="bf-marginunit">Unité de marge <span class="muted">(facultatif)</span></label>
              <input id="bf-marginunit" type="text" data-bf-marginunit autocomplete="off" maxlength="5"
                     placeholder="%">
            </div>
            <div class="field">
              <label for="bf-cookie">Cookie timing <span class="muted">(secondes)</span></label>
              <input id="bf-cookie" type="number" step="1" min="0" data-bf-cookie autocomplete="off"
                     placeholder="42300">
            </div>

            <div class="field field--wide">
              <label for="bf-link-global">Lien global <span class="muted">(facultatif)</span></label>
              <input id="bf-link-global" type="url" data-bf-link-global autocomplete="off"
                     placeholder="https://…">
            </div>
            <div class="field field--wide">
              <label for="bf-link-media">Lien média <span class="muted">(facultatif)</span></label>
              <input id="bf-link-media" type="url" data-bf-link-media autocomplete="off"
                     placeholder="https://…">
            </div>
          </div>

          {# Types de prestataire : éditables via le référentiel /admin/provider-types #}
          <div class="brand-types" data-brand-types-editor>
            <div class="brand-types__head">
              <span class="brand-types__label muted">Types de prestataire</span>
              <button class="btn-ghost brand-types__add" type="button" data-brand-type-add>
                {{ icons.i('plus') }} Ajouter un type
              </button>
            </div>
            <div class="brand-types__rows" data-brand-type-rows></div>
            <p class="brand-types__empty muted" data-brand-type-empty hidden>Aucun type rattaché.</p>
            <p class="brand-types__warn muted" data-brand-type-warn hidden>
              Référentiel des types injoignable — l'édition des types est désactivée pour cette marque.
            </p>
          </div>

          {# Visuels : icône & logo × light / dark / monochrome — édition seule,
             indexés par le code de la marque côté Hydrogen. #}
          <div class="brand-art" data-brand-edit-only data-brand-artwork hidden>
            <div class="brand-art__head">
              <span class="brand-art__label muted">Visuels de la marque</span>
              <span class="brand-art__note muted">WebP généré automatiquement · indexé par le code.</span>
            </div>
            <p class="brand-art__warn muted" data-brand-art-warn hidden>
              Renseigne un code pour la marque afin de pouvoir téléverser des visuels.
            </p>
            {% for type in ['icon', 'logo'] %}
              <div class="brand-art__group" data-brand-art-group="{{ type }}">
                <span class="brand-art__gtitle">{{ type == 'icon' ? 'Icône' : 'Logo' }}</span>
                <div class="brand-art__slots">
                  {% for m in ['light', 'dark', 'monochrome'] %}
                    <div class="brand-art-slot brand-art-slot--{{ m }}" data-brand-art-slot
                         data-art-type="{{ type }}" data-art-mode="{{ m }}">
                      <div class="brand-art-slot__preview" data-art-preview>
                        {{ icons.i('image') }}
                      </div>
                      <span class="brand-art-slot__cap">
                        {{ {'light': 'Clair', 'dark': 'Sombre', 'monochrome': 'Mono'}[m] }}
                      </span>
                      <div class="brand-art-slot__actions">
                        <label class="icon-btn brand-art-slot__up" title="Téléverser" aria-label="Téléverser">
                          {{ icons.i('upload') }}
                          <input type="file" accept="image/*" hidden data-art-input>
                        </label>
                        <button class="icon-btn icon-btn--danger" type="button" data-art-del hidden
                                title="Retirer" aria-label="Retirer">
                          {{ icons.i('trash') }}
                        </button>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endfor %}
          </div>

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

        <div class="cpnmodal__foot cpnmodal__foot--split">
          <button class="btn-ghost btn-ghost--danger" type="button" data-brand-delete hidden>Supprimer la marque</button>
          <button class="btn" type="button" data-brand-save>Enregistrer</button>
        </div>
      </div>
    </div>

    {# ── Modale référentiel des types de prestataire ───────────────────── #}
    <div class="modal modal--form" data-ptype-modal hidden>
      <div class="cpnmodal" role="dialog" aria-modal="true" aria-labelledby="ptype-modal-title">
        <button class="modal__close" type="button" data-ptype-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="ptype-modal-title">Types de prestataire</h2>
            <p class="cpnmodal__sub muted">Référentiel partagé par toutes les marques.</p>
          </div>
        </div>

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

          <div class="ptype-list" data-ptype-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-ptype-empty hidden>Aucun type défini.</p>

          <form class="ptype-create" data-ptype-form>
            <div class="ptype-create__fields">
              <input type="text" data-pf-name autocomplete="off" maxlength="45" placeholder="Nom du type">
              <button class="btn" type="submit" data-ptype-add>{{ icons.i('plus') }} Ajouter</button>
            </div>
            <p class="field__hint muted">Le nouveau type est ajouté en fin de liste ; glisse les lignes pour les réordonner.</p>
            <p class="cpnform__error" data-ptype-error-form hidden></p>
          </form>
        </div>
      </div>
    </div>

    {# ── Modale : classement des marques par type ──────────────────────── #}
    <div class="modal modal--form" data-border-modal hidden>
      <div class="cpnmodal" role="dialog" aria-modal="true" aria-labelledby="border-modal-title">
        <button class="modal__close" type="button" data-border-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('sort') }}</span>
          <div>
            <h2 class="cpnmodal__title" id="border-modal-title">Classer les marques</h2>
            <p class="cpnmodal__sub muted">Glisse les marques pour définir leur ordre au sein d'un type.</p>
          </div>
        </div>

        <div class="cpnmodal__body">
          <div class="alert alert--danger" data-border-error hidden>
            Le référentiel des types est injoignable — impossible de classer les marques.
          </div>

          <div class="field field--wide">
            <label for="border-type">Type de prestataire</label>
            <select id="border-type" data-border-type>
              <option value="">Sélectionne un type…</option>
            </select>
          </div>

          <div class="border-order" data-border-list></div>
          <p class="muted cpn-empty" data-border-empty hidden>Aucune marque rattachée à ce type.</p>
          <p class="field__hint muted" data-border-hint hidden>
            L'ordre est enregistré automatiquement à chaque déplacement.
          </p>
        </div>
      </div>
    </div>
  </div>
{% endblock %}