{#
  slidia-template-card — Carte de sélection d'un masque Slidia
  ─────────────────────────────────────────────────────────────
  Obligatoires : id, name, layoutCount, controller (identifiant Stimulus qui reçoit les
                 actions — il n'a plus de valeur par défaut depuis que `slidia--create` a
                 disparu avec le wizard : un défaut silencieux câblerait la carte sur un
                 contrôleur mort, sans erreur ni test rouge)
  Optionnels   : thumbnailsReady (bool), accentColor (hex), accentRgb ("R,G,B"),
                 layoutNames (array), loopIndex (int),
                 withActions (bool, défaut: false — le menu ⋯ s'active explicitement)
#}
{% set accent     = accentColor ?? '#6B7280' %}
{% set rgb        = accentRgb ?? '107, 114, 128' %}
{% set ctrl       = controller %}
{% set showMenu   = (withActions ?? false) and not (isSystem ?? false) %}
{% set delay      = min(0.42 + (loopIndex ?? 0) * 0.055, 0.82) %}
{% set hasThumbs  = thumbnailsReady is defined and thumbnailsReady %}

{#
  ACCESSIBILITÉ CLAVIER — la carte est un `<div>` porteur d'un `click` : sans les attributs
  ci-dessous, elle n'est ni atteignable au `Tab` ni activable, et un écran où le masque
  conditionne la soumission (`slidia/configure.html.twig`) devient impossible à compléter au
  clavier seul.

  Ces attributs ne sont posés QUE lorsque la carte ne porte pas son menu « ⋯ » (`showMenu`
  faux). Deux raisons, toutes deux dirimantes :
    1. `role="button"` ne doit pas contenir de descendant focalisable — un vrai `<button>`
       imbriqué dans un rôle de bouton est un motif ARIA invalide ;
    2. le menu ne neutralise la propagation que du `click` (`#stopPropagation`) : un `Entrée`
       sur le bouton « ⋯ » remonterait jusqu'à la carte et sélectionnerait le masque au
       passage.
  Concrètement : toutes les cartes de l'écran de configuration (qui passe `withActions: false`)
  et les cartes « officielles » du wizard en bénéficient ; les cartes personnelles du wizard —
  les seules à porter un menu — restent rendues à l'octet près comme avant.

  `:prevent` sur la barre d'espace évite le défilement de la page, comportement par défaut du
  navigateur sur un élément focalisable.

  Les actions sont écrites INLINE dans l'attribut plutôt qu'assemblées dans une variable : une
  chaîne construite puis rendue par `{{ }}` serait échappée, et chaque `->` sortirait en
  `-&gt;`. Le navigateur le décoderait sans broncher, mais la carte à menu du wizard n'aurait
  alors plus un rendu identique à l'octet près — ce qui est précisément la garantie recherchée.
#}

<div class="group relative bg-white rounded-2xl overflow-hidden cursor-pointer border-2
            transition-all duration-200 hover:-translate-y-1
            sdl-card-anim sdl-library-card"
     style="--delay: {{ delay }}s;"
     data-{{ ctrl }}-target="libraryCard"
     data-template-section="{{ (isSystem ?? false) ? 'official' : 'mine' }}"
     data-template-id="{{ id }}"
     data-template-name="{{ name }}"
     data-layout-count="{{ layoutCount }}"
     data-thumbnails-ready="{{ hasThumbs ? '1' : '0' }}"
     data-accent-color="{{ accent }}"
     data-layout-names='{{ (layoutNames ?? [])|json_encode }}'
     data-layout-paths='{{ (layoutPaths ?? [])|json_encode }}'
     data-excluded-layout-paths='{{ (excludedLayoutPaths ?? [])|json_encode }}'
     {% if not showMenu %}tabindex="0" role="button" aria-label="Choisir le masque {{ name }}"{% endif %}
     data-action="click->{{ ctrl }}#selectLibraryTemplate{% if not showMenu %} keydown.enter->{{ ctrl }}#selectLibraryTemplate:prevent keydown.space->{{ ctrl }}#selectLibraryTemplate:prevent{% endif %}">


    {# ── Zone de prévisualisation ──────────────────────────────────
       Bord à bord, sans rembourrage : la vignette EST l'information de cette carte, et
       chaque pixel qu'on lui reprend la rend plus difficile à reconnaître. La carte fantôme
       inclinée qui vivait derrière a disparu avec le rembourrage — elle n'avait plus la
       place d'exister, et ne disait rien du masque. #}
    <div class="relative bg-slate-50 overflow-hidden" style="will-change: transform;">

        <div class="relative aspect-[16/10] bg-white overflow-hidden sdl-card-inner-preview">

            {% if hasThumbs %}
                <img src="{{ path('api_slidia_template_thumbnail', {id: id, n: 0}) }}"
                     class="w-full h-full object-cover"
                     alt="{{ name }}">
            {% else %}
                {# Maquette décorative : barre latérale + lignes de texte + rectangle #}
                <div class="w-full h-full relative p-2 pl-3.5">
                    <div class="absolute left-2 top-2 bottom-2 w-0.5 rounded-full"
                         style="background: {{ accent }};"></div>
                    <div class="space-y-1 mt-0.5">
                        <div class="h-1.5 rounded-full w-2/3" style="background: {{ accent }}; opacity: 0.8;"></div>
                        <div class="h-1 rounded-full bg-gray-100 w-full"></div>
                        <div class="h-1 rounded-full bg-gray-100 w-4/5"></div>
                        <div class="h-1 rounded-full bg-gray-100 w-3/5"></div>
                    </div>
                    <div class="absolute bottom-2 right-2 w-6 h-2.5 rounded"
                         style="background: {{ accent }}; opacity: 0.4;"></div>
                </div>
            {% endif %}

            {# Trait d'accent : ce qui reste de la bordure, là où il ne concurrence pas
               celle de la carte. #}
            <span class="absolute inset-x-0 bottom-0 h-1" style="background: {{ accent }};"></span>
        </div>
    </div>

    {# ── Informations + menu ───────────────────────────────────────── #}
    <div class="px-4 pb-3.5 pt-3 border-t border-black/[0.05] flex items-center justify-between gap-1.5">
        <div class="min-w-0 flex-1">
            <div class="flex items-center gap-1.5 min-w-0">
                <p class="text-[13px] font-bold text-gray-800 truncate leading-snug"
                   data-template-name-el>{{ name }}</p>
                {% if isSystem ?? false %}
                    <span class="shrink-0 text-[8px] font-bold px-1.5 py-0.5 rounded-full uppercase tracking-wide"
                          style="background: rgba({{ rgb }}, 0.12); color: {{ accent }};">Officiel</span>
                {% endif %}
            </div>
            <p class="text-[11px] text-gray-400 mt-1 leading-none">
                {{ layoutCount }} mise{{ layoutCount > 1 ? 's' : '' }} en page
            </p>
        </div>

        {% if showMenu %}
        {# Menu positionné à droite du nom, s'ouvre vers le haut #}
        <div class="shrink-0"
             data-action="click->{{ ctrl }}#stopPropagation">
            <div class="relative" data-controller="shared--popover">
                <button type="button"
                        class="w-6 h-6 flex items-center justify-center text-gray-400 rounded-md hover:bg-black/5 hover:text-gray-600 transition-colors cursor-pointer"
                        data-action="click->shared--popover#toggle">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="5"  r="1.5" fill="currentColor"/>
                        <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
                        <circle cx="12" cy="19" r="1.5" fill="currentColor"/>
                    </svg>
                </button>
                <div hidden data-shared--popover-target="panel" class="absolute right-0 bottom-full mb-1 z-50">
                    <div class="bg-white rounded-3xl border border-black/[0.06] shadow-[0_8px_32px_rgba(0,0,0,0.10)] p-2 w-44">
                        <div class="flex flex-col gap-0.5">
                            <button type="button"
                                    class="flex items-center gap-2 w-full px-3 py-2 text-sm text-gray-700 rounded-xl hover:bg-gray-50 transition-colors"
                                    data-action="click->{{ ctrl }}#openRenameModal">
                                {% include '_atoms/icon/icon.html.twig' with {name: 'edit', size: 'xs'} only %}
                                Renommer
                            </button>
                        </div>
                        <div class="my-1.5 border-t border-gray-100"></div>
                        <div class="flex flex-col gap-0.5">
                            <button type="button"
                                    class="flex items-center gap-2 w-full px-3 py-2 text-sm text-red-500 rounded-xl hover:bg-red-50 hover:text-red-600 transition-colors"
                                    data-action="click->{{ ctrl }}#deleteTemplate">
                                {% include '_atoms/icon/icon.html.twig' with {name: 'trash', size: 'xs'} only %}
                                Supprimer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

</div>