{# Carte d'un module Scormia (bibliothèque) — même langage visuel que les cartes
   de cours du dashboard Moodia (pill de type, titre 2 lignes, stats inline,
   rangée méta, footer daté), avec les données Scormia : parties/écrans, quiz,
   score de réussite, accent du module. Requiert : module. #}

{# Stats dérivées des écrans et blocs du module. #}
{% set ecrans  = module.screens|length %}
{% set parties = module.screens|filter(s => s.nodeType == 'chapter')|length %}
{% set quiz    = module.screens|reduce((c, s) => c + (s.blocks|filter(b => b.type == 'quiz')|length), 0) %}

{# Couleur identité de l'outil Scormia (indigo) — pour la conso tokens ; indépendante de
   l'accent du module (var(--acc)) qui, lui, peut varier par thème. #}
{% set scormiaColor = (tool_color_details['scormia'] ?? {}).primary ?? '#1E40AF' %}

{# Métriques de la rangée de tags en tête de carte (type + « Partagé »). Ces deux tags
   sont une PAIRE : ils doivent partager leurs métriques littéralement et ne se distinguer
   que par la couleur. D'où une seule chaîne, utilisée par les deux — les recopier serait
   se condamner à les voir diverger au prochain ajustement, ce qui est exactement ce qui
   était arrivé.
   Et non l'atome badge : sa table de tailles (h-6 px-2.5 text-xs font-medium) est
   calibrée pour d'autres contextes, et il n'expose ni casse ni interlettrage. Lui passer
   ces métriques en `class` reviendrait à parier sur l'ordre des utilitaires Tailwind dans
   la feuille compilée pour trancher les conflits. Retoucher l'atome est exclu : il sert
   partout dans l'application.
   (Motif déjà employé dans templates/slidia/index.html.twig : triggerBase, optBase.) #}
{% set cardTagBase = 'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold uppercase tracking-wide' %}

{# Le dataset de partage est porté par la RACINE de carte, comme côté Slidia
   (_presentation_card.html.twig) : shared--share-link#writeBack y écrit les trois
   valeurs après chaque succès serveur, et y LIT l'état d'avant écriture pour dire aux
   listes si le partage a réellement changé. Sans rendu initial, cette lecture vaut
   `undefined` au premier passage — la première révocation après chargement de page
   passerait alors pour un non-changement, laissant une carte fantôme sous l'onglet
   « Partagés » et un compteur faux. Les trois attributs vont ensemble : n'en poser
   qu'un laisserait le dataset à moitié initialisé et le même piège au suivant. #}
<div class="relative h-full" data-module-card data-uuid="{{ module.uuid }}"
     data-shared="{{ module.isShared ? '1' : '0' }}"
     data-share-download="{{ module.isShareDownloadEnabled ? '1' : '0' }}"
     data-share-url="{{ module.isShared ? url('app_public_scormia_preview', {token: module.shareToken}) : '' }}"
     style="--acc: {{ module.accent }};">
    <a href="{{ path('app_scormia_editor', { uuid: module.uuid }) }}"
       class="group relative flex flex-col h-full bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden
              min-h-[320px] transition-all duration-300 ease-out
              hover:shadow-lg hover:shadow-gray-200/50 hover:-translate-y-1 hover:border-gray-200">

        {# Bordure supérieure à l'accent au hover (animation scale, comme Moodia) #}
        <div class="absolute top-0 left-0 right-0 h-1 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500 ease-out"
             style="background: var(--acc);"></div>

        {# Contenu principal (flex-grow pour pousser le footer en bas) #}
        <div class="flex-grow p-8 pb-6">
            {# Header : pill de type à l'accent du module, suivi du tag « Partagé ».
               Le tag vit DANS le flux (et non plus en absolute) : posé au-dessus de la
               carte, il chevauchait ce pill. Il reste à gauche, jamais aligné à droite,
               pour ne pas passer sous le menu ⋯ (absolute top-3 right-3).
               Toujours rendu (pas de {% if %}) : shared--share-link#save()
               bascule son display sans recharger la page (cf. [data-module-card] plus
               haut, retrouvé par le contrôleur depuis le bouton « Partager » du menu). #}
            <div class="flex items-center gap-2 mb-5">
                <span class="{{ cardTagBase }}"
                      style="background: color-mix(in srgb, var(--acc) 10%, white); color: var(--acc);">
                    {{ quiz > 0 ? 'Module + Quiz' : 'Module SCORM' }}
                </span>
                {# Mêmes métriques que son voisin (cardTagBase), gris neutre volontaire :
                   le tag ne doit pas concurrencer l'accent du module.
                   L'icône est contrainte à 10 px en CSS, et non par le paramètre `size` de
                   l'atome : son sizeMap PLANCHE à 12 px ('xs'), et lui passer un nombre ne
                   marche pas — `sizeMap[10]` étant indéfini, le `?? 20` de l'atome ferait
                   une icône de 20 px. Or 12 px est déjà trop gros à côté d'un texte de
                   11 px en capitales (hauteur de capitale ≈ 8 px). D'où la règle CSS, qui
                   l'emporte sur les attributs width/height du SVG. Ne pas « simplifier »
                   ceci en `size:` : la régression serait invisible en test.
                   data-share-badge est sur CET élément : shared--share-link#writeBack
                   bascule son style.display (cf. share_link_controller.js) ; le remettre
                   à '' restitue l'inline-flex de la classe. #}
                <span class="{{ cardTagBase }} shrink-0 bg-gray-100 text-gray-600 [&_svg]:w-2.5 [&_svg]:h-2.5"
                      data-share-badge style="{{ module.isShared ? '' : 'display:none' }}">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'share', size: 'xs', color: 'current'} only %}
                    Partagé
                </span>
            </div>

            {# Titre (hauteur fixe pour 2 lignes) #}
            <h3 class="text-xl font-semibold text-gray-900 leading-snug mb-4 line-clamp-2 h-14 transition-colors group-hover:text-[var(--acc)]"
                data-module-title>
                {{ module.title }}
            </h3>

            {# Stats inline #}
            <p class="text-sm text-gray-500 mb-6">
                {{ parties }} partie{{ parties > 1 ? 's' }} · {{ ecrans }} écran{{ ecrans > 1 ? 's' }}
            </p>

            {# Metadata row #}
            <div class="flex flex-wrap items-center gap-x-6 gap-y-2">
                <span class="flex items-center gap-1.5 text-xs text-gray-500">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'sm', color: 'gray' } only %}
                    {{ quiz }} quiz
                </span>
                {% if quiz > 0 %}
                    <span class="flex items-center gap-1.5 text-xs text-gray-500">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'target', size: 'sm', color: 'gray' } only %}
                        Réussite {{ module.passingScore }} %
                    </span>
                {% endif %}
                {% if module.language %}
                    <span class="flex items-center gap-1.5 text-xs text-gray-500">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'earth', size: 'sm', color: 'gray' } only %}
                        {{ module.language|capitalize }}
                    </span>
                {% endif %}
            </div>
        </div>

        {# Footer daté + consommation IA à droite — même design que les cartes de cours Moodia
           (date à gauche ; tokens colorés + énergie en ambre). Tokens à l'accent du module
           (var(--acc), équivalent au text-primary de Moodia) ; énergie en ambre à l'identique.
           Affiché seulement pour un module généré par IA (tokensUsed renseigné).

           La date est RELATIVE, comme celle des cartes Slidia : sur une bibliothèque qu'on
           consulte pour retrouver ce qu'on vient de faire, « Il y a 26 min » répond à la
           question posée, là où « 3 août 2026 » oblige à la calculer. #}
        <div class="flex items-center justify-between px-8 py-5 border-t border-gray-100 bg-gray-50/30 mt-auto">
            <span class="text-xs text-gray-400">
                {{ module.updatedAt|relative_date }}
            </span>

            <div class="flex items-center gap-4">
                {# Tokens — couleur identité Scormia (indigo), comme le text-primary des cartes Moodia #}
                {% if module.tokensUsed %}
                    <span class="flex items-center gap-1.5 text-xs font-medium" style="color: {{ scormiaColor }};">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'sm', color: 'current' } only %}
                        {{ module.tokensUsed|format_tokens }}
                    </span>
                {% endif %}

                {# Énergie — ambre (identique aux cartes Moodia) #}
                {% if module.energyConsumptionWh %}
                    <span class="flex items-center gap-1.5 text-xs font-medium text-amber-500">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'bolt', size: 'sm', color: 'warning' } only %}
                        {{ module.energyConsumptionWh|format_energy }}
                    </span>
                {% endif %}
            </div>
        </div>
    </a>

    {# Menu d'actions ⋯ (accent du module), hors du <a> pour éviter la navigation au clic #}
    <div class="absolute top-3 right-3 z-10">
        {# ORDRE CANONIQUE des menus de carte, identique dans tous les outils — voir
           `_molecules/action-menu/action-menu.html.twig`. #}
        {% include '_molecules/action-menu/action-menu.html.twig' with {
            withTrigger: true,
            position: 'right-0 top-full mt-1',
            items: [
                {label: 'Partager', icon: 'share', attr: {
                    'data-action': 'click->scormia--library#openShareModal',
                    'data-uuid': module.uuid,
                    'data-shared': module.isShared ? '1' : '0',
                    'data-download': module.isShareDownloadEnabled ? '1' : '0',
                    'data-share-url': module.isShared ? url('app_public_scormia_preview', {token: module.shareToken}) : ''
                }},
                {label: 'Exporter (ZIP)', icon: 'download', href: path('app_scormia_export', { uuid: module.uuid })},
                {label: 'Ajouter à Moodia', icon: 'bubul-moodia', attr: {
                    'data-action': 'click->shared--add-to-moodia#open',
                    'data-podcast-id': module.uuid,
                    'data-podcast-title': module.title
                }},
                {label: 'Renommer', icon: 'edit', attr: {
                    'data-action': 'click->scormia--library#openRenameModal',
                    'data-uuid': module.uuid,
                    'data-title': module.title
                }},
                {label: 'Dupliquer', icon: 'copy', attr: {
                    'data-action': 'click->scormia--library#duplicate',
                    'data-scormia--library-uuid-param': module.uuid
                }}
            ],
            dangerItems: [
                {label: 'Supprimer', icon: 'trash', attr: {
                    'data-action': 'click->scormia--library#openDeleteModal',
                    'data-uuid': module.uuid,
                    'data-title': module.title
                }}
            ],
            accentHex: module.accent
        } only %}
    </div>
</div>