{#
 # PARTIAL: SLIDIA — MODALE « MA BIBLIOTHÈQUE » (MASQUES .PPTX)
 # Extrait de templates/slidia/index.html.twig, qui l'inclut une fois.
 #
 # Porte le contrôleur `slidia--template-library` : import d'un .pptx, filtres de type,
 # grille de masques, aperçu d'une mise en page avec ses zones de contenu, navigation
 # entre mises en page, exclusion d'une mise en page pour l'IA, renommage et suppression.
 # Les deux modales satellites (renommer / supprimer un masque) suivent la modale : elles
 # doivent rester DESCENDANTES de l'élément du contrôleur pour que Stimulus les résolve.
 #
 # Le bouton « Mes masques » vit dans l'en-tête, hors de cet élément : il passe par
 # `slidia--list#openLibraryModal`, qui appelle `open()` ici via l'outlet Stimulus
 # `data-slidia--list-slidia--template-library-outlet="#slidia-template-library"`.
 # L'id de ce conteneur est donc contractuel — cf. templates/slidia/index.html.twig.
 #
 # À inclure DANS le conteneur `.sdl-slidia` d'index.html.twig : la modale dépend des
 # variables CSS de thème (--color-primary…) posées en style en ligne sur ce conteneur.
 #
 # DEUX MODES (`mode`, 'library' par défaut) :
 #   - 'library' — sur /slidia : le pied mène à la création (« Créer avec ce masque »), et
 #     `createTooltipHtml` explique le blocage quand les tokens manquent.
 #   - 'picker'  — sur l'écran de paramètres : le pied REND le masque choisi au formulaire
 #     (« Choisir ce masque ») au lieu de naviguer. `createTooltipHtml` n'y sert pas : le
 #     verrou de tokens a déjà été franchi pour arriver sur cet écran.
 # La modale elle-même est identique dans les deux cas — c'est tout l'intérêt : l'utilisateur
 # retrouve la même bibliothèque, avec ses imports, ses filtres et son aperçu, là où il
 # choisissait auparavant dans une grille appauvrie qui ne montrait rien.
 #
 # DONNÉES REQUISES : sdColor, templates, templatesJson, canCreate, lastUsedTemplateId,
 # et createTooltipHtml en mode 'library'.
 #}
{% set mode = mode|default('library') %}
<div id="slidia-template-library"
     data-controller="slidia--template-library"
     data-slidia--template-library-templates-value="{{ templatesJson }}"
     data-slidia--template-library-sd-primary-value="{{ sdColor.primary }}"
     data-slidia--template-library-last-template-id-value="{{ lastUsedTemplateId }}"
     data-slidia--template-library-can-create-value="{{ canCreate ? 'true' : 'false' }}">

{# ══════════════════════════════════════════
   MODALE BIBLIOTHÈQUE DE MASQUES
   ══════════════════════════════════════════ #}
<div data-slidia--template-library-target="modal"
     class="fixed inset-0 z-[60] flex items-stretch sm:items-center justify-center p-0 sm:p-5"
     style="display:none;">

    {# Overlay cliquable #}
    <div class="absolute inset-0 bg-black/40 backdrop-blur-[6px]"
         data-action="click->slidia--template-library#close"></div>

    {# Panneau principal #}
    <div class="relative bg-white sm:rounded-3xl w-full sm:max-w-6xl shadow-2xl flex flex-col sdl-lib-modal-panel"
         style="height: 740px; max-height: 92vh;">

        {# En-tête #}
        <div class="flex items-center justify-between px-4 sm:px-6 pt-4 sm:pt-5 pb-3 sm:pb-4 border-b border-gray-100 shrink-0">
            <div>
                <h3 class="text-base sm:text-lg font-bold text-gray-900 leading-snug">Ma bibliothèque</h3>
                <p class="text-xs text-gray-400 mt-0.5 hidden sm:block">Sélectionnez un masque pour explorer ses layouts</p>
            </div>
            {% include '_atoms/close-button/close-button.html.twig' with {
                attr: { 'data-action': 'click->slidia--template-library#close' }
            } only %}
        </div>

        {# Onglets mobiles — masqués sur desktop #}
        <div class="flex sm:hidden border-b border-gray-100 shrink-0">
            <button type="button"
                    data-action="click->slidia--template-library#switchTab"
                    data-tab="masques"
                    data-slidia--template-library-target="tabMasques"
                    class="flex-1 py-2.5 text-sm font-semibold border-b-2 cursor-pointer transition-colors">
                Masques
            </button>
            <button type="button"
                    data-action="click->slidia--template-library#switchTab"
                    data-tab="apercu"
                    data-slidia--template-library-target="tabApercu"
                    class="flex-1 py-2.5 text-sm font-semibold border-b-2 cursor-pointer transition-colors">
                Aperçu
            </button>
        </div>

        {# Corps : gauche (templates) + droite (layouts) #}
        <div class="flex flex-1 overflow-hidden min-h-0">

            {# ── Colonne gauche — import + grille de masques ─────── #}
            {# 440 px, et non 360 : à deux colonnes, chaque vignette gagnait moins de 170 px
               de large — trop peu pour reconnaître un masque à son aperçu, qui est pourtant
               la seule chose qui le distingue vraiment d'un autre. #}
            <div class="w-full sm:w-[440px] shrink-0 overflow-y-auto sm:border-r border-gray-100 p-3 sm:p-5 flex flex-col gap-4"
                 data-slidia--template-library-target="colMasques">

                {# Zone de dépôt / import #}
                <label class="sdl-lib-upload-slot flex items-center gap-3 px-4 py-3.5 rounded-2xl cursor-pointer shrink-0"
                       data-slidia--template-library-target="uploadZone"
                       data-action="dragover->slidia--template-library#onUploadDragOver dragleave->slidia--template-library#onUploadDragLeave drop->slidia--template-library#onUploadDrop">
                    <input type="file" accept=".pptx" class="sr-only"
                           data-slidia--template-library-target="uploadInput"
                           data-action="change->slidia--template-library#onUploadFileChange">
                    <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0"
                         style="background: rgba({{ sdColor.primary|hex_to_rgb }}, 0.1);">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="{{ sdColor.primary }}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/>
                            <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/>
                        </svg>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-bold text-gray-700 leading-tight" data-slidia--template-library-target="uploadLabel">Importer un masque</p>
                        <p class="text-xs text-gray-400 leading-tight mt-0.5">.pptx · 20 Mo max</p>
                    </div>
                </label>

                {# Filtres de bibliothèque #}
                {% if templates is not empty %}
                <div class="flex gap-2 shrink-0 flex-wrap">
                    <button type="button" data-filter="all"
                            data-action="click->slidia--template-library#filterByType"
                            data-slidia--template-library-target="filterBtn"
                            class="sdl-lib-filter-pill px-3.5 py-1.5 rounded-full text-xs font-semibold transition-all duration-150 bg-gray-100 text-gray-500 cursor-pointer hover:bg-gray-200 hover:text-gray-700">Tous</button>
                    <button type="button" data-filter="system"
                            data-action="click->slidia--template-library#filterByType"
                            data-slidia--template-library-target="filterBtn"
                            class="sdl-lib-filter-pill px-3.5 py-1.5 rounded-full text-xs font-semibold transition-all duration-150 bg-gray-100 text-gray-500 cursor-pointer hover:bg-gray-200 hover:text-gray-700">Officiels</button>
                    <button type="button" data-filter="mine"
                            data-action="click->slidia--template-library#filterByType"
                            data-slidia--template-library-target="filterBtn"
                            class="sdl-lib-filter-pill px-3.5 py-1.5 rounded-full text-xs font-semibold transition-all duration-150 bg-gray-100 text-gray-500 cursor-pointer hover:bg-gray-200 hover:text-gray-700">Mes masques</button>
                </div>
                {% endif %}

                {# Grille de masques #}
                <div class="grid grid-cols-2 gap-3.5"
                     data-slidia--template-library-target="templateGrid">
                </div>
            </div>

            {# ── Colonne droite — visualisation livret ─────────── #}
            <div class="flex-1 flex flex-col overflow-hidden min-h-0"
                 data-slidia--template-library-target="colApercu"
                 style="background: rgba({{ sdColor.primary|hex_to_rgb }}, 0.05);">

                {# Zone centrale — placeholder ou livret #}
                <div class="flex-1 flex items-center justify-center relative px-3 sm:px-6 py-3 sm:py-6">

                    {# Placeholder — aucun masque sélectionné #}
                    <div data-slidia--template-library-target="previewPlaceholder"
                         class="flex flex-col items-center justify-center gap-3 text-gray-400">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="2" y="3" width="20" height="14" rx="2"/>
                            <path d="M8 21h8M12 17v4"/>
                        </svg>
                        <p class="text-sm font-medium">Sélectionnez un masque</p>
                    </div>

                    {# Panneau de prévisualisation — affiché après sélection #}
                    <div data-slidia--template-library-target="booklet"
                         class="w-full flex flex-col items-center gap-2 sm:gap-3"
                         style="max-width:540px;display:none;">

                        {# Label slide : "Couverture · 1/4" #}
                        <div class="flex items-center justify-center">
                            <span data-slidia--template-library-target="layoutName"
                                  class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-medium bg-white shadow-sm border border-gray-100/80"></span>
                        </div>

                        {# Slide principale — centrée #}
                        <div class="relative w-full" style="aspect-ratio:16/9;">
                            <div class="absolute inset-0 rounded-xl overflow-hidden bg-white"
                                 style="box-shadow:0 8px 32px rgba(0,0,0,0.14);">
                                <div data-slidia--template-library-target="previewContent"
                                     class="absolute inset-0 w-full h-full overflow-hidden"></div>
                            </div>

                            {# Flèches de navigation — superposées sur la slide #}
                            <button type="button"
                                    data-action="click->slidia--template-library#prevLayout"
                                    data-slidia--template-library-target="prevBtn"
                                    class="absolute left-2.5 top-1/2 -translate-y-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-white/85 backdrop-blur-sm text-gray-500 shadow-md transition-all hover:bg-white hover:text-gray-800 hover:shadow-lg cursor-pointer "
                                    style="display:none;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                            </button>
                            <button type="button"
                                    data-action="click->slidia--template-library#nextLayout"
                                    data-slidia--template-library-target="nextBtn"
                                    class="absolute right-2.5 top-1/2 -translate-y-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-white/85 backdrop-blur-sm text-gray-500 shadow-md transition-all hover:bg-white hover:text-gray-800 hover:shadow-lg cursor-pointer "
                                    style="display:none;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                            </button>
                        </div>

                        {# Strip de navigation en bas — scroll horizontal si > N cartes #}
                        <div data-slidia--template-library-target="cardStrip"
                             class="sdl-nav-strip flex w-full gap-1.5" style="overflow-x:auto;align-items:flex-start;"></div>
                    </div>
                </div>
            </div>

        </div>

        {# Pied — Actions masque + CTA #}
        <div class="px-4 sm:px-6 py-3 sm:py-4 border-t border-gray-100 flex items-center justify-between gap-3 shrink-0 flex-wrap sm:flex-nowrap">
            <div class="flex items-center gap-2">
                <button type="button"
                        data-slidia--template-library-target="renameBtn"
                        data-action="click->slidia--template-library#openRenameModal"
                        class="inline-flex items-center gap-1.5 h-9 px-3.5 rounded-full text-sm font-medium text-gray-500 border border-gray-200 hover:border-gray-300 hover:text-gray-700 transition-all shrink-0 cursor-pointer"
                        style="display:none;">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                    Renommer
                </button>
                <button type="button"
                        data-slidia--template-library-target="deleteBtn"
                        data-action="click->slidia--template-library#openDeleteModal"
                        class="inline-flex items-center gap-1.5 h-9 px-3.5 rounded-full text-sm font-medium text-red-400 border border-red-100 hover:border-red-200 hover:text-red-600 hover:bg-red-50 transition-all shrink-0 cursor-pointer"
                        style="display:none;">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14H6L5 6"></path><path d="M10 11v6M14 11v6"></path><path d="M9 6V4h6v2"></path></svg>
                    Supprimer
                </button>
            </div>
            {# Retiré du wizard (route supprimée) au profit de la page de choix : le masque
               sélectionné n'a plus besoin d'un `?template=` en query string (que `app_slidia_new`
               ignorerait) — `selectTemplate()` persiste déjà `lastTemplateId` via
               PATCH /api/slidia/preferences, et `configure()` le relit pour préremplir et
               surligner la carte correspondante. Le lien reste donc nu : `?template=` porte
               un sens opposé sur /slidia, où il filtre la bibliothèque. #}
            {% if mode == 'picker' %}
                {# Le choix RETOURNE au formulaire : `confirmPick()` émet
                   `slidia-library:picked`, que l'écran de paramètres écoute. Aucune
                   navigation — l'utilisateur est déjà en train de créer sa présentation. #}
                <button type="button"
                        data-slidia--template-library-target="createBtn"
                        data-action="click->slidia--template-library#confirmPick"
                        class="inline-flex items-center justify-center h-9 px-5 rounded-full text-sm font-bold text-white transition-all sdl-lib-cta-disabled w-full sm:w-auto cursor-pointer"
                        style="background: linear-gradient(135deg, {{ sdColor.primary }}, {{ sdColor.secondary }});">
                    Choisir ce masque
                </button>
            {% else %}
                <span class="inline-flex w-full sm:w-auto" {% if not canCreate %}data-tooltip-html="{{ createTooltipHtml|trim|e('html_attr') }}"{% endif %}>
                    <a {% if canCreate %}href="{{ path('app_slidia_new') }}"{% endif %}
                       data-slidia--template-library-target="createBtn"
                       class="inline-flex items-center justify-center gap-2 h-9 px-5 rounded-full text-sm font-bold text-white transition-all sdl-lib-cta-disabled w-full sm:w-auto{% if not canCreate %} opacity-50 cursor-not-allowed pointer-events-none{% endif %}"
                       style="background: linear-gradient(135deg, {{ sdColor.primary }}, {{ sdColor.secondary }});">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'sparkles', size: 'xs', color: 'current'} only %}
                        Créer avec ce masque
                    </a>
                </span>
            {% endif %}
        </div>

    </div>
</div>

{# ══════════════════════════════════════════
   MODALE RENOMMER MASQUE BIBLIOTHÈQUE
   ══════════════════════════════════════════ #}
{% embed '_organisms/rename-modal/rename-modal.html.twig' with {
    title:        'Renommer le masque',
    subtitle:     'Donnez un nouveau nom à ce masque PowerPoint.',
    placeholder:  'Nom du masque',
    hint:         'Max. 20 caractères',
    color:        sdColor,
    modalAttr:    {'data-slidia--template-library-target': 'renameModal', 'style': 'z-index:70'},
    inputAttr:    {
        'data-slidia--template-library-target': 'renameInput',
        'data-action': 'keydown.enter->slidia--template-library#confirmRename keydown.escape->slidia--template-library#closeRenameModal',
        'maxlength': '20'
    },
    cancelAttr:   {'data-action': 'click->slidia--template-library#closeRenameModal'},
    confirmAttr:  {'data-action': 'click->slidia--template-library#confirmRename'}
} only %}{% endembed %}

{# ══════════════════════════════════════════
   MODALE SUPPRIMER MASQUE BIBLIOTHÈQUE
   ══════════════════════════════════════════ #}
{% embed '_organisms/delete-modal/delete-modal.html.twig' with {
    title:       'Supprimer ce masque ?',
    modalAttr:   {'data-slidia--template-library-target': 'deleteModal', 'data-action': 'keydown.esc@window->slidia--template-library#closeDeleteModal', 'style': 'z-index:70'},
    cancelAttr:  {'data-action': 'click->slidia--template-library#closeDeleteModal'},
    confirmAttr: {'data-action': 'click->slidia--template-library#confirmDelete'}
} only %}
    {% block description %}
        <p class="text-sm text-gray-500">
            <strong class="text-gray-900 font-semibold" data-slidia--template-library-target="deleteModalTitle"></strong>
            sera retiré définitivement de votre bibliothèque. Cette action est irréversible.
        </p>
    {% endblock %}
{% endembed %}

</div>{# /slidia--template-library #}