{#
 # PAGE: SLIDIA — BIBLIOTHÈQUE DE PRÉSENTATIONS
 # Liste des présentations de l'utilisateur : créer, ouvrir, renommer, dupliquer,
 # partager, supprimer, plus la bibliothèque de masques (.pptx).
 # Même gabarit que Moodia et Scormia : en-tête d'outil, barre de filtres, grille,
 # pagination — tous rendus par les composants partagés (_organisms/tool-header,
 # _organisms/tool-toolbar, _molecules/pagination, _molecules/empty-state).
 # Filtres et pagination sont SERVEUR (liens), cf. SlidiaController::index().
 # DONNÉES REQUISES : presentations, total, currentPage, totalPages, search,
 # templateFilter, sharedOnly, templates, templatesJson, sharedCount,
 # medianTokenCost, canCreate, slidiaMinTokens, lastUsedTemplateId
 #}

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

{% block title %}Slidia — Mes présentations{% endblock %}

{% block meta_description %}Gérez et créez vos présentations PowerPoint avec Slidia, le générateur de slides IA de Bubul.{% endblock %}
{% block og_title %}Slidia — Mes présentations{% endblock %}
{% block og_description %}Créez des présentations PowerPoint professionnelles en quelques clics grâce à l'IA Slidia.{% endblock %}
{% block twitter_title %}Slidia — Mes présentations{% endblock %}
{% block twitter_description %}Créez des présentations PowerPoint professionnelles en quelques clics grâce à l'IA Slidia.{% endblock %}

{% block body %}
{% set sdColor = tool_color_details['slidia'] %}
{% set sdRgb = sdColor.primary|hex_to_rgb %}

{# canCreate est calculé par SlidiaController::index() (mêmes règles que
   denyIfInsufficientTokens(), admin exempté) — plus de recalcul côté Twig. #}
{% set currentPlanSlug = app.user.company ? 'b2b' : (app.user.plan ? app.user.plan.slug : 'freemium') %}
{% set createTooltipHtml %}{% include '_molecules/upgrade-tooltip/upgrade-tooltip.html.twig' with {
    minTokens: slidiaMinTokens,
    currentPlanSlug: currentPlanSlug,
    upgradeUrl: path('app_upgrade')
} only %}{% endset %}

<style>
    /* Focus des items du menu ⋯ aux couleurs de l'outil (--accent-rgb), pas le bleu par défaut. */
    .action-menu-item:focus, .action-menu-item:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .45) !important; }
    /* Onglets (molécule Moodia) : l'ombre bleue codée en dur du tab actif passe à l'ambre. */
    .sdl-tabs [aria-pressed="true"] { box-shadow: 0 3px 12px rgba(var(--sd-accent-rgb), .3) !important; }
    /* L'utilitaire `shadow-primary` compile une valeur LITTÉRALE bleue (Tailwind v4 inline la
       valeur de thème : `--tw-shadow: 0 4px 14px 0 var(--tw-shadow-color, rgba(12,129,228,.25))`),
       qu'aucune surcharge de variable CSS ne peut atteindre. On la neutralise donc ici — elle
       habille la page active de la pagination et les boutons `primary` (état vide). */
    .sdl-slidia .shadow-primary       { box-shadow: 0 4px 14px 0 rgba(var(--sd-accent-rgb), .25) !important; }
    .sdl-slidia .shadow-primary:hover { box-shadow: 0 7px 19px 0 rgba(var(--sd-accent-rgb), .47) !important; }
</style>

