{#
 # PAGE: SCORMIA — ÉDITEUR DE MODULE (design « CODE V1 »)
 # Shell 3 zones : topbar · sommaire (gauche, repliable) · canevas (centre).
 # Le sommaire, le canevas et le panneau thème sont RENDUS PAR LE JS
 # (contrôleur Stimulus scormia--editor) — le template ne fournit que les
 # conteneurs cibles. Page-outil plein écran : sidebar app masquée.
 # DONNÉES REQUISES (ScormiaEditorController::editor) : module, moduleJson, blockTypes, presets, themeCss
 #}

{% extends 'base.html.twig' %}

{% block title %}Scormia — {{ module.title }}{% endblock %}

{% block show_sidebar %}false{% endblock %}

{% block main_class %}p-0{% endblock %}

{% block body %}
<style id="sc-theme-css">{{ themeCss|raw }}</style>

<div class="h-screen flex flex-col overflow-hidden"
     style="font-family: var(--font-ui)"
     data-controller="scormia--editor"
     data-action="keydown.up@window->scormia--editor#prevNode keydown.down@window->scormia--editor#nextNode"
     data-scormia--editor-module-value="{{ moduleJson|json_encode|e('html_attr') }}"
     data-scormia--editor-uuid-value="{{ module.uuid }}"
     data-scormia--editor-block-types-value="{{ blockTypes|json_encode|e('html_attr') }}">

    {# ===== TOPBAR : retour + titre (gauche) · statut + Thème + Aperçu + Exporter (droite) ===== #}
    <header class="flex items-center justify-between gap-4 bg-white border-b border-[var(--line)] px-[26px] py-[14px] shrink-0">
        <div class="flex items-center gap-3 flex-1 min-w-0">
            <a href="{{ path('app_scormia') }}" title="Retour à la bibliothèque" aria-label="Retour à la bibliothèque"
               class="w-8 h-8 flex items-center justify-center rounded-[10px] text-[20px] leading-none text-[var(--mut-2)] hover:text-[var(--ink)] hover:bg-[#f4f6fb] transition-colors shrink-0">&larr;</a>
            <input data-scormia--editor-target="titleInput"
                   data-action="input->scormia--editor#updateTitle"
                   value="{{ module.title }}"
                   placeholder="Titre du module" aria-label="Titre du module"
                   class="bg-transparent outline-none text-[18px] font-bold text-[var(--ink)] placeholder:text-[var(--ph)] min-w-0 flex-1 max-w-md rounded-lg px-1.5 py-1 hover:bg-[#f4f6fb] focus:bg-[#f4f6fb] transition-colors">
        </div>

        {# `shared--share-trigger` : le bouton « Partager » plus bas vit dans cette barre, la
           modale est incluse en fin de page. Stimulus n'acheminant une action que vers un
           contrôleur ANCÊTRE, ce relais est indispensable (cf. share_trigger_controller.js). #}
        <div data-controller="shared--share-trigger" class="flex items-center gap-[10px] shrink-0">
            <span data-scormia--editor-target="saveStatus"
                  class="hidden sm:inline text-[12px] text-[var(--mut-2)] whitespace-nowrap">Enregistré</span>
            <button type="button" data-action="scormia--editor#openTheme"
                    data-tour-step="scormia-theme"
                    title="Choisir le thème du module"
                    class="flex items-center gap-2 bg-white border border-[var(--line-2)] rounded-[10px] px-[14px] py-2 text-[13px] font-semibold text-[var(--ink)] hover:bg-[#f7f9ff] hover:border-[var(--acc-border)] transition-colors">
                <span data-scormia--editor-target="themeDot" aria-hidden="true"
                      class="w-[14px] h-[14px] rounded-full shrink-0" style="background: var(--acc)"></span>
                Thème
            </button>

            {# Réglages du module (seuil de validation du quiz) — popover ancré, fermé au clic extérieur / Échap. #}
            <div class="relative">
                <button type="button" data-action="scormia--editor#toggleSettings"
                        data-tour-step="scormia-reglages"
                        title="Réglages du module"
                        class="flex items-center gap-2 bg-white border border-[var(--line-2)] rounded-[10px] px-[14px] py-2 text-[13px] font-semibold text-[var(--ink)] hover:bg-[#f7f9ff] hover:border-[var(--acc-border)] transition-colors">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'settings', size: 'sm', color: 'current' } only %}
                    <span class="hidden sm:inline">Réglages</span>
                </button>
                <div data-scormia--editor-target="settingsPanel" hidden
                     data-action="keydown.esc@window->scormia--editor#closeSettings"
                     class="absolute right-0 top-full mt-2 z-50 w-[300px] bg-white border border-[var(--line-2)] rounded-2xl shadow-[0_12px_40px_rgba(0,0,0,0.12)] p-4 text-left">
                    <p class="text-[11px] font-bold tracking-[1px] uppercase text-[var(--mut)] mb-3 select-none">Réglages du module</p>
                    <label for="sc-passing-score" class="block text-[13px] font-semibold text-[var(--ink)] mb-2">Validation du quiz</label>
                    <div class="flex items-center gap-2.5 mb-3.5">
                        <input type="number" id="sc-passing-score" min="0" max="100" step="5"
                               value="{{ module.passingScore }}"
                               data-scormia--editor-target="passingScoreInput"
                               data-action="input->scormia--editor#setPassingScore change->scormia--editor#setPassingScore"
                               class="sc-num w-[64px] h-10 text-center rounded-xl border border-[var(--line-2)] text-[16px] font-bold text-[var(--ink)] focus:outline-none focus:border-[var(--acc-border)] focus:ring-2 focus:ring-[var(--acc-soft)]">
                        <span class="text-[13px] font-medium text-[var(--mut-2)]">% requis</span>
                    </div>
                    <input type="range" min="0" max="100" step="5"
                           value="{{ module.passingScore }}"
                           aria-label="Seuil de validation du quiz"
                           data-scormia--editor-target="passingScoreRange"
                           data-action="input->scormia--editor#setPassingScore"
                           class="sc-range" style="--sc-range-fill: {{ module.passingScore }}%">
                    <p class="text-[11px] text-[var(--mut-2)] leading-relaxed mt-2.5">L'apprenant valide l'activité au-dessus de ce score. Sans quiz dans le module, ce réglage est ignoré.</p>
                </div>
            </div>
            {#- `scormia-exporter` enveloppe les TROIS sorties du module — Aperçu, Partager,
                Exporter. L'étape parle des trois, et n'en éclairer qu'une laissait les deux
                autres dans l'ombre du voile au moment même où on les nomme. -#}
            <div class="flex items-center gap-[10px]" data-tour-step="scormia-exporter">
            <a href="{{ path('app_scormia_preview', { uuid: module.uuid }) }}" target="_blank"
               data-action="click->scormia--editor#exportModule"
               title="Aperçu du module (nouvel onglet)"
               class="hidden sm:inline-flex bg-white border border-[var(--line-2)] rounded-[10px] px-[14px] py-2 text-[13px] font-semibold text-[var(--ink)] hover:bg-[#f7f9ff] hover:border-[var(--acc-border)] transition-colors">Aperçu</a>
            {# Partager — MÊME modale que la bibliothèque, ouverte sur le même endpoint.
               Le bouton porte lui-même les quatre attributs lus par `shared--share-link#open`
               (`data-uuid`, `data-shared`, `data-download`, `data-share-url`) : ici il n'y a
               ni carte ni menu partagé dont les recopier, il EST le déclencheur durable, et
               #writeBack y réécrit l'état après chaque réponse du serveur.
               `data-download`, pas `data-share-download` : le second est le nom porté par les
               CARTES de liste ; `open()`, lui, lit `dataset.download`. #}
            <button type="button"
                    data-action="click->shared--share-trigger#open"
                    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}) : '' }}"
                    title="Partager le module par un lien public"
                    class="flex items-center gap-2 bg-white border border-[var(--line-2)] rounded-[10px] px-[14px] py-2 text-[13px] font-semibold text-[var(--ink)] hover:bg-[#f7f9ff] hover:border-[var(--acc-border)] transition-colors">
                {% include '_atoms/icon/icon.html.twig' with { name: 'share', size: 'sm', color: 'current' } only %}
                <span class="hidden sm:inline">Partager</span>
            </button>
            <a href="{{ path('app_scormia_export', { uuid: module.uuid }) }}"
               data-action="click->scormia--editor#exportModule"
               title="Exporter le module au format SCORM (ZIP)"
               class="rounded-[10px] px-4 py-[9px] text-[13px] font-semibold text-white whitespace-nowrap hover:opacity-90 transition-opacity"
               style="background: var(--acc-deep)">Exporter (ZIP)</a>
            </div>
        </div>
    </header>

    {# ===== CORPS : sommaire (aside) · canevas (main) + hamburger flottant, backdrop drawer, panneau thème ===== #}
    <div class="flex flex-1 overflow-hidden relative">

        {# Sommaire — 330px, repliable ; l'arborescence est rendue par le JS dans `outline`. #}
        <aside data-scormia--editor-target="sidebar"
               data-tour-step="scormia-sommaire"
               class="w-[330px] bg-white border-r border-[var(--line)] overflow-y-auto shrink-0 px-[14px] py-5">
            <div class="flex items-center justify-between px-1.5 mb-3.5">
                <span class="text-[11px] font-bold tracking-[1px] uppercase text-[var(--mut)] select-none">Sommaire</span>
                <div class="flex items-center gap-1.5">
                    <button type="button" data-action="scormia--editor#addChapter"
                            data-tour-step="scormia-ajouter"
                            title="Ajouter une partie" aria-label="Ajouter une partie"
                            class="w-[26px] h-[26px] flex items-center justify-center rounded-lg border border-[var(--line-2)] bg-white text-[16px] leading-none hover:bg-[var(--acc-soft)] hover:border-[var(--acc-border)] transition-colors"
                            style="color: var(--acc)">+</button>
                    <button type="button" data-action="scormia--editor#toggleSidebar"
                            title="Masquer le sommaire" aria-label="Masquer le sommaire"
                            class="w-[26px] h-[26px] flex items-center justify-center rounded-lg border border-[var(--line-2)] bg-white text-[var(--mut-2)] hover:bg-[#f4f6fb] hover:border-[var(--acc-border)] transition-colors">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>
                    </button>
                </div>
            </div>
            <div data-scormia--editor-target="outline"></div>
        </aside>

        {# Hamburger flottant — visible seulement quand le sommaire est replié (le JS échange hidden ↔ flex). #}
        <button type="button" data-scormia--editor-target="sidebarToggle"
                data-action="scormia--editor#toggleSidebar"
                title="Afficher le sommaire" aria-label="Afficher le sommaire"
                class="hidden absolute top-4 left-4 z-20 w-10 h-10 items-center justify-center rounded-[10px] border border-[var(--line-2)] bg-white text-[var(--ink-2)] shadow-[0_6px_18px_-8px_rgba(27,36,64,0.35)] hover:bg-[#f4f6fb] hover:border-[var(--acc-border)] transition-colors">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>

        {# Backdrop du mode drawer (< 900px) — le JS l'affiche quand le sommaire est ouvert en écran étroit. #}
        <div data-scormia--editor-target="backdrop"
             data-action="click->scormia--editor#toggleSidebar"
             class="hidden absolute inset-0 z-30 bg-[rgba(27,36,64,0.28)]" aria-hidden="true"></div>

        {# Canevas — fil d'Ariane + carte du nœud courant, rendus par le JS. #}
        <main data-scormia--editor-target="canvas"
              data-tour-step="scormia-canevas"
              class="flex-1 min-w-0 overflow-y-auto"
              style="background: var(--acc-bg)"></main>

        {# Panneau thème — overlay caché par défaut, contenu rendu par le JS (lib/theme_panel.js : presets + persos + galerie live). #}
        <div data-scormia--editor-target="themePanel"
             data-action="keydown.esc@window->scormia--editor#closeTheme"
             class="hidden fixed inset-0 z-50"></div>
    </div>

    {# ── Modal de confirmation : suppression d'un nœud du sommaire (organisme partagé) ── #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        title:       'Supprimer cet élément ?',
        modalAttr:   {'data-scormia--editor-target': 'deleteScreenModal', 'data-action': 'keydown.esc@window->scormia--editor#cancelDeleteNode'},
        cancelAttr:  {'data-action': 'click->scormia--editor#cancelDeleteNode'},
        confirmAttr: {'data-action': 'click->scormia--editor#confirmDeleteNode'}
    } only %}
        {% block description %}
            <p class="text-sm text-gray-500">
                <strong class="text-gray-900 font-semibold" data-scormia--editor-target="deleteScreenTitle"></strong>
                et son contenu seront supprimés définitivement (un chapitre supprime aussi ses sous-chapitres).
            </p>
        {% endblock %}
    {% endembed %}

    {# ===== Modal : partage public (molécule partagée avec la bibliothèque) ===== #}
    {% include '_molecules/share-link/share-link-modal.html.twig' with {
        endpoint: path('app_scormia_share_update', {uuid: '__UUID__'})|replace({'__UUID__': '{uuid}'}),
        accentHex: tool_color_details['scormia'].primary
    } only %}

    {# La modale média (lib/media_modal.js) rend son propre DOM dans <body> — aucun conteneur ici. #}
</div>
{% endblock %}