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

{% block title %}Mes prompts — Promptly{% endblock %}

{% block body %}

{% set ptColor = tool_color_details['promptly'] %}
{% set isRootView    = currentFolder is null %}
{% set folderParam   = currentFolder ? (currentFolder.id ~ '') : '' %}
{% set foldersToShow = isRootView ? rootFolders : subfolders %}
{% set hasFolders    = foldersToShow is not empty %}
{% set hasPrompts    = prompts is not empty %}

<div class="max-w-7xl mx-auto"
     data-controller="promptly--library promptly--mes-prompts"
     data-promptly--library-create-url-value="{{ path('app_promptly_create') }}"
     data-promptly--library-base-url-value="{{ path('app_promptly') }}"
     data-promptly--library-serenia-url-value="{{ path('app_seren_ia') }}"
     data-promptly--library-improve-url-value="{{ path('app_promptly_improve') }}"
     data-promptly--library-improve-min-tokens-value="{{ improveMinTokens|default(1000) }}"
     data-promptly--mes-prompts-create-folder-url-value="{{ path('app_promptly_folder_create') }}"
     data-promptly--mes-prompts-my-prompts-url-value="{{ path('app_promptly_my_prompts') }}"
     data-promptly--mes-prompts-current-folder-param-value="{{ folderParam }}">

    {# ================================================================
       HEADER — fil d'ariane + CTAs
       ================================================================ #}
    <div class="flex items-center justify-between gap-3 mb-4 sm:mb-6 shrink-0">

        <nav class="flex items-center gap-1 min-w-0 flex-1" aria-label="Fil d'Ariane">
            {% if isRootView %}
                <span class="px-2 sm:px-3 py-1.5 text-xl sm:text-[28px] font-semibold text-gray-800 tracking-tight">Mes prompts</span>
            {% else %}
                {% set hasManyAncestors = breadcrumb|length > 2 %}
                {% set visibleAncestors = hasManyAncestors ? breadcrumb|slice(-2) : breadcrumb %}

                <a href="{{ path('app_promptly_my_prompts') }}"
                   draggable="false"
                   class="px-2 sm:px-3 py-1.5 rounded-xl text-base sm:text-[28px] font-medium text-gray-400
                          hover:text-gray-800 hover:bg-white hover:shadow-sm transition-all duration-150 shrink-0 truncate max-w-[100px] sm:max-w-[220px]"
                   data-drop-folder-id="0">{{ hasManyAncestors ? '···' : 'Mes prompts' }}</a>

                {% for ancestor in visibleAncestors %}
                    <span class="text-gray-300 text-lg sm:text-2xl font-light shrink-0 select-none mx-0.5 sm:mx-1 leading-none">›</span>
                    <a href="{{ path('app_promptly_my_prompts', { folder: ancestor.id }) }}"
                       draggable="false"
                       class="px-2 sm:px-3 py-1.5 rounded-xl text-base sm:text-[28px] font-medium text-gray-400
                              hover:text-gray-800 hover:bg-white hover:shadow-sm truncate max-w-[100px] sm:max-w-[220px]
                              transition-all duration-150"
                       data-drop-folder-id="{{ ancestor.id }}">{{ ancestor.name }}</a>
                {% endfor %}

                <span class="text-gray-300 text-lg sm:text-2xl font-light shrink-0 select-none mx-0.5 sm:mx-1 leading-none">›</span>
                <span class="px-2 sm:px-3 py-1.5 rounded-xl text-base sm:text-[28px] font-semibold text-gray-800 truncate max-w-[120px] sm:max-w-[320px] tracking-tight">
                    {{ currentFolder.name }}
                </span>
            {% endif %}
        </nav>

        <div class="flex items-center gap-2 shrink-0">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Nouveau dossier',
                outlineHex: ptColor.primary,
                size: 'md',
                icon: 'folder',
                mobileIconOnly: true,
                mobileBreakpoint: 'sm',
                type: 'button',
                attr: {
                    'data-action': 'click->promptly--mes-prompts#createFolder',
                    'data-parent-id': not isRootView ? (currentFolder.id ~ '') : ''
                }
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Nouveau prompt',
                variant: 'primary',
                size: 'md',
                icon: 'plus',
                gradientFrom: ptColor.primary,
                gradientTo: ptColor.secondary,
                mobileIconOnly: true,
                mobileBreakpoint: 'sm',
                href: path('app_promptly_create_page')
            } only %}
        </div>
    </div>

    {# ================================================================
       LISTE UNIFIÉE (dossiers en haut, prompts en dessous)
       ================================================================ #}
    <div data-promptly--library-target="homeView">

    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col overflow-hidden h-[calc(100vh-9rem)] sm:h-[calc(100vh-11rem)] lg:h-[calc(100vh-15rem)]"
         data-promptly--mes-prompts-target="listContainer">

        {# En-tête de colonnes — toujours visible #}
        <div class="flex items-center gap-3 sm:gap-4 px-3 sm:px-5 py-2 sm:py-2.5 bg-gray-50/70 border-b border-gray-100 rounded-t-2xl shrink-0">
            <div class="w-7 sm:w-8 shrink-0"></div>
            <span class="flex-1 text-[10px] sm:text-[11px] font-bold text-gray-400 uppercase tracking-widest">Nom</span>
            <span class="w-32 text-[11px] font-bold text-gray-400 uppercase tracking-widest shrink-0 hidden xl:block">Catégorie</span>
            <span class="w-20 text-[11px] font-bold text-gray-400 uppercase tracking-widest shrink-0 hidden xl:block">Favoris</span>
            <span class="w-20 text-[11px] font-bold text-gray-400 uppercase tracking-widest shrink-0 hidden xl:block">Utilisations</span>
            <span class="w-28 text-right text-[11px] font-bold text-gray-400 uppercase tracking-widest hidden md:block">Modifié</span>
            <div class="w-8 sm:w-10 shrink-0"></div>
        </div>

        {# État vide — cible JS (affiché si le dernier élément est glissé hors de la liste) #}
        <div {% if hasFolders or hasPrompts %}style="display:none;"{% endif %}
             data-promptly--mes-prompts-target="emptyState"
             class="flex-1 flex flex-col items-center justify-center gap-3 py-16">
            <div class="w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center">
                <span class="inline-flex items-center justify-center text-gray-300">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'folder', size: 'xl', color: 'current' } only %}
                </span>
            </div>
            <div class="text-center">
                <p class="text-[14px] font-medium text-gray-400">Ce dossier est vide</p>
                <p class="text-[12px] text-gray-300 mt-0.5">Créez un prompt ou un dossier pour commencer</p>
            </div>
        </div>

        {% if hasFolders or hasPrompts %}
        <div class="flex-1 min-h-0 overflow-y-auto"
             data-promptly--mes-prompts-target="rowsWrapper">

            {# Dossiers (toujours en premier) #}
            {% for folder in foldersToShow %}
                {% include 'promptly/_folder_card.html.twig' with {
                    folder: folder,
                    promptCount: folderPromptCounts[folder.id] ?? 0,
                    isLast: (loop.last and not hasPrompts)
                } only %}
            {% endfor %}

            {# Séparateur dossiers / prompts #}
            {% if hasFolders and hasPrompts %}
                <div class="mx-5 border-t border-dashed border-gray-200"></div>
            {% endif %}

            {# Prompts #}
            {% for prompt in prompts %}
                {% set category  = prompt.categoryData %}
                {% set cardColor = category ? category.colorHex : '#6366F1' %}
                {% set cardIcon  = category ? category.icon : 'magic-stick' %}
                {% set lastDate  = prompt.updatedAt ?? prompt.createdAt %}

                {# Date relative #}
                {% set nowTs   = 'now'|date('U') %}
                {% set thenTs  = lastDate|date('U') %}
                {% set diffSec = nowTs - thenTs %}
                {% if diffSec < 3600 %}
                    {% set relDate = 'À l\'instant' %}
                {% elseif diffSec < 7200 %}
                    {% set relDate = 'Il y a 1 h' %}
                {% elseif diffSec < 86400 %}
                    {% set relDate = 'Il y a ' ~ (diffSec / 3600)|round ~ ' h' %}
                {% elseif diffSec < 172800 %}
                    {% set relDate = 'Hier' %}
                {% elseif diffSec < 604800 %}
                    {% set relDate = 'Il y a ' ~ (diffSec / 86400)|round ~ ' j' %}
                {% elseif diffSec < 2592000 %}
                    {% set relDate = 'Il y a ' ~ (diffSec / 604800)|round ~ ' sem.' %}
                {% else %}
                    {% set relDate = lastDate|date('d/m/y') %}
                {% endif %}

                <div class="group relative flex items-center gap-3 sm:gap-4 px-3 sm:px-5 py-2.5 sm:py-3 hover:bg-gray-50/60
                            {{ not loop.last ? 'border-b border-gray-100' : 'rounded-b-2xl' }}
                            cursor-grab active:cursor-grabbing transition-colors duration-100"
                     draggable="true"
                     data-action="dragstart->promptly--mes-prompts#dragStart dragend->promptly--mes-prompts#dragEnd"
                     data-prompt-id="{{ prompt.id }}"
                     data-title="{{ prompt.title|e('html_attr') }}"
                     data-description="{{ prompt.description|e('html_attr') }}"
                     data-body="{{ prompt.body|e('html_attr') }}"
                     data-tags="{{ prompt.tags|join(',')|e('html_attr') }}"
                     data-visibility="{{ prompt.visibility }}"
                     data-is-draft="{{ prompt.isDraft ? 'true' : 'false' }}"
                     data-favorites="{{ favoriteCounts[prompt.id] ?? 0 }}"
                     data-favorited="false"
                     data-is-owner="true"
                     data-category-slug="{{ prompt.categorySlug ?: '' }}"
                     data-ai-model="{{ prompt.aiModel ?? '' }}"
                     data-author="{{ prompt.author.firstName ?? '' }} {{ prompt.author.lastName ?? '' }}"
                     data-author-initials="{{ (prompt.author.firstName ?? '?')|slice(0,1)|upper }}"
                     data-author-color="#0C81E4"
                     data-created-at="{{ prompt.createdAt|date('d/m/Y') }}">

                    {# Icône catégorie #}
                    <div class="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center"
                         style="background: {{ cardColor }}20;">
                        <span class="inline-flex items-center justify-center" style="color: {{ cardColor }};">
                            {% include '_atoms/icon/icon.html.twig' with { name: cardIcon, size: 'sm', color: 'current' } only %}
                        </span>
                    </div>

                    {# Titre + description + badges #}
                    <a href="{{ path('app_promptly_show', { id: prompt.id, from: 'mes-prompts', folder: currentFolder ? currentFolder.id : null }) }}"
                       draggable="false"
                       class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="text-[14px] font-medium text-gray-900 truncate">{{ prompt.title }}</span>

                            {% if prompt.isDraft %}
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Brouillon', variant: 'warning', size: 'xs' } only %}
                            {% elseif prompt.visibility == 'public' %}
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Public', variant: 'primary', size: 'xs' } only %}
                            {% else %}
                                <span class="inline-flex items-center gap-1 text-[11px] text-gray-400 font-medium">
                                    <span class="inline-flex items-center justify-center">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'lock', size: 'xs', color: 'current' } only %}
                                    </span>
                                    Privé
                                </span>
                            {% endif %}

                        </div>
                        <p class="text-[12px] text-gray-400 truncate mt-0.5">
                            {{ prompt.description ?: prompt.cleanPreview(80) }}
                        </p>
                    </a>

                    {# Catégorie #}
                    <div class="w-32 shrink-0 hidden xl:block">
                        {% if category %}
                            <span class="inline-flex items-center gap-1.5 text-[12px] font-medium truncate max-w-full"
                                  style="color: {{ cardColor }};">
                                <span class="w-2 h-2 rounded-full shrink-0" style="background: {{ cardColor }};"></span>
                                {{ category.name }}
                            </span>
                        {% else %}
                            <span class="text-[12px] text-gray-300">—</span>
                        {% endif %}
                    </div>

                    {# Favoris #}
                    <div class="w-20 shrink-0 hidden xl:block">
                        <span class="inline-flex items-center gap-1.5 text-[12px] text-gray-400 tabular-nums">
                            <span class="text-rose-400">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'xs', color: 'current' } only %}
                            </span>
                            {{ favoriteCounts[prompt.id] ?? 0 }}
                        </span>
                    </div>

                    {# Utilisations #}
                    <div class="w-20 shrink-0 hidden xl:block">
                        <span class="inline-flex items-center gap-1.5 text-[12px] text-gray-400 tabular-nums">
                            <span class="text-gray-400">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'chart', size: 'xs', color: 'current' } only %}
                            </span>
                            {{ prompt.usesCount }}
                        </span>
                    </div>

                    {# Date modifiée #}
                    <span class="w-28 text-right text-[12px] text-gray-400 shrink-0 hidden md:block tabular-nums">
                        {{ relDate }}
                    </span>

                    {# ⋮ Actions #}
                    <div class="w-10 shrink-0 flex items-center justify-end">
                        {% include '_molecules/action-menu/action-menu.html.twig' with {
                            withTrigger: true,
                            position: 'right-0 top-full mt-1',
                            items: [
                                {label: 'Ouvrir',          icon: 'arrow-right', href: path('app_promptly_show', { id: prompt.id, from: 'mes-prompts', folder: currentFolder ? currentFolder.id : null })},
                                {label: 'Éditer le prompt', icon: 'edit',        href: path('app_promptly_edit_page', { id: prompt.id })},
                                {label: 'Déplacer',        icon: 'folder',      attr: {'data-action': 'click->promptly--mes-prompts#openMovePrompt', 'data-prompt-id': prompt.id}}
                            ],
                            dangerItems: [
                                {label: 'Supprimer', icon: 'trash', attr: {'data-action': 'click->promptly--mes-prompts#openDeletePrompt', 'data-prompt-id': prompt.id, 'data-prompt-title': prompt.title}}
                            ],
                            accentHex: tool_color_details['promptly'].primary
                        } only %}
                    </div>
                </div>
            {% endfor %}

        </div>{# /scrollable rows #}
        {% endif %}

    </div>{# /listContainer #}

    </div>{# /homeView #}

    {# ── Cibles Stimulus compatibilité promptly--library ── #}
    <div data-promptly--library-target="explorerView" style="display: none;">
        <div data-promptly--library-target="grid"></div>
    </div>
    <button type="button" data-promptly--library-target="viewHomeBtn" class="hidden"></button>
    <button type="button" data-promptly--library-target="viewExploreBtn" class="hidden"></button>
    <span data-promptly--library-target="statTotalCount" style="display:none;"></span>
    <span data-promptly--library-target="statTotalLabel" style="display:none;"></span>
    <div data-promptly--library-target="statFavWrapper" style="display:none;">
        <span data-promptly--library-target="statFavCount"></span>
        <span data-promptly--library-target="statFavLabel"></span>
    </div>
    <span data-promptly--library-target="tabCountAll" style="display:none;"></span>
    <span data-promptly--library-target="tabCountFavorites" style="display:none;"></span>
    <span data-promptly--library-target="tabCountMine" style="display:none;"></span>
    <input type="text" data-promptly--library-target="searchInput" style="display:none;" aria-hidden="true">

    {# MODALS BIBLIOTHÈQUE #}
    {% include 'promptly/_modals.html.twig' with {
        categories: categories,
        aiModels: aiModels
    } only %}

    {# MODAL CRÉER UN DOSSIER #}
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
         data-promptly--mes-prompts-target="createModal"
         data-action="click->promptly--mes-prompts#closeModal"
         style="display: none;">
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 w-full max-w-sm p-6 flex flex-col gap-5"
             data-action="click->promptly--mes-prompts#stopPropagation">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center"
                     style="background: {{ ptColor.primary }}14; border: 1px solid {{ ptColor.primary }}30;">
                    <span class="inline-flex items-center justify-center" style="color: {{ ptColor.primary }};">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'folder', size: 'md', color: 'current' } only %}
                    </span>
                </div>
                <h3 class="text-base font-bold text-gray-900 font-secondary">Nouveau dossier</h3>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Nom du dossier</label>
                <input type="text"
                       placeholder="Ex : Rédaction, Marketing, Dev…"
                       maxlength="100"
                       class="h-10 px-3.5 text-sm bg-gray-50 border border-gray-100 rounded-xl
                              focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                              placeholder:text-gray-300 transition-all"
                       data-promptly--mes-prompts-target="folderNameInput"
                       data-action="keydown->promptly--mes-prompts#onCreateKeydown">
            </div>
            <div class="flex gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler', variant: 'ghost', size: 'md', width: 'full', type: 'button',
                    attr: { 'data-action': 'click->promptly--mes-prompts#closeModal' }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer', gradientFrom: ptColor.primary, gradientTo: ptColor.secondary,
                    size: 'md', width: 'full', icon: 'folder', type: 'button',
                    attr: { 'data-action': 'click->promptly--mes-prompts#submitCreate' }
                } only %}
            </div>
        </div>
    </div>

    {# MODAL RENOMMER UN DOSSIER #}
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
         data-promptly--mes-prompts-target="renameModal"
         data-action="click->promptly--mes-prompts#closeModal"
         style="display: none;">
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 w-full max-w-sm p-6 flex flex-col gap-5"
             data-action="click->promptly--mes-prompts#stopPropagation">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center"
                     style="background: {{ ptColor.primary }}14; border: 1px solid {{ ptColor.primary }}30;">
                    <span class="inline-flex items-center justify-center" style="color: {{ ptColor.primary }};">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'md', color: 'current' } only %}
                    </span>
                </div>
                <h3 class="text-base font-bold text-gray-900 font-secondary">Renommer le dossier</h3>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Nouveau nom</label>
                <input type="text"
                       maxlength="100"
                       class="h-10 px-3.5 text-sm bg-gray-50 border border-gray-100 rounded-xl
                              focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-white
                              placeholder:text-gray-300 transition-all"
                       data-promptly--mes-prompts-target="renameFolderNameInput"
                       data-action="keydown->promptly--mes-prompts#onRenameKeydown">
                <input type="hidden" data-promptly--mes-prompts-target="activeFolderId">
            </div>
            <div class="flex gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler', variant: 'ghost', size: 'md', width: 'full', type: 'button',
                    attr: { 'data-action': 'click->promptly--mes-prompts#closeModal' }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Renommer', gradientFrom: ptColor.primary, gradientTo: ptColor.secondary,
                    size: 'md', width: 'full', icon: 'check', type: 'button',
                    attr: { 'data-action': 'click->promptly--mes-prompts#submitRename' }
                } only %}
            </div>
        </div>
    </div>

    {# MODAL SUPPRIMER UN DOSSIER #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        modalAttr:   {'data-promptly--mes-prompts-target': 'deleteModal'},
        cancelAttr:  {'data-action': 'click->promptly--mes-prompts#closeModal'},
        confirmAttr: {'data-action': 'click->promptly--mes-prompts#confirmDelete'}
    } only %}
        {% block titleBlock %}
            <h3 class="text-xl font-bold text-gray-900 mb-1.5">
                Supprimer « <span data-promptly--mes-prompts-target="deleteFolderLabel"></span> » ?
            </h3>
        {% endblock %}
        {% block description %}
            <p class="text-sm text-gray-400">Cette action est irréversible. Tous les prompts et sous-dossiers seront supprimés.</p>
        {% endblock %}
    {% endembed %}

    {# MODAL DÉPLACER UN PROMPT #}
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
         data-promptly--mes-prompts-target="moveModal"
         data-action="click->promptly--mes-prompts#closeModal"
         style="display: none;">
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 w-full max-w-sm p-6 flex flex-col gap-5"
             data-action="click->promptly--mes-prompts#stopPropagation">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center"
                     style="background: {{ ptColor.primary }}14; border: 1px solid {{ ptColor.primary }}30;">
                    <span class="inline-flex items-center justify-center" style="color: {{ ptColor.primary }};">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'folder', size: 'md', color: 'current' } only %}
                    </span>
                </div>
                <h3 class="text-base font-bold text-gray-900 font-secondary">Déplacer le prompt</h3>
            </div>
            <input type="hidden" data-promptly--mes-prompts-target="activePromptId">

            <div class="flex flex-col gap-1 max-h-64 overflow-y-auto">
                <label class="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer
                              hover:bg-gray-50 transition-colors duration-100 has-[:checked]:bg-primary/5">
                    <input type="radio" name="move-folder" value="0"
                           class="w-4 h-4 text-primary focus:ring-primary/20">
                    <span class="inline-flex items-center justify-center text-gray-400">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'home', size: 'sm', color: 'current' } only %}
                    </span>
                    <span class="text-sm font-medium text-gray-700">Aucun dossier (racine)</span>
                </label>

                {% for folder in allFolders %}
                    {% set depth = 0 %}
                    {% set ancestor = folder.parent %}
                    {% for i in 1..10 %}
                        {% if ancestor is not null %}
                            {% set depth = depth + 1 %}
                            {% set ancestor = ancestor.parent %}
                        {% endif %}
                    {% endfor %}
                    <label class="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer
                                  hover:bg-gray-50 transition-colors duration-100 has-[:checked]:bg-primary/5"
                           style="padding-left: {{ (depth * 16) + 12 }}px;">
                        <input type="radio" name="move-folder" value="{{ folder.id }}"
                               class="w-4 h-4 text-primary focus:ring-primary/20">
                        <span class="inline-flex items-center justify-center text-amber-400">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'folder', size: 'sm', color: 'current' } only %}
                        </span>
                        <span class="text-sm font-medium text-gray-700">{{ folder.name }}</span>
                    </label>
                {% else %}
                    <p class="text-sm text-gray-400 text-center py-4">Aucun dossier créé.</p>
                {% endfor %}
            </div>

            <div class="flex gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler', variant: 'ghost', size: 'md', width: 'full', type: 'button',
                    attr: { 'data-action': 'click->promptly--mes-prompts#closeModal' }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Déplacer', gradientFrom: tool_color_details['promptly'].primary, gradientTo: tool_color_details['promptly'].secondary,
                    size: 'md', width: 'full', type: 'button',
                    attr: { 'data-action': 'click->promptly--mes-prompts#submitMovePrompt' }
                } only %}
            </div>
        </div>
    </div>

    {# MODAL SUPPRIMER UN PROMPT #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        modalAttr:   {'data-promptly--mes-prompts-target': 'deletePromptModal'},
        cancelAttr:  {'data-action': 'click->promptly--mes-prompts#closeModal'},
        confirmAttr: {'data-action': 'click->promptly--mes-prompts#confirmDeletePrompt'}
    } only %}
        {% block titleBlock %}
            <h3 class="text-xl font-bold text-gray-900 mb-1.5">
                Supprimer « <span data-promptly--mes-prompts-target="deletePromptLabel"></span> » ?
            </h3>
        {% endblock %}
        {% block description %}
            <p class="text-sm text-gray-400">Cette action est irréversible.</p>
        {% endblock %}
    {% endembed %}

</div>
{% endblock %}