{# Recoloration en ambre : les composants partagés (onglets, pagination, boutons, états
   vides) sont écrits sur les variables de thème, jamais sur une couleur en dur. On les
   surcharge donc sur CE conteneur — motif repris de templates/scormia/index.html.twig,
   qui les pose sur ses propres conteneurs d'onglets et de pagination. Slidia les pose à
   la racine parce que la modale de bibliothèque (plus bas) en dépend aussi.
   La classe `sdl-slidia` n'a pas d'autre rôle que d'ancrer les règles du <style> ci-dessus. #}
{# L'outlet relie le bouton « Mes masques » de l'en-tête — qui vit HORS de la modale, donc
   hors de l'élément de `slidia--template-library` — au contrôleur de la modale : Stimulus
   n'achemine une `data-action` que vers un contrôleur ancêtre. `openLibraryModal()` appelle
   donc `open()` sur l'outlet, plutôt que de dupliquer ici l'état de la modale. #}
<div data-controller="slidia--list"
     data-slidia--list-slidia--template-library-outlet="#slidia-template-library"
     class="sdl-slidia max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
     style="
         --color-primary: {{ sdColor.primary }};
         --color-primary-rgb: {{ sdRgb }};
         --color-primary-dark: {{ sdColor.secondary }};
         --color-primary-light: {{ sdColor.primary }};
         --color-primary-hover: {{ sdColor.secondary }};
         {# rgba(R, G, B, A) et non rgb(R, G, B / A) : hex_to_rgb rend des canaux séparés par
            des virgules, que la syntaxe à barre oblique n'accepte pas (déclaration invalide,
            silencieusement ignorée — c'était le cas de l'ancienne page). #}
         --color-primary-muted: rgba({{ sdRgb }}, 0.04);
         --color-primary-subtle: rgba({{ sdRgb }}, 0.12);
         --color-gradient-start: {{ sdColor.primary }};
         --color-gradient-middle: {{ sdColor.secondary }};
         --color-gradient-end: {{ sdColor.secondary }};
         --sd-accent-rgb: {{ sdRgb }};
     ">

    {# ══════════════════════════════════════════
       EN-TÊTE D'OUTIL
       ══════════════════════════════════════════ #}
    {% embed '_organisms/tool-header/tool-header.html.twig' with {
        icon: 'bubul-slidia',
        title: 'Slidia',
        description: 'Vos masques, votre charte, votre contenu — Slidia rédige la présentation à l\'intérieur de votre modèle PowerPoint.',
        color: sdColor,
        cost: { value: medianTokenCost, unit: 'présentation' },
        sdColor: sdColor,
        canCreate: canCreate,
        createTooltipHtml: createTooltipHtml
    } only %}
        {# Deux actions : la bibliothèque de masques (secondaire, ouvre la modale) et la
           création (principale). Le bloc `actions` est rendu sous `only` : tout ce qu'il
           utilise doit figurer dans le `with {}` ci-dessus. #}
        {% block actions %}
            {# Même habillage que « Créer une présentation » : dégradé de l'outil, texte blanc,
               mêmes métriques que `size: 'lg'` de l'atome bouton (h-10 sm:h-12, rounded-lg).
               Pas de pastille de comptage : le nombre de masques se lit dans la modale
               elle-même, et le répéter ici alourdissait le bouton pour rien. Le contrôleur de
               liste n'a donc plus rien à tenir à jour dans cet en-tête. #}
            <button type="button"
                    data-action="click->slidia--list#openLibraryModal"
                    class="inline-flex items-center justify-center gap-2 sm:gap-2.5 w-full sm:w-auto h-10 sm:h-12 px-5 sm:px-6 rounded-lg text-sm sm:text-base font-semibold text-white transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 cursor-pointer"
                    style="background: linear-gradient(135deg, {{ sdColor.primary }}, {{ sdColor.secondary }}); box-shadow: 0 4px 14px {{ sdColor.primary }}4D;">
                {% include '_atoms/icon/icon.html.twig' with { name: 'folder', size: 'md', color: 'white' } only %}
                <span>Mes masques</span>
            </button>

            <span class="inline-flex w-full sm:w-auto" {% if not canCreate %}data-tooltip-html="{{ createTooltipHtml|trim|e('html_attr') }}"{% endif %}>
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer une présentation',
                    variant: 'custom-gradient',
                    gradientFrom: sdColor.primary,
                    gradientTo: sdColor.secondary,
                    size: 'lg',
                    icon: 'plus',
                    iconSize: 'lg',
                    href: path('app_slidia_new'),
                    disabled: not canCreate,
                    radius: 'lg',
                    class: 'w-full sm:w-auto'
                } only %}
            </span>
        {% endblock %}
    {% endembed %}

    {% set noFiltersActive = search is empty and templateFilter is empty and not sharedOnly %}

    {% if presentations is empty and noFiltersActive %}
        {# Bibliothèque vraiment vide (aucun filtre actif) : état vide partagé, comme Moodia. #}
        <div class="mt-12">
            {% include '_molecules/empty-state/empty-state.html.twig' with {
                title: 'Créez votre première présentation',
                description: 'Importez un masque PowerPoint, décrivez votre sujet — Slidia rédige et met en forme les slides à votre charte.',
                icon: 'bubul-slidia',
                iconColor: 'primary',
                actionText: 'Créer une présentation',
                actionHref: path('app_slidia_new'),
                actionIcon: 'plus',
                actionDisabled: not canCreate,
                actionTooltip: 'Tokens insuffisants pour créer une présentation',
                size: 'lg',
                variant: 'card'
            } only %}
        </div>
    {% else %}
        {# Paramètres de requête à propager d'un contrôle à l'autre : sans eux, un clic
           perdrait la recherche ou le filtre en cours. Le MASQUE et le PARTAGE sont
           ORTHOGONAUX — chaque contrôle ne réécrit QUE sa propre dimension et reconduit
           l'autre, exactement comme templates/scormia/index.html.twig. C'est ce qui permet
           de demander « les présentations d'un masque donné, partagées ».
           `page` n'est jamais propagée par un changement de filtre : on repart de la
           première page. #}
        {% set qp          = search is not empty ? {'q': search} : {} %}
        {% set sharedParam = sharedOnly ? {'shared': '1'} : {} %}
        {% set tplParam    = templateFilter ? {'template': templateFilter} : {} %}

        {# Libellé du bouton « Masque ». Le repli sur « Masques » couvre un ?template=
           syntaxiquement valide mais inconnu (masque d'un autre compte, masque supprimé) :
           SlidiaController::index() ne rejette que les valeurs mal formées. #}
        {% set activeTemplate = templates|filter(t => t.id == templateFilter)|first %}
        {% set masqueLabel = activeTemplate ? activeTemplate.name : 'Masques' %}

        {# shared--library-search est porté par CE conteneur, et non par la racine : le
           contrôleur doit seulement être un ancêtre du champ, et la racine reste ainsi
           identifiée par le seul `slidia--list` (contrat de AuthenticatedPagesTest). #}
        <div data-controller="shared--library-search">
        {% embed '_organisms/tool-toolbar/tool-toolbar.html.twig' with {
            search: {
                id: 'slidia-search',
                placeholder: 'Rechercher une présentation…',
                value: search,
                action: 'input->shared--library-search#search'
            },
            sharedOnly: sharedOnly,
            sharedCount: sharedCount,
            templates: templates,
            templateFilter: templateFilter,
            masqueLabel: masqueLabel,
            qp: qp,
            sharedParam: sharedParam,
            tplParam: tplParam
        } only %}
            {# `leading` porte DEUX contrôles (onglets de partage + filtre de masque) : le
               bloc doit donc réinclure lui-même filter-tabs, que le rendu par défaut de la
               barre aurait posé seul. Cf. rapport de tâche : candidat à un emplacement
               dédié dans tool-toolbar si Moodia et Scormia ont le même besoin. #}
            {% block leading %}
                {# `sm:items-stretch` (et non `items-center`) : c'est lui qui permet au bouton
                   « Masques » de prendre EXACTEMENT la hauteur de la pilule « Partagées » via
                   `h-full`, quel que soit le rembourrage interne de la molécule filter-tabs
                   — même geste que la recherche de Scormia. Avec `items-center`, `h-full`
                   n'aurait aucune hauteur de référence et le bouton retomberait sur son
                   contenu. #}
                <div class="flex flex-col sm:flex-row sm:items-stretch gap-3 shrink-0">
                    {# Filtre par masque : menu déroulant de LIENS (le filtrage est serveur).
                       Stimulus n'en pilote plus que l'ouverture. Il reconduit le partage
                       courant (`sharedParam`) au lieu de l'écraser : les deux dimensions
                       sont indépendantes. #}
                    {% if templates is not empty %}
                        {% set optBase = 'flex items-center gap-2.5 py-2 px-3.5 mx-1.5 rounded-md text-sm transition-colors duration-150 hover:bg-primary/[0.07]' %}
                        {# Le déclencheur est posé dans le MÊME rail que la molécule
                           `filter-tabs` qui le jouxte — même fond, même bordure, même ombre,
                           même rembourrage — et la pilule intérieure reprend ses métriques
                           (`px-4 py-2.5`, `text-sm`, `rounded-full`). Sans ce rail, le bouton
                           était une pastille blanche d'une autre taille collée contre un
                           contrôle qui, lui, en avait un : deux voisins de même fonction qui
                           ne se ressemblaient pas. #}
                        <div class="filter-multiselect relative group/filter shrink-0 flex items-center p-1.5 bg-white rounded-2xl sm:rounded-full border border-black/[0.08] shadow-[0_2px_8px_rgba(0,0,0,0.04)]"
                             data-slidia--list-target="masqueFilterDropdown">
                            <button type="button"
                                    data-action="click->slidia--list#toggleMasqueDropdown"
                                    class="flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-medium cursor-pointer whitespace-nowrap transition-all duration-200 {{ templateFilter ? 'bg-primary/[0.06] text-primary' : 'text-gray-700 hover:bg-gray-50' }}">
                                <span class="shrink-0 {{ templateFilter ? 'text-primary' : 'text-gray-400' }}">
                                    {% include '_atoms/icon/icon.html.twig' with {name: 'presentation-graph', size: 'xs', color: 'current'} only %}
                                </span>
                                <span>{{ masqueLabel }}</span>
                                <svg class="text-gray-400 shrink-0 transition-transform duration-200 group-[.filter-multiselect--open]/filter:rotate-180" width="12" height="12" viewBox="0 0 24 24" fill="none">
                                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="currentColor"/>
                                </svg>
                            </button>
                            <div class="hidden group-[.filter-multiselect--open]/filter:block absolute top-[calc(100%+8px)] left-0 min-w-[220px] bg-white border-[1.5px] border-gray-200 rounded-xl shadow-lg z-50 py-1.5 max-h-[280px] overflow-y-auto">
                                <a href="{{ path('app_slidia', qp|merge(sharedParam)) }}"
                                   class="{{ optBase }} {{ templateFilter ? 'text-gray-700' : 'text-primary font-semibold bg-primary/[0.06]' }}">Tous les masques</a>
                                <div class="h-px bg-gray-100 mx-3.5 my-1.5"></div>
                                {% for tpl in templates %}
                                    <a href="{{ path('app_slidia', qp|merge(sharedParam)|merge({template: tpl.id})) }}"
                                       class="{{ optBase }} {{ templateFilter == tpl.id ? 'text-primary font-semibold bg-primary/[0.06]' : 'text-gray-700' }}">{{ tpl.name }}</a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {# Contrôle « Partagées » — MÊME molécule, MÊME accroche et MÊME
                       fonctionnement que templates/scormia/index.html.twig : un INTERRUPTEUR
                       à deux états, dans son propre groupe, et non un onglet parmi d'autres.
                       Cliquer dessus quand il est actif le désactive (le lien retire alors
                       `shared` au lieu de l'ajouter).

                       Il remplace les trois onglets Toutes / Partagées / Non partagées.
                       « Non partagées » exigeait de distinguer le SENS de la restriction
                       (`data-share-filter-mode`) en plus de sa présence, faute de quoi une
                       carte fraîchement partagée restait affichée dans une grille censée
                       n'en contenir aucune. Avec un interrupteur, `data-share-filter === '1'`
                       redit à lui seul toute la restriction — c'est la lecture de Scormia,
                       désormais valable ici aussi.

                       `active` vaut '' et non null quand le filtre est inactif : la molécule
                       remplace un `active` null par l'id du PREMIER filtre, et le contrôle
                       s'afficherait actif en permanence. #}
                    <div class="sdl-tabs shrink-0">
                        {% include '_molecules/filter-tabs/filter-tabs.html.twig' with {
                            filters: [
                                {
                                    id: 'shared',
                                    label: 'Partagées',
                                    icon: 'share',
                                    count: sharedCount,
                                    href: path('app_slidia', qp|merge(tplParam)|merge(sharedOnly ? {} : {'shared': '1'})),
                                    attr: {
                                        'data-share-filter': sharedOnly ? '1' : '0',
                                        'title': sharedOnly ? 'Retirer le filtre « Partagées »' : 'N\'afficher que les présentations partagées'
                                    }
                                }
                            ],
                            active: sharedOnly ? 'shared' : '',
                            name: 'shareState'
                        } only %}
                    </div>
                </div>
            {% endblock %}
        {% endembed %}
        </div>

        {# Pas de compteur « N présentations » au-dessus de la grille : Scormia n'en a pas,
           et le contrôle « Partagées » porte déjà son propre chiffre. `total` reste calculé
           par le contrôleur — c'est lui qui borne la pagination — mais il n'est plus affiché.
           Les tests fonctionnels qui vérifiaient l'effet des filtres sur ce nombre comptent
           désormais les CARTES rendues, ce qui est de toute façon la mesure la plus sûre :
           un compteur juste au-dessus d'une grille fausse ne prouvait rien. #}
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-8 mb-10">
            {% for p in presentations %}
                {% include 'slidia/_presentation_card.html.twig' with {
                    presentation: p,
                    slideCount: p.slidesData|length,
                    sdColor: sdColor
                } only %}
            {% endfor %}
        </div>

        {# Aucun résultat (recherche, masque ou onglet vide) — rendu côté serveur, et placé
           AVANT la pagination comme chez Moodia et Scormia. #}
        {% if presentations is empty %}
            {# Les deux filtres se COMBINANT, le message se combine aussi (même geste que
               Scormia) : sous « Partagées », dire « aucune présentation ne correspond à votre
               recherche » serait faux dès qu'il en existe qui correspondent sans être
               partagées — l'utilisateur chercherait la mauvaise cause. #}
            <p class="text-center text-gray-400 py-12 mb-10">
                {% if search is not empty %}
                    Aucune présentation {{ sharedOnly ? 'partagée ' : '' }}ne correspond à votre recherche.
                {% elseif sharedOnly %}
                    Aucune présentation partagée{{ templateFilter ? ' pour ce masque' : '' }} pour le moment.
                {% else %}
                    Aucune présentation pour ce masque.
                {% endif %}
            </p>
        {% endif %}

        {# Pagination serveur — la molécule porte déjà son propre garde `totalPages > 1`. #}
        {# baseUrl : les DEUX filtres doivent voyager avec la page. Sans `shared`, la page 2
           retomberait sur une liste simplement filtrée par masque — et la pagination,
           calculée sur l'intersection, pointerait à côté. #}
        {% include '_molecules/pagination/pagination.html.twig' with {
            currentPage: currentPage,
            totalPages: totalPages,
            baseUrl: path('app_slidia', qp|merge(tplParam)|merge(sharedParam)),
            variant: 'moodia'
        } only %}
    {% endif %}

{# ══════════════════════════════════════════
   MENU CONTEXTUEL PARTAGÉ
   ══════════════════════════════════════════ #}
<div class="sd-menu z-[9999] fixed" style="display:none;">
    {# 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 {
        items: [
            {label: 'Partager',  icon: 'share',  attr: {'data-action': 'click->slidia--list#openShareModal'}},
            {label: 'Renommer',  icon: 'edit',   attr: {'data-action': 'click->slidia--list#openRenameModal'}},
            {label: 'Dupliquer', icon: 'copy',   attr: {'data-action': 'click->slidia--list#duplicatePresentation'}},
        ],
        dangerItems: [
            {label: 'Supprimer', icon: 'trash', attr: {'data-action': 'click->slidia--list#openDeleteModal'}}
        ],
        accentHex: tool_color_details['slidia'].primary
    } only %}
</div>

{# ══════════════════════════════════════════
   MODALE RENOMMER
   ══════════════════════════════════════════ #}
{% embed '_organisms/rename-modal/rename-modal.html.twig' with {
    title:        'Renommer la présentation',
    subtitle:     'Donnez un nom plus parlant à votre présentation.',
    placeholder:  'Nom de la présentation',
    color:        sdColor,
    modalAttr:    {'data-slidia--list-target': 'renameModal'},
    inputAttr:    {
        'data-slidia--list-target': 'renameInput',
        'data-action': 'keydown.enter->slidia--list#confirmRename keydown.escape->slidia--list#closeRenameModal'
    },
    cancelAttr:   {'data-action': 'click->slidia--list#closeRenameModal'},
    confirmAttr:  {'data-action': 'click->slidia--list#confirmRename'}
} only %}{% endembed %}

{# ══════════════════════════════════════════
   MODALE SUPPRIMER
   ══════════════════════════════════════════ #}
{% embed '_organisms/delete-modal/delete-modal.html.twig' with {
    title:       'Supprimer cette présentation ?',
    modalAttr:   {'data-slidia--list-target': 'deleteModal', 'data-action': 'keydown.esc@window->slidia--list#closeDeleteModal'},
    cancelAttr:  {'data-action': 'click->slidia--list#closeDeleteModal'},
    confirmAttr: {'data-action': 'click->slidia--list#confirmDelete'}
} only %}
    {% block description %}
        <p class="text-sm text-gray-500">
            <strong class="text-gray-900 font-semibold" data-slidia--list-target="deleteModalTitle"></strong>
            sera retiré définitivement de votre espace.
        </p>
    {% endblock %}
{% endembed %}

{# ══════════════════════════════════════════
   MODALE BIBLIOTHÈQUE DE MASQUES
   ══════════════════════════════════════════
   Markup et JavaScript extraits dans templates/slidia/_library_modal.html.twig et
   assets/controllers/slidia/template_library_controller.js. L'inclusion reste DANS ce
   conteneur : la modale s'habille des variables CSS de thème posées en style en ligne
   plus haut. #}
{% include 'slidia/_library_modal.html.twig' with {
    sdColor: sdColor,
    templates: templates,
    templatesJson: templatesJson,
    canCreate: canCreate,
    createTooltipHtml: createTooltipHtml,
    lastUsedTemplateId: lastUsedTemplateId
} only %}

{# ══════════════════════════════════════════
   MODALE PARTAGE PUBLIC
   ══════════════════════════════════════════ #}
{% include '_molecules/share-link/share-link-modal.html.twig' with {
    endpoint: path('app_slidia_share_update', {uuid: '__UUID__'})|replace({'__UUID__': '{uuid}'}),
    accentHex: tool_color_details['slidia'].primary
} only %}

</div>{# /data-controller #}


{% endblock %}