{#
 # ============================================================================
 # PAGE: PIXIA — Générateur d'images IA
 # ============================================================================
 #
 # Interface unifiée : galerie masonry + drawer de création.
 # Structure : header sticky · galerie · drawer droit.
 #
 # DONNÉES REQUISES (depuis PixiaController::index)
 # | tokenStats | array  | {remaining, energyConsumptionWh} |
 # | images     | array  | Collection de PixiaImage         |
 # | totalItems | int    | Nombre total d'images            |
 # | hasMore    | bool   | Pagination infinie               |
 # | styles     | array  | {value: label}                   |
 # ============================================================================
 #}

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

{% set pxColor = tool_color_details['pixia'] ?? { primary: '#6366F1', secondary: '#4F46E5', bg: '#EEF2FF', border: '#C7D2FE' } %}
{% 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: pixiaMinTokens,
    currentPlanSlug: currentPlanSlug,
    upgradeUrl: path('app_upgrade')
} only %}{% endset %}

{% block title %}Pixia — Générateur d'images IA{% endblock %}

{% block main_class %}p-0 overflow-hidden bg-[#F5F5F5]{% endblock %}

{% block body %}
<style>
    /* Drawer slide-in */
    .px-drawer { transform: translateX(105%); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
    .px-drawer.open { transform: translateX(0); }

    /* Quality buttons */
    .px-quality-btn { transition: border-color 0.15s, background 0.15s; }
    .px-quality-btn[data-active="true"] {
        border-color: var(--px-primary);
        background: rgb(var(--px-primary-rgb) / 0.04);
    }
    .px-quality-btn[data-active="true"] .px-quality-label { color: var(--px-primary); }

    /* Icônes qualité — état inactif : gris neutre */
    .px-quality-icon { color: #CBD5E1; transition: color 0.15s; }
    /* Icônes qualité — état actif : couleur Pixia */
    .px-quality-btn[data-active="true"] .px-quality-icon { color: var(--px-primary); }
</style>

<div
    data-controller="pixia--generator"
    data-pixia--generator-tokens-remaining-value="{{ tokenStats.remaining }}"
    data-pixia--generator-offset-value="{{ images|length }}"
    data-pixia--generator-has-more-value="{{ hasMore ? 'true' : 'false' }}"
    data-pixia--generator-csrf-value="{{ csrf_token('improve-prompt-pixia') }}"
    style="
        --px-primary: {{ pxColor.primary }};
        --px-primary-rgb: {{ pxColor.primary|hex_to_rgb }};
        --px-secondary: {{ pxColor.secondary }};
        --px-bg: {{ pxColor.bg }};
        --px-border: {{ pxColor.border }};
    "
>

    {# ══════════════════════════════════════════
       EN-TÊTE DE PAGE
       ══════════════════════════════════════════ #}
    <header class="px-5 sm:px-8 py-4 bg-white border-b border-gray-200/70 flex items-center justify-between gap-4">

        {# Branding #}
        <div class="flex items-center gap-3.5 min-w-0">
            <div class="shrink-0 w-10 h-10 flex items-center justify-center rounded-2xl"
                 style="background: {{ pxColor.bg }};">
                {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-pixia', size: 'lg', colorPrimary: pxColor.primary, colorSecondary: pxColor.secondary } only %}
            </div>
            <div class="flex items-baseline gap-2.5 min-w-0">
                <h1 class="text-xl font-black font-secondary tracking-tight shrink-0 bg-clip-text text-transparent"
                    style="background-image: linear-gradient(to bottom right, {{ pxColor.primary }}, {{ pxColor.secondary }});">Pixia</h1>
                <span class="text-xs font-medium text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full shrink-0 tabular-nums">
                    {{ totalItems }} image{{ totalItems != 1 ? 's' : '' }}
                </span>
            </div>
        </div>

        {# Stats + action #}
        <div class="flex items-center gap-2.5 shrink-0">
            <div class="hidden sm:flex items-center gap-2">
                {# Tokens #}
                <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full"
                     style="background: {{ pxColor.bg }};">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'sm', colorPrimary: pxColor.primary, colorSecondary: pxColor.secondary } only %}
                    <span class="text-sm font-semibold tabular-nums" style="color: {{ pxColor.primary }};"
                          data-pixia--generator-target="tokensDisplay">{{ tokenStats.remaining|format_tokens }}</span>
                    <span class="text-xs" style="color: {{ pxColor.primary }};">tokens</span>
                </div>
                {# Énergie #}
                {% include '_molecules/mini-stat/mini-stat.html.twig' with {
                    value: tokenStats.energyConsumptionWh|format_energy,
                    icon: 'bolt',
                    variant: 'warning-muted',
                    size: 'sm'
                } only %}
            </div>

            {#- Plus d'infobulle « Passer en Pro » ici : ce bouton n'ouvre que le panneau, il ne
                génère rien. La barrière de tokens vit sur le bouton « Générer », au pied du
                panneau — c'est là qu'elle s'applique vraiment, et là qu'elle se comprend. -#}
            <span>
                {# `data-tour-step` sur ce bouton : le tutoriel a besoin de lui pour OUVRIR le
                   tiroir avant de désigner ce qu'il contient — sans quoi ses étapes visent des
                   éléments hors de l'écran. Voir docs/tours.md.

                   L'ancre est posée que la création soit autorisée ou non : elle identifie ce
                   bouton, elle n'accorde rien. Réservée au seul cas autorisé, elle disparaissait
                   pour un compte à court de tokens — et le tutoriel commentait alors un tiroir
                   qu'il n'avait aucun moyen d'ouvrir. #}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer',
                    size: 'md',
                    icon: 'plus',
                    gradientFrom: pxColor.primary,
                    gradientTo: pxColor.secondary,
                    attr: { 'data-action': 'click->pixia--generator#openDrawer', 'data-tour-step': 'pixia-ouvrir' }
                } only %}
            </span>
        </div>
    </header>

    {# ══════════════════════════════════════════
       GALERIE
       ══════════════════════════════════════════ #}
    <div class="px-5 sm:px-8 pt-6 pb-12">

        {# État vide #}
        <div data-pixia--generator-target="emptyState"
             {% if images is not empty %}style="display: none;"{% endif %}
             class="flex flex-col items-center justify-center py-20 text-center">
            <div class="shrink-0 w-16 h-16 flex items-center justify-center rounded-2xl border mb-5"
                 style="background: {{ pxColor.bg }}; border-color: {{ pxColor.border }};">
                {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-pixia', size: 'xl', colorPrimary: pxColor.primary, colorSecondary: pxColor.secondary } only %}
            </div>
            <h2 class="text-xl font-bold text-gray-900 mb-2">Votre galerie est vide</h2>
            <p class="text-sm text-gray-500 max-w-xs leading-relaxed mb-7">
                Décrivez une image et laissez Pixia la créer pour vous en quelques secondes.
            </p>
            {#- Plus d'infobulle « Passer en Pro » ici : ce bouton n'ouvre que le panneau, il ne
                génère rien. La barrière de tokens vit sur le bouton « Générer », au pied du
                panneau — c'est là qu'elle s'applique vraiment, et là qu'elle se comprend. -#}
            <span>
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Générer ma première image',
                    size: 'lg',
                    icon: 'magic-stick',
                    gradientFrom: pxColor.primary,
                    gradientTo: pxColor.secondary,
                    attr: { 'data-action': 'click->pixia--generator#openDrawer', 'data-tour-step': 'pixia-ouvrir' }
                } only %}
            </span>
        </div>

        {# Grille masonry #}
        <div data-pixia--generator-target="gallery"
             data-tour-step="pixia-galerie"
             class="columns-2 sm:columns-3 lg:columns-4 gap-5"
             {% if images is empty %}style="display: none;"{% endif %}>
            {% for image in images %}
                {% include 'pixia/_image_card.html.twig' with { image: image } only %}
            {% endfor %}
        </div>

        {# Sentinel scroll infini #}
        {% if hasMore %}
        <div data-pixia--generator-target="scrollSentinel"
             class="flex justify-center items-center py-8 mt-2">
            <div class="flex items-center gap-2 text-xs text-gray-400">
                <svg class="animate-spin w-4 h-4 px-spinner" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25"/>
                    <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
                </svg>
                Chargement…
            </div>
        </div>
        {% endif %}
    </div>

    {# ══════════════════════════════════════════
       BACKDROP DRAWER
       ══════════════════════════════════════════ #}
    <div class="fixed inset-0 z-40 hidden bg-black/40 backdrop-blur-sm"
         data-pixia--generator-target="drawerOverlay"
         data-action="click->pixia--generator#closeDrawer">
    </div>

    {# ══════════════════════════════════════════
       DRAWER — FORMULAIRE DE CRÉATION
       ══════════════════════════════════════════ #}
    <div class="px-drawer fixed inset-y-0 right-0 z-50 flex flex-col w-full sm:w-[480px] bg-white shadow-2xl border-l border-gray-200"
         data-pixia--generator-target="drawer">

        {# Header drawer #}
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 flex items-center justify-center rounded-xl"
                     style="background: rgba({{ pxColor.primary|hex_to_rgb }}, 0.08);">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-pixia', size: 'md', colorPrimary: pxColor.primary, colorSecondary: pxColor.secondary } only %}
                </div>
                <h2 class="text-sm font-semibold text-gray-900">Nouvelle image</h2>
            </div>
            <button type="button"
                    data-action="click->pixia--generator#closeDrawer"
                    class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors cursor-pointer border-none bg-transparent">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M18 6L6 18M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {# Corps scrollable #}
        <div class="flex-1 overflow-y-auto" data-pixia--generator-target="formWrapper">

            <form class="p-6 space-y-6">

                {# ── Étape 1 : Mode ── #}
                <div data-tour-step="pixia-mode">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-step-bubble flex-shrink-0">1</span>
                        <span class="text-sm font-semibold text-gray-800">Mode de création</span>
                    </div>
                    <div class="flex items-center gap-1 p-1 bg-gray-100 rounded-xl">
                        <button type="button"
                                class="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium rounded-lg transition-all"
                                data-mode="text"
                                data-active="true"
                                data-action="click->pixia--generator#switchMode"
                                data-pixia--generator-target="modeTab">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'xs', color: 'current' } only %}
                            Texte
                        </button>
                        <button type="button"
                                class="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium rounded-lg transition-all"
                                data-mode="pdf"
                                data-active="false"
                                data-action="click->pixia--generator#switchMode"
                                data-pixia--generator-target="modeTab">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'document', size: 'xs', color: 'current' } only %}
                            Depuis un PDF
                        </button>
                    </div>
                </div>

                <hr class="border-gray-100">

                {# ── Étape 2 : Contenu ── #}
                <div>
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            <span class="px-step-bubble flex-shrink-0">2</span>
                            <span class="text-sm font-semibold text-gray-800">Contenu</span>
                        </div>
                    </div>

                    {# Champ Titre (commun aux deux modes) #}
                    <div class="mb-3">
                        <label class="block text-xs text-gray-400 mb-1.5" for="px-title-input">Titre <span class="text-gray-300">(optionnel)</span></label>
                        <input type="text"
                               id="px-title-input"
                               maxlength="100"
                               data-pixia--generator-target="titleInput"
                               placeholder="Ex: Paysage montagneux au coucher de soleil…"
                               class="w-full px-3.5 py-2.5 text-sm text-gray-900 bg-gray-50 border-2 border-gray-200 rounded-xl transition-all placeholder:text-gray-400 focus:outline-none focus:bg-white"
                               onfocus="this.style.borderColor='var(--px-primary)'; this.style.boxShadow='0 0 0 3px rgb(var(--px-primary-rgb)/0.12)';"
                               onblur="this.style.borderColor=''; this.style.boxShadow='';">
                    </div>

                    {# Panel Texte #}
                    <div data-pixia--generator-target="textPanel">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs text-gray-400">Décrivez votre image</span>
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Améliorer',
                                variant: 'ghost',
                                size: 'sm',
                                icon: 'magic-stick',
                                type: 'button',
                                radius: 'full',
                                class: 'px-soft-btn',
                                attr: {
                                    'data-action': 'click->pixia--generator#improvePrompt',
                                    'data-pixia--generator-target': 'improveBtn'
                                }
                            } only %}
                        </div>
                        <div class="relative" data-tour-step="pixia-prompt">
                            <textarea
                                rows="5"
                                class="px-textarea w-full p-3.5 pb-8 text-sm text-gray-900 bg-gray-50 border-2 border-gray-200 rounded-xl resize-none transition-all placeholder:text-gray-400 focus:outline-none focus:bg-white"
                                placeholder="Décrivez l'image que vous souhaitez générer…&#10;&#10;Ex : Un paysage de montagne au coucher de soleil avec des reflets dorés sur un lac."
                                maxlength="{{ constant('App\\Config\\AppLimits::PIXIA_PROMPT_MAX_LENGTH') }}"
                                data-pixia--generator-target="textarea"
                                data-action="input->pixia--generator#updateCharCount"
                            ></textarea>
                            <span class="absolute bottom-2.5 right-3 text-xs text-gray-400 tabular-nums pointer-events-none"
                                  data-pixia--generator-target="charCount">0 / {{ constant('App\\Config\\AppLimits::PIXIA_PROMPT_MAX_LENGTH')|number_format(0, ',', ' ') }}</span>
                        </div>
                    </div>

                    {# Panel PDF #}
                    <div data-pixia--generator-target="pdfPanel" style="display: none;">

                        {# Zone de dépôt #}
                        <div class="relative border-2 border-dashed border-gray-300 rounded-xl cursor-pointer transition-all hover:border-[var(--px-primary)] hover:bg-[rgb(var(--px-primary-rgb)/0.02)]"
                             data-pixia--generator-target="dropzone"
                             data-action="dragover->pixia--generator#dragOver dragenter->pixia--generator#dragOver dragleave->pixia--generator#dragLeave drop->pixia--generator#drop">
                            <input type="file" id="px-pdf-input" accept="application/pdf" class="sr-only"
                                   data-pixia--generator-target="fileInput"
                                   data-action="change->pixia--generator#fileSelected">
                            <label for="px-pdf-input" class="flex flex-col items-center justify-center py-8 px-4 cursor-pointer">
                                <div class="w-12 h-12 flex items-center justify-center rounded-2xl mb-3"
                                     style="background: rgba({{ pxColor.primary|hex_to_rgb }}, 0.08);">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'document', size: 'lg', colorPrimary: pxColor.primary } only %}
                                </div>
                                <span class="text-sm font-medium text-gray-700">Glissez votre PDF ici</span>
                                <span class="text-xs text-gray-400 mt-1">ou cliquez pour sélectionner (max. 20 Mo)</span>
                            </label>
                        </div>

                        {# Aperçu du fichier sélectionné (masqué par défaut) #}
                        <div class="flex items-center gap-3 p-3 mt-3 rounded-xl border"
                             style="display: none; background: rgb({{ pxColor.primary|hex_to_rgb }} / 0.05); border-color: rgb({{ pxColor.primary|hex_to_rgb }} / 0.15);"
                             data-pixia--generator-target="filePreview">
                            <div class="w-9 h-9 flex items-center justify-center rounded-xl flex-shrink-0"
                                 style="background: rgb({{ pxColor.primary|hex_to_rgb }} / 0.10);">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'document', size: 'sm', colorPrimary: pxColor.primary } only %}
                            </div>
                            <div class="flex-1 min-w-0">
                                <span class="block text-xs font-semibold text-gray-800 truncate"
                                      data-pixia--generator-target="fileName"></span>
                                <span class="block text-xs text-gray-400"
                                      data-pixia--generator-target="fileSize"></span>
                            </div>
                            <button type="button"
                                    data-action="click->pixia--generator#removeFile"
                                    class="w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 cursor-pointer border-none bg-transparent transition-colors flex-shrink-0">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                    <path d="M18 6L6 18M6 6l12 12"/>
                                </svg>
                            </button>
                        </div>

                    </div>
                </div>

                <hr class="border-gray-100">

                {# ── Étape 3 : Style ── #}
                <div data-tour-step="pixia-style">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-step-bubble flex-shrink-0">3</span>
                        <span class="text-sm font-semibold text-gray-800">Style</span>
                    </div>
                    {% set styleImageFiles = {
                        'vivid':     'vivid.png',
                        'natural':   'naturel.png',
                        'cinematic': 'cinematique.png',
                        'anime':     'anime.png',
                        'sketch':    'esquisse.png',
                    } %}
                    <div class="pixia-style-picker">
                        {% for value, label in styles %}
                            <button
                                type="button"
                                class="pixia-style-card"
                                data-style="{{ value }}"
                                data-active="{{ value == 'vivid' ? 'true' : 'false' }}"
                                data-action="click->pixia--generator#selectStyle"
                                data-pixia--generator-target="styleBtn"
                            >
                                <div class="pixia-style-card__img" data-style="{{ value }}">
                                    <img src="{{ asset('images/pixia/styles/' ~ styleImageFiles[value]) }}"
                                         alt="{{ label }}"
                                         class="w-full h-full object-cover">
                                </div>
                                <span class="pixia-style-card__label">{{ label }}</span>
                            </button>
                        {% endfor %}
                    </div>
                </div>

                <hr class="border-gray-100">

                {# ── Étape 4 : Qualité ── #}
                <div data-tour-step="pixia-qualite">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-step-bubble flex-shrink-0">4</span>
                        <span class="text-sm font-semibold text-gray-800">Qualité</span>
                    </div>
                    {% set isPaid = app.user.hasPaidAccess %}
                    <div class="flex gap-1.5">
                        {% for key, preset in qualityPresets %}
                        {% set locked = (preset.paidOnly ?? false) and not isPaid %}
                        <button type="button"
                                class="px-quality-btn relative flex-1 flex flex-col items-center gap-1.5 py-3 px-1.5 bg-gray-50 border-2 border-gray-200 rounded-xl text-center {{ locked ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer' }}"
                                data-quality="{{ key }}"
                                data-active="{{ key == (isPaid ? 'fullhd' : 'std') ? 'true' : 'false' }}"
                                {% if locked %}disabled title="Réservé aux comptes payants"{% else %}data-action="click->pixia--generator#selectQuality"{% endif %}
                                data-pixia--generator-target="qualityBtn">
                            {% if locked %}
                            <span class="absolute -top-2 right-1.5 px-1.5 py-0.5 rounded-full bg-gray-800 text-white text-[8px] font-bold uppercase tracking-wide">Payant</span>
                            {% endif %}
                            {# Icône distinctive selon le niveau de qualité #}
                            {% if key == 'low' %}
                            {# Flou : halos concentriques qui s'estompent #}
                            <svg class="px-quality-icon" width="22" height="22" viewBox="0 0 22 22" fill="currentColor" aria-hidden="true">
                                <circle cx="11" cy="11" r="9" opacity="0.08"/>
                                <circle cx="11" cy="11" r="6.5" opacity="0.16"/>
                                <circle cx="11" cy="11" r="4" opacity="0.32"/>
                                <circle cx="11" cy="11" r="2" opacity="0.65"/>
                            </svg>
                            {% elseif key == 'std' %}
                            {# Standard : cadre photo avec paysage et soleil #}
                            <svg class="px-quality-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
                                <rect x="2" y="4" width="18" height="14" rx="2.5"/>
                                <path d="M2 14.5l4-4 3.5 3.5 2.5-3 6 6" stroke-linejoin="round" stroke-linecap="round"/>
                                <circle cx="15.5" cy="8.5" r="1.8" fill="currentColor" stroke="none" opacity="0.6"/>
                            </svg>
                            {% elseif key == 'ultra' %}
                            {# HD : étoile 4 branches #}
                            <svg class="px-quality-icon" width="22" height="22" viewBox="0 0 22 22" fill="currentColor" aria-hidden="true">
                                <path d="M11 1c.3 3.4 1.4 5.7 3.6 7.2C16.8 9.7 19.2 10.7 22 11c-2.8.3-5.2 1.3-7.4 2.8C12.4 15.3 11.3 17.6 11 21c-.3-3.4-1.4-5.7-3.6-7.2C5.2 12.3 2.8 11.3 0 11c2.8-.3 5.2-1.3 7.4-2.8C9.6 6.7 10.7 4.4 11 1z"/>
                                <path d="M18.5 1.5c.12 1.3.54 2.2 1.38 2.78.84.58 1.76.9 2.92 1.02-1.16.12-2.08.44-2.92 1.02-.84.58-1.26 1.48-1.38 2.78-.12-1.3-.54-2.2-1.38-2.78C16.28 5.74 15.36 5.42 14.2 5.3c1.16-.12 2.08-.44 2.92-1.02.84-.58 1.26-1.48 1.38-2.78z" opacity="0.55"/>
                            </svg>
                            {% else %}
                            {# Full HD : diamant — qualité maximale, comptes payants #}
                            <svg class="px-quality-icon" width="22" height="22" viewBox="0 0 22 22" fill="currentColor" aria-hidden="true">
                                <path d="M6.5 3h9L20 8.5 11 19.5 2 8.5 6.5 3z"/>
                                <path d="M2 8.5h18L11 19.5 2 8.5z" opacity="0.4"/>
                            </svg>
                            {% endif %}
                            <span class="px-quality-label text-[10px] font-bold text-gray-700 leading-none">{{ preset.visualLabel }}</span>
                            <span class="text-[9px] text-gray-400 leading-none font-medium">{{ preset.displayTokens }}</span>
                        </button>
                        {% endfor %}
                    </div>
                </div>

                <hr class="border-gray-100">

                {# ── Étape 5 : Format ── #}
                <div data-tour-step="pixia-format">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-step-bubble flex-shrink-0">5</span>
                        <span class="text-sm font-semibold text-gray-800">Format</span>
                    </div>
                    <div class="grid grid-cols-3 gap-2">
                        <button type="button"
                                class="px-option-btn relative flex flex-col items-center gap-2 p-3 bg-gray-50 border-2 border-gray-200 rounded-xl cursor-pointer transition-all"
                                data-format="square"
                                data-active="true"
                                data-action="click->pixia--generator#selectFormat"
                                data-pixia--generator-target="formatBtn">
                            <div class="px-format-icon w-7 h-7 rounded border-2 border-gray-300 transition-colors"></div>
                            <div class="text-center">
                                <span class="block text-xs font-semibold text-gray-800">Carré</span>
                                <span class="block text-[10px] text-gray-400">1024×1024</span>
                            </div>
                        </button>

                        <button type="button"
                                class="px-option-btn relative flex flex-col items-center gap-2 p-3 bg-gray-50 border-2 border-gray-200 rounded-xl cursor-pointer transition-all"
                                data-format="landscape"
                                data-active="false"
                                data-action="click->pixia--generator#selectFormat"
                                data-pixia--generator-target="formatBtn">
                            <div class="px-format-icon w-9 h-6 rounded border-2 border-gray-300 transition-colors"></div>
                            <div class="text-center">
                                <span class="block text-xs font-semibold text-gray-800">Paysage</span>
                                <span class="block text-[10px] text-gray-400">1536 × 1024</span>
                            </div>
                        </button>

                        <button type="button"
                                class="px-option-btn relative flex flex-col items-center gap-2 p-3 bg-gray-50 border-2 border-gray-200 rounded-xl cursor-pointer transition-all"
                                data-format="portrait"
                                data-active="false"
                                data-action="click->pixia--generator#selectFormat"
                                data-pixia--generator-target="formatBtn">
                            <div class="px-format-icon w-5 h-8 rounded border-2 border-gray-300 transition-colors"></div>
                            <div class="text-center">
                                <span class="block text-xs font-semibold text-gray-800">Portrait</span>
                                <span class="block text-[10px] text-gray-400">1024×1536</span>
                            </div>
                        </button>
                    </div>
                </div>

            </form>

            {# État de chargement (remplace le formulaire) #}
            <div class="flex flex-col items-center justify-center py-16 text-center"
                 data-pixia--generator-target="loading" style="display:none">
                {% include '_atoms/spinner/spinner.html.twig' with {
                    size: 'xl',
                    variant: 'primary',
                    label: 'Génération en cours'
                } only %}
                <p class="text-base font-semibold text-gray-900 mt-4 font-secondary">Génération en cours…</p>
                <p class="text-xs text-gray-400 mt-1.5 max-w-xs leading-relaxed">
                    Pixia crée votre image avec l'IA. Cela peut prendre quelques secondes.
                </p>
            </div>

        </div>

        {# Footer drawer — bouton générer #}
        <div class="flex-shrink-0 px-6 py-4 border-t border-gray-100 bg-gray-50" data-tour-step="pixia-generer">
            {#- LA BARRIÈRE DE TOKENS EST ICI, et nulle part ailleurs : c'est ce bouton qui
                déclenche la dépense. Elle était posée sur « Créer », qui n'ouvre que le panneau —
                l'utilisateur se voyait refuser l'entrée sans avoir vu ce qu'il y avait dedans, et
                le tutoriel de l'outil devenait inatteignable avec elle. -#}
            <span class="block" {% if not canCreate %}data-tooltip-html="{{ createTooltipHtml|trim|e('html_attr') }}" data-tooltip-position="top"{% endif %}>
            {% include '_atoms/button/button.html.twig' with {
                label: 'Générer l\'image',
                size: 'lg',
                icon: 'magic-stick',
                type: 'button',
                width: 'full',
                gradientFrom: pxColor.primary,
                gradientTo: pxColor.secondary,
                disabled: not canCreate,
                attr: {
                    'data-pixia--generator-target': 'submitBtn',
                    'data-action': 'click->pixia--generator#generate'
                }
            } only %}
            </span>
            <p class="text-center text-[10px] text-gray-400 mt-2">
                Pixia peut faire des erreurs. Vérifiez les contenus sensibles.
            </p>
        </div>

    </div>
    {# /drawer #}

    {# ══════════════════════════════════════════
       MODAL — RENOMMER L'IMAGE
       ══════════════════════════════════════════ #}
    {% embed '_organisms/rename-modal/rename-modal.html.twig' with {
        title:        'Renommer l\'image',
        subtitle:     'Donnez un titre plus parlant à votre image.',
        placeholder:  'Ex: Paysage montagneux au coucher de soleil…',
        confirmLabel: 'Renommer',
        color:        pxColor,
        modalAttr:    {'data-pixia--generator-target': 'renameModal', 'style': 'z-index: 110;'},
        inputAttr:    {
            'data-pixia--generator-target': 'renameInput',
            'data-action': 'keydown->pixia--generator#handleRenameKey'
        },
        cancelAttr:   {'data-action': 'click->pixia--generator#closeRenameModal'},
        confirmAttr:  {'data-action': 'click->pixia--generator#confirmRename'}
    } %}
        {% block hiddenInputs %}
            <input type="hidden" data-pixia--generator-target="renameId">
            <input type="hidden" data-pixia--generator-target="renameCsrf">
        {% endblock %}
    {% endembed %}

    {# ══════════════════════════════════════════
       MODAL — SUPPRIMER L'IMAGE
       ══════════════════════════════════════════ #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        title:       'Supprimer cette image ?',
        modalAttr:   {'data-pixia--generator-target': 'deleteModal', 'data-action': 'keydown.esc@window->pixia--generator#closeDeleteModal', 'style': 'z-index: 110;'},
        cancelAttr:  {'data-action': 'click->pixia--generator#closeDeleteModal'},
        confirmAttr: {'data-action': 'click->pixia--generator#confirmDelete'}
    } only %}
        {% block description %}
            <p class="text-sm text-gray-500">
                L'image <strong class="text-gray-900 font-semibold" data-pixia--generator-target="deleteModalTitle"></strong> sera supprimée définitivement.
            </p>
        {% endblock %}
    {% endembed %}

    {# ══════════════════════════════════════════
       LIGHTBOX
       ══════════════════════════════════════════ #}
    {% embed '_organisms/ai-lightbox/ai-lightbox.html.twig' with {
        controller: 'pixia--generator',
        primaryRgb: pxColor.primary|hex_to_rgb
    } %}

        {% block meta %}
            {# Partie fixe : badges, titre, date, stats #}
            <div class="flex flex-col gap-2 flex-shrink-0">
                <div class="flex items-center gap-1.5 flex-wrap">
                    <span class="inline-flex items-center h-[22px] px-2 rounded-full text-[10px] font-semibold uppercase tracking-[0.08em]"
                          style="background: rgba(var(--lightbox-primary-rgb), 0.10); color: rgba(var(--lightbox-primary-rgb), 1); border: 1px solid rgba(var(--lightbox-primary-rgb), 0.20);"
                          data-pixia--generator-target="lightboxStyle"></span>
                    <span class="inline-flex items-center h-[22px] px-2 rounded-full text-[10px] font-medium bg-gray-100 text-gray-600"
                          data-pixia--generator-target="lightboxFormat"></span>
                </div>

                <p class="text-[0.9375rem] font-semibold text-gray-900 leading-[1.45] line-clamp-3 m-0"
                   data-pixia--generator-target="lightboxTitle"></p>

                <time class="text-xs text-gray-400"
                      data-pixia--generator-target="lightboxDate"></time>

                <div class="flex items-center gap-2"
                     data-pixia--generator-target="lightboxStats"
                     style="display:none">
                    <span class="flex items-center gap-1 text-xs text-gray-400">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'token', size: 'xs', color: 'current'} only %}
                        <span data-pixia--generator-target="lightboxTokens"></span>
                    </span>
                    <span class="text-gray-200 text-xs">·</span>
                    <span class="flex items-center gap-1 text-xs text-yellow-500">
                        {% include '_atoms/icon/icon.html.twig' with {name: 'bolt', size: 'xs', color: 'current'} only %}
                        <span data-pixia--generator-target="lightboxEnergy"></span>
                    </span>
                </div>
            </div>

            {# Description : flex-1 pour remplir l'espace jusqu'aux boutons #}
            <div class="flex-1 min-h-0 flex flex-col border-t border-gray-100 pt-3 mt-1">
                <span class="flex-shrink-0 block text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Description</span>
                <p class="flex-1 overflow-y-auto text-xs text-gray-500 leading-relaxed m-0 pr-1"
                   data-pixia--generator-target="lightboxPrompt"></p>
            </div>
        {% endblock %}

        {% block actions %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Renommer',
                icon: 'edit',
                size: 'sm',
                width: 'full',
                gradientFrom: pxColor.primary,
                gradientTo: pxColor.secondary,
                attr: {
                    'data-action': 'click->pixia--generator#openRenameModal',
                    'data-pixia--generator-target': 'lightboxRenameBtn'
                }
            } only %}

            {% include '_atoms/button/button.html.twig' with {
                label: 'Télécharger',
                icon: 'download',
                size: 'sm',
                width: 'full',
                href: '#',
                gradientFrom: pxColor.primary,
                gradientTo: pxColor.secondary,
                attr: {
                    'data-pixia--generator-target': 'lightboxDownload',
                    'download': ''
                }
            } only %}

            {% include '_atoms/button/button.html.twig' with {
                label: 'Supprimer',
                icon: 'trash',
                variant: 'error',
                size: 'sm',
                width: 'full',
                attr: {
                    'data-action': 'click->pixia--generator#openDeleteModal'
                }
            } only %}
        {% endblock %}

    {% endembed %}

</div>
{% endblock %}