{#
 # MOLECULE: SHARE LINK MODAL
 #
 # Modale de partage public, commune à Slidia, Scormia et Serenia. Un seul
 # exemplaire par page : l'endpoint porte un `{uuid}` littéral, substitué par le
 # contrôleur Stimulus à l'ouverture — la même modale sert donc toutes les cartes
 # de la liste.
 #
 # | Paramètre    | Type   | Description                                       |
 # |--------------|--------|---------------------------------------------------|
 # | endpoint     | string | URL de mise à jour, avec {uuid} substitué par le JS|
 # | accentHex    | string | Couleur du produit                                |
 # | withDownload | bool   | Rend l'interrupteur « Autoriser le téléchargement »|
 #
 # `withDownload` vaut `true` PAR DÉFAUT : Slidia et Scormia incluent la molécule
 # sans le passer et doivent continuer d'afficher la case. Seul Serenia le met à
 # `false` — une discussion ne se télécharge pas.
 #
 # INTERRUPTEURS — À LIRE AVANT DE TOUCHER AU BALISAGE :
 # ce sont de VRAIS <input type="checkbox">, masqués en `sr-only peer`, dont le
 # visuel (piste + pastille) est reconstruit avec les variantes `peer-checked:`.
 # Le contrôleur shared--share-link lit `.checked` et écoute `change` ; les
 # remplacer par des <button role="switch"> casserait sa logique (verrouillage
 # pendant l'appel, rollback sur échec) et son accessibilité clavier native.
 #
 # Pas de bouton « Révoquer » : couper l'interrupteur d'activation envoie déjà
 # enabled:false, que le serveur traite en révocation complète (jeton détruit,
 # téléchargement remis à false — cf. ShareLinkService::revoke()). Un bouton
 # séparé était une seconde commande pour la même action.
 #}
<div data-controller="shared--share-link"
     data-shared--share-link-endpoint-value="{{ endpoint }}"
     data-shared--share-link-csrf-value="{{ csrf_token('share_link') }}"
     data-shared--share-link-target="modal"
     data-action="click->shared--share-link#closeOnBackdrop keydown.esc@window->shared--share-link#close"
     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/35 backdrop-blur-[6px]"
     style="display:none;">
    {# `--share-accent` porte la couleur de l'OUTIL jusqu'aux interrupteurs. Ils étaient
       jusqu'ici au `primary` global — donc bleus, dans une modale Scormia indigo dont le
       bouton « Copier » affichait pourtant la bonne couleur, à trois centimètres de là. #}
    <div class="relative bg-white rounded-2xl w-full max-w-md shadow-xl border border-gray-100 overflow-hidden"
         style="--share-accent: {{ accentHex }};">

        {# ── En-tête ──────────────────────────────────────────────────────── #}
        <div class="flex items-start justify-between gap-4 px-6 pt-6 pb-5">
            <div>
                <h3 class="text-lg font-bold text-gray-900 leading-snug">Partager</h3>
                <p class="text-sm text-gray-500 mt-1 leading-relaxed">Toute personne disposant du lien pourra consulter ce contenu, sans compte.</p>
            </div>
            {% include '_atoms/close-button/close-button.html.twig' with {
                attr: { 'data-action': 'click->shared--share-link#close' }
            } only %}
        </div>

        {# ── Interrupteur principal ───────────────────────────────────────── #}
        <label class="flex items-center justify-between gap-4 px-6 py-4 border-y border-gray-100 bg-gray-50/60 cursor-pointer">
            <span class="min-w-0">
                {# Cet interrupteur est le SEUL chemin de révocation : le couper détruit le
                   jeton côté serveur. Choix produit assumé de ne pas le dire ici — la modale
                   reste courte, et le geste « je retire le partage » se comprend de lui-même. #}
                <span class="block text-sm font-semibold text-gray-900">Activer le lien public</span>
            </span>
            {# `peer` exige que piste et pastille soient des FRÈRES placés APRÈS l'input
               (le sélecteur compilé est `~`) : les imbriquer plus profond n'aurait aucun effet. #}
            <span class="relative inline-flex shrink-0">
                <input type="checkbox" class="sr-only peer" data-shared--share-link-target="enabled"
                       data-action="change->shared--share-link#save">
                <span class="h-6 w-11 rounded-full bg-gray-200 transition-colors
                             peer-checked:bg-(--share-accent)
                             peer-focus-visible:ring-2 peer-focus-visible:ring-(--share-accent) peer-focus-visible:ring-offset-2
                             peer-disabled:opacity-60 peer-disabled:cursor-not-allowed"></span>
                {# L'input étant masqué, l'état `disabled` posé par le contrôleur pendant l'appel
                   réseau ne se voit plus : les variantes peer-disabled ci-dessus le rendent. #}
                <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow transition-transform
                             peer-checked:translate-x-5 peer-disabled:opacity-60"></span>
            </span>
        </label>

        {# ── Zone du lien (affichée par #refresh() en `display:flex`) ─────── #}
        <div data-shared--share-link-target="linkZone" style="display:none;" class="flex flex-col gap-5 px-6 py-5">

            <div class="flex flex-col gap-2">
                <span class="text-xs font-semibold uppercase tracking-wide text-gray-400">Lien public</span>
                <div class="flex items-stretch gap-2">
                    <input type="text" readonly data-shared--share-link-target="url"
                           aria-label="Lien public"
                           class="flex-1 min-w-0 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-xl px-3.5 py-2.5 select-all focus:outline-none focus:border-gray-300 focus:ring-2 focus:ring-gray-100">
                    <button type="button" data-action="click->shared--share-link#copy"
                            class="shrink-0 inline-flex items-center gap-1.5 text-sm font-semibold px-4 rounded-xl text-white shadow-sm hover:brightness-95 transition cursor-pointer"
                            style="background-color: {{ accentHex }};">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'copy', size: 'xs', color: 'current'} only %}
                        Copier
                    </button>
                </div>
            </div>

            {# ── Interrupteur secondaire ──────────────────────────────────── #}
            {# `is not defined or withDownload`, et SURTOUT PAS `withDownload|default(true)` :
               le filtre `default` retombe sur sa valeur de repli pour toute valeur VIDE,
               pas seulement pour une variable indéfinie — et `false` est vide. Il rendait
               donc la case pour Serenia, qui passe pourtant explicitement `false`, tout en
               ayant l'air correct. Le test `is defined` est parfaitement toléré sur une
               variable indéfinie sous `strict_variables` (activé en test) : c'est même son
               emploi normal. Les trois appels incluent la molécule avec `only`, la variable
               est donc UNDEFINED chez Slidia et Scormia — la première branche préserve leur
               case, la seconde n'est évaluée que quand l'appelant s'est prononcé. #}
            {% if withDownload is not defined or withDownload %}
            <label class="flex items-center justify-between gap-4 cursor-pointer">
                <span class="min-w-0">
                    <span class="block text-sm font-medium text-gray-900">Autoriser le téléchargement</span>
                    <span class="block text-xs text-gray-500 mt-0.5">Les visiteurs pourront récupérer le fichier.</span>
                </span>
                <span class="relative inline-flex shrink-0">
                    <input type="checkbox" class="sr-only peer" data-shared--share-link-target="download"
                           data-action="change->shared--share-link#save">
                    <span class="h-6 w-11 rounded-full bg-gray-200 transition-colors
                                 peer-checked:bg-(--share-accent)
                                 peer-focus-visible:ring-2 peer-focus-visible:ring-(--share-accent) peer-focus-visible:ring-offset-2
                                 peer-disabled:opacity-60 peer-disabled:cursor-not-allowed"></span>
                    <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow transition-transform
                                 peer-checked:translate-x-5 peer-disabled:opacity-60"></span>
                </span>
            </label>
            {% endif %}
        </div>
    </div>
</div>