{#
 # ============================================================================
 # PAGE: CASTIA — STUDIO PODCAST
 # ============================================================================
 #
 # Layout : header sticky · galerie · drawer droit.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/button/button.html.twig
 # - _atoms/spinner/spinner.html.twig
 # - _molecules/mini-stat/mini-stat.html.twig
 # - _molecules/pagination/pagination.html.twig
 # - castia/_podcast_card.html.twig
 #
 # ============================================================================
 # DONNÉES REQUISES (CastiaController::index)
 # ============================================================================
 #
 # | Variable          | Type   | Description                        |
 # |-------------------|--------|------------------------------------|
 # | tokenStats        | array  | {remaining, energyConsumptionWh}   |
 # | voices            | array  | Liste des voix disponibles         |
 # | favoriteVoices    | array  | Clés des voix favorites            |
 # | defaultVoice      | string | Clé de la voix par défaut          |
 # | recommendedVoices | array  | Clés des voix recommandées         |
 # | medianTokenCost   | int    | Coût médian                        |
 # | podcasts          | array  | Collection de CastiaPodcast        |
 # | totalItems        | int    | Nombre total de podcasts           |
 # | pagination        | array  | {current, total, totalItems, perPage} |
 #
 # ============================================================================
 #}

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

{% block title %}Castia — Studio Podcast{% endblock %}

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

{% block body %}

{% set ctColor = tool_color_details['castia'] %}
{% set defaultVoiceData = voices[defaultVoice] ?? voices|first %}
{% 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: castiaMinTokens,
    currentPlanSlug: currentPlanSlug,
    upgradeUrl: path('app_upgrade')
} only %}{% endset %}

<style>
    .ct-drawer { transform: translateX(105%); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
    .ct-drawer.open { transform: translateX(0); }
    @keyframes castiaEq { 0%, 100% { height: 3px; } 50% { height: 11px; } }
    .castia-hero-eq__bar { animation: castiaEq 0.7s ease-in-out infinite; }
</style>

<div data-controller="castia--generator shared--add-to-moodia"
     data-castia--generator-max-chars-value="{{ constant('App\\Config\\AppLimits::CASTIA_MAX_SCRIPT_LENGTH') }}"
     data-castia--generator-tokens-remaining-value="{{ tokenStats.remaining }}"
     data-castia--generator-csrf-value="{{ csrf_token('toggle-favorite') }}"
     data-shared--add-to-moodia-endpoint-value="{{ path('app_moodia_add_castia', {id: 0})|replace({'/0': ''}) }}"
     data-shared--add-to-moodia-courses-endpoint-value="{{ path('app_moodia_add_courses') }}">

    {# ══════════════════════════════════════════
       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: {{ ctColor.bg }};">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'bubul-castia',
                    size: 'lg',
                    colorPrimary: ctColor.primary,
                    colorSecondary: ctColor.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, {{ ctColor.primary }}, {{ ctColor.secondary }});">Castia</h1>
                <span class="text-xs font-medium text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full shrink-0 tabular-nums"
                      data-castia--generator-target="listCount">
                    {{ totalItems }} audio{{ totalItems > 1 ? 's' : '' }}
                </span>
                {% if medianTokenCost is defined and medianTokenCost > 0 %}
                    <span class="hidden lg:inline-flex items-center gap-1 text-xs text-gray-400/70 truncate">
                        <span class="text-gray-300">·</span>
                        <span class="inline-flex items-center gap-0.5">
                            {% include '_atoms/icon/icon.html.twig' with {name: 'token', size: 'xs', color: 'current'} only %}
                            ~{{ medianTokenCost|format_tokens }}
                        </span>
                        <span class="text-gray-300">/</span>
                        <span>audio</span>
                    </span>
                {% endif %}
            </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: {{ ctColor.bg }};">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'token', size: 'sm', colorPrimary: ctColor.primary, colorSecondary: ctColor.secondary} only %}
                    <span class="text-sm font-semibold tabular-nums"
                          style="color: {{ ctColor.primary }};"
                          data-castia--generator-target="tokensDisplay">{{ tokenStats.remaining|format_tokens }}</span>
                    <span class="text-xs"
                          style="color: {{ ctColor.primary }};"
                          data-castia--generator-target="tokensLabel">tokens</span>
                </div>

                {# Énergie #}
                {% set energyParts = tokenStats.energyConsumptionWh|format_energy_parts %}
                <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-warning/10">
                    {% include '_atoms/icon/icon.html.twig' with {name: 'bolt', size: 'sm', color: 'warning'} only %}
                    <span class="text-sm font-semibold text-warning tabular-nums">{{ energyParts.value }}</span>
                    <span class="text-xs text-warning">{{ energyParts.unit }}</span>
                </div>
            </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>
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer',
                    size: 'md',
                    icon: 'plus',
                    gradientFrom: ctColor.primary,
                    gradientTo: ctColor.secondary,
                    attr: { 'data-action': 'click->castia--generator#openDrawer', 'data-tour-step': 'castia-ouvrir' }
                } only %}
            </span>
        </div>
    </header>

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

        {# Barre de recherche #}
        {% if totalItems > 0 %}
        <div class="relative mb-5">
            <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400">
                    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
            </div>
            <input type="search"
                   placeholder="Rechercher par titre ou voix..."
                   class="w-full pl-9 pr-4 py-2.5 text-sm bg-white border border-gray-200 rounded-xl
                          placeholder:text-gray-400 transition-all
                          focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
                   data-action="input->castia--generator#searchPodcasts">
        </div>
        {% endif %}

        {# État vide #}
        <div data-castia--generator-target="emptyState"
             {% if podcasts|length > 0 %}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 mb-5"
                 style="background: {{ ctColor.bg }};">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'bubul-castia',
                    size: '2xl',
                    colorPrimary: ctColor.primary,
                    colorSecondary: ctColor.secondary
                } only %}
            </div>
            <h2 class="text-xl font-bold text-gray-900 mb-2">Votre bibliothèque est vide</h2>
            <p class="text-sm text-gray-500 max-w-xs leading-relaxed mb-7">
                Transformez un texte ou un script en podcast audio professionnel avec Castia.
            </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: 'Créer mon premier audio',
                    size: 'lg',
                    icon: 'plus',
                    gradientFrom: ctColor.primary,
                    gradientTo: ctColor.secondary,
                    attr: { 'data-action': 'click->castia--generator#openDrawer', 'data-tour-step': 'castia-ouvrir' }
                } only %}
            </span>
        </div>

        {# Grille de podcasts #}
        <div data-castia--generator-target="list"
             data-tour-step="castia-audios"
             class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4"
             {% if podcasts|length == 0 %}style="display:none"{% endif %}>
            {% for podcast in podcasts %}
                {% include 'castia/_podcast_card.html.twig' with {podcast: podcast} only %}
            {% endfor %}
        </div>

        {# Pagination #}
        {% if pagination.total > 1 %}
        <div class="mt-8">
            {% include '_molecules/pagination/pagination.html.twig' with {
                pagination: pagination,
                route: 'app_castia',
                filters: {}
            } %}
        </div>
        {% endif %}

    </div>

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

    {# ══════════════════════════════════════════
       DRAWER — FORMULAIRE DE CRÉATION
       ══════════════════════════════════════════ #}
    <div class="ct-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-castia--generator-target="drawer">

        {# Header #}
        <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: {{ ctColor.bg }};">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-castia', size: 'sm', colorPrimary: ctColor.primary, colorSecondary: ctColor.secondary } only %}
                </div>
                <h2 class="text-sm font-semibold text-gray-900">Nouvel audio</h2>
            </div>
            <button type="button"
                    data-action="click->castia--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"
             style="--color-primary: {{ ctColor.primary }}; --color-primary-dark: {{ ctColor.secondary }};">

            {# Formulaire #}
            <form id="castia-form"
                  data-action="submit->castia--generator#generate"
                  data-castia--generator-target="form"
                  class="p-6 space-y-6">

                {# ── 1. Titre ── #}
                <div data-tour-step="castia-titre">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0"
                              style="background: {{ ctColor.bg }}; color: {{ ctColor.primary }}; border: 1px solid {{ ctColor.border }};">1</span>
                        <span class="text-sm font-semibold text-gray-800">Titre</span>
                    </div>
                    <input type="text" name="title"
                           class="w-full px-3 py-2.5 text-sm text-gray-900 bg-gray-50 border border-gray-200 rounded-xl
                                  placeholder:text-gray-400 transition-all
                                  focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 focus:bg-white"
                           placeholder="Ex : Introduction à la gestion de projet agile"
                           maxlength="255"
                           data-castia--generator-target="titleInput">
                </div>

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

                {# ── 2. Script ── #}
                <div data-tour-step="castia-script">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            <span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0"
                              style="background: {{ ctColor.bg }}; color: {{ ctColor.primary }}; border: 1px solid {{ ctColor.border }};">2</span>
                            <span class="text-sm font-semibold text-gray-800">Script</span>
                        </div>
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Améliorer',
                            variant: 'soft-primary',
                            size: 'sm',
                            icon: 'magic-stick',
                            type: 'button',
                            radius: 'full',
                            attr: {
                                'data-action': 'click->castia--generator#optimizeScript',
                                'data-castia--generator-target': 'optimizeBtn'
                            }
                        } only %}
                    </div>
                    <div class="relative">
                        <textarea name="script"
                            class="w-full min-h-[180px] px-3 py-2.5 pb-7 text-sm font-primary leading-relaxed text-gray-900 bg-gray-50 border border-gray-200 rounded-xl resize-none
                                   placeholder:text-gray-400 transition-all
                                   focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 focus:bg-white"
                            placeholder="Collez ou rédigez le texte de votre podcast ici..."
                            maxlength="{{ constant('App\\Config\\AppLimits::CASTIA_MAX_SCRIPT_LENGTH') }}"
                            data-castia--generator-target="textarea"
                            data-action="input->castia--generator#updateCharCount"></textarea>
                        <span class="absolute bottom-2 right-3 text-[11px] text-gray-400 tabular-nums pointer-events-none"
                              data-castia--generator-target="charCount">0 / {{ constant('App\\Config\\AppLimits::CASTIA_MAX_SCRIPT_LENGTH')|number_format(0, ',', ' ') }}</span>
                    </div>
                </div>

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

                {# ── 3. Voix ── #}
                <div data-tour-step="castia-voix">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            <span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold flex-shrink-0"
                              style="background: {{ ctColor.bg }}; color: {{ ctColor.primary }}; border: 1px solid {{ ctColor.border }};">3</span>
                            <span class="text-sm font-semibold text-gray-800">Voix</span>
                        </div>
                        <span class="text-[11px] text-gray-400">{{ voices|length }} disponibles</span>
                    </div>

                    {# Hero card : voix sélectionnée #}
                    <div class="flex items-center gap-3 px-3 py-2.5
                                bg-primary/[0.04] border border-primary/20 rounded-xl
                                cursor-pointer transition-colors hover:bg-primary/[0.07]"
                         data-action="click->castia--generator#toggleVoicePicker">

                        <span class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 select-none
                                     {{ defaultVoiceData.gender == 'female' ? 'bg-gradient-to-br from-pink-100 to-pink-50 text-pink-600' : 'bg-gradient-to-br from-blue-100 to-blue-50 text-blue-600' }}"
                              data-castia--generator-target="heroAvatar">{% if languages[defaultVoiceData.language] is defined %}<span class="text-lg leading-none">{{ languages[defaultVoiceData.language].flag }}</span>{% else %}{{ defaultVoiceData.label|first }}{% endif %}</span>

                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-800 leading-tight"
                               data-castia--generator-target="heroName">{{ defaultVoiceData.label }}</p>
                            <p class="text-xs text-gray-500 leading-tight truncate"
                               data-castia--generator-target="heroDesc">{{ defaultVoiceData.description }}</p>
                        </div>

                        <button type="button"
                                class="w-8 h-8 flex items-center justify-center bg-primary rounded-full text-white flex-shrink-0 transition-transform hover:scale-105"
                                data-action="click->castia--generator#previewVoice:stop"
                                data-preview-url="{{ defaultVoiceData.previewUrl }}"
                                data-castia--generator-target="heroPlay">
                            <svg class="castia-hero-play-icon" width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                            <span class="castia-hero-eq flex items-end gap-px" aria-hidden="true" style="display:none; height:12px">
                                <span class="castia-hero-eq__bar bg-white rounded-sm" style="width:2px; animation-delay:0ms"></span>
                                <span class="castia-hero-eq__bar bg-white rounded-sm" style="width:2px; animation-delay:160ms"></span>
                                <span class="castia-hero-eq__bar bg-white rounded-sm" style="width:2px; animation-delay:80ms"></span>
                                <span class="castia-hero-eq__bar bg-white rounded-sm" style="width:2px; animation-delay:240ms"></span>
                            </span>
                        </button>

                        <span class="w-6 h-6 flex items-center justify-center text-gray-400 flex-shrink-0 transition-transform duration-200"
                              data-castia--generator-target="voicePickerToggle">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6,9 12,15 18,9"/></svg>
                        </span>
                    </div>

                    {# Liste déroulante des voix (collapsible) #}
                    <div class="mt-2 border border-gray-100 rounded-xl overflow-hidden bg-white"
                         data-castia--generator-target="voicePicker"
                         data-open="false"
                         style="display:none">

                        <div class="castia-gen__voices-sections"
                             data-castia--generator-target="voicesContainer">

                            {% set shownKeys = [] %}

                            {# ── Recommandés ── #}
                            <div class="castia-gen__voices-group">
                                <p class="castia-gen__voices-group-label flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-warning px-3 pt-2.5 pb-1">
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
                                    Recommandés
                                </p>
                                <div class="castia-gen__voices-row flex flex-col">
                                    {% for key in recommendedVoices %}
                                        {% if voices[key] is defined %}
                                            {% set voice = voices[key] %}
                                            {% set shownKeys = shownKeys|merge([key]) %}
                                            <label class="castia-gen__voice-chip flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors hover:bg-gray-50 has-[input:checked]:bg-primary/[0.06]"
                                                   data-voice-key="{{ key }}"
                                                   data-voice-label="{{ voice.label }}" data-voice-flag="{{ languages[voice.language].flag ?? '' }}"
                                                   data-voice-desc="{{ voice.description }}"
                                                   data-voice-gender="{{ voice.gender }}"
                                                   data-preview-url="{{ voice.previewUrl }}"
                                                   data-section="reco"
                                                   {{ key in favoriteVoices ? 'style="display:none"' : '' }}>
                                                <input type="radio" name="voice" value="{{ key }}" {{ key == defaultVoice ? 'checked' }} class="sr-only"
                                                       data-castia--generator-target="voice"
                                                       data-action="change->castia--generator#voiceSelected">
                                                <span class="castia-gen__voice-chip-avatar castia-gen__voice-chip-avatar--{{ voice.gender }} w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 select-none
                                                    {{ voice.gender == 'female' ? 'bg-gradient-to-br from-pink-100 to-pink-50 text-pink-600' : 'bg-gradient-to-br from-blue-100 to-blue-50 text-blue-600' }}">{% if languages[voice.language] is defined %}<span class="text-base leading-none">{{ languages[voice.language].flag }}</span>{% else %}{{ voice.label|first }}{% endif %}</span>
                                                <span class="flex-1 min-w-0">
                                                    <span class="block text-xs font-semibold text-gray-800 leading-tight">{{ voice.label }}</span>
                                                    <span class="block text-[10px] text-gray-400 leading-tight truncate">{{ voice.description }}</span>
                                                </span>
                                                <div class="flex items-center gap-0.5 ml-auto">
                                                    <button type="button"
                                                            class="castia-gen__voice-chip-play w-5 h-5 flex items-center justify-center bg-primary/[0.06] rounded-full text-primary transition-all hover:bg-primary hover:text-white"
                                                            data-action="click->castia--generator#previewVoice:stop"
                                                            data-preview-url="{{ voice.previewUrl }}">
                                                        <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                                                    </button>
                                                    <button type="button"
                                                            class="castia-gen__voice-star {{ key in favoriteVoices ? 'castia-gen__voice-star--active text-error' : 'text-gray-300' }} w-5 h-5 flex items-center justify-center rounded-full transition-all hover:text-error"
                                                            data-action="click->castia--generator#toggleFavorite:stop"
                                                            data-voice-key="{{ key }}">
                                                        <svg width="10" height="10" viewBox="0 0 24 24" fill="{{ key in favoriteVoices ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                                    </button>
                                                </div>
                                            </label>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>

                            {# ── Favoris ── #}
                            {% if favoriteVoices|length > 0 %}
                            <div class="castia-gen__voices-group border-t border-gray-50">
                                <p class="castia-gen__voices-group-label castia-gen__voices-group-label--fav flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-error px-3 pt-2.5 pb-1">
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                    Vos favoris
                                </p>
                                <div class="castia-gen__voices-row flex flex-col">
                                    {% for key in favoriteVoices %}
                                        {% if voices[key] is defined %}
                                            {% set voice = voices[key] %}
                                            {% set shownKeys = shownKeys|merge([key]) %}
                                            <label class="castia-gen__voice-chip flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors hover:bg-gray-50 has-[input:checked]:bg-primary/[0.06]"
                                                   data-voice-key="{{ key }}"
                                                   data-voice-label="{{ voice.label }}" data-voice-flag="{{ languages[voice.language].flag ?? '' }}"
                                                   data-voice-desc="{{ voice.description }}"
                                                   data-voice-gender="{{ voice.gender }}"
                                                   data-preview-url="{{ voice.previewUrl }}"
                                                   {{ key in recommendedVoices ? 'data-from-reco="true"' : '' }}>
                                                <input type="radio" name="voice" value="{{ key }}" {{ key == defaultVoice ? 'checked' }} class="sr-only"
                                                       data-castia--generator-target="voice"
                                                       data-action="change->castia--generator#voiceSelected">
                                                <span class="castia-gen__voice-chip-avatar castia-gen__voice-chip-avatar--{{ voice.gender }} w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 select-none
                                                    {{ voice.gender == 'female' ? 'bg-gradient-to-br from-pink-100 to-pink-50 text-pink-600' : 'bg-gradient-to-br from-blue-100 to-blue-50 text-blue-600' }}">{% if languages[voice.language] is defined %}<span class="text-base leading-none">{{ languages[voice.language].flag }}</span>{% else %}{{ voice.label|first }}{% endif %}</span>
                                                <span class="flex-1 min-w-0">
                                                    <span class="block text-xs font-semibold text-gray-800 leading-tight">{{ voice.label }}</span>
                                                    <span class="block text-[10px] text-gray-400 leading-tight truncate">{{ voice.description }}</span>
                                                </span>
                                                <div class="flex items-center gap-0.5 ml-auto">
                                                    <button type="button"
                                                            class="castia-gen__voice-chip-play w-5 h-5 flex items-center justify-center bg-primary/[0.06] rounded-full text-primary transition-all hover:bg-primary hover:text-white"
                                                            data-action="click->castia--generator#previewVoice:stop"
                                                            data-preview-url="{{ voice.previewUrl }}">
                                                        <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                                                    </button>
                                                    <button type="button"
                                                            class="castia-gen__voice-star castia-gen__voice-star--active text-error w-5 h-5 flex items-center justify-center rounded-full transition-all hover:text-error"
                                                            data-action="click->castia--generator#toggleFavorite:stop"
                                                            data-voice-key="{{ key }}">
                                                        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                                    </button>
                                                </div>
                                            </label>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}

                            {# ── Femme ── #}
                            <div class="castia-gen__voices-group border-t border-gray-50">
                                <p class="castia-gen__voices-group-label castia-gen__voices-group-label--female flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-pink-500 px-3 pt-2.5 pb-1">
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="5"/><path d="M12 13v8M9 18h6"/></svg>
                                    Femme
                                </p>
                                <div class="castia-gen__voices-row flex flex-col">
                                    {% for key, voice in voices %}
                                        {% if voice.gender == 'female' and key not in shownKeys %}
                                        <label class="castia-gen__voice-chip flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors hover:bg-gray-50 has-[input:checked]:bg-primary/[0.06]"
                                               data-voice-key="{{ key }}"
                                               data-voice-label="{{ voice.label }}" data-voice-flag="{{ languages[voice.language].flag ?? '' }}"
                                               data-voice-desc="{{ voice.description }}"
                                               data-voice-gender="{{ voice.gender }}"
                                               data-preview-url="{{ voice.previewUrl }}">
                                            <input type="radio" name="voice" value="{{ key }}" {{ key == defaultVoice ? 'checked' }} class="sr-only"
                                                   data-castia--generator-target="voice"
                                                   data-action="change->castia--generator#voiceSelected">
                                            <span class="castia-gen__voice-chip-avatar castia-gen__voice-chip-avatar--female w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 select-none bg-gradient-to-br from-pink-100 to-pink-50 text-pink-600">{% if languages[voice.language] is defined %}<span class="text-base leading-none">{{ languages[voice.language].flag }}</span>{% else %}{{ voice.label|first }}{% endif %}</span>
                                            <span class="flex-1 min-w-0">
                                                <span class="block text-xs font-semibold text-gray-800 leading-tight">{{ voice.label }}</span>
                                                <span class="block text-[10px] text-gray-400 leading-tight truncate">{{ voice.description }}</span>
                                            </span>
                                            <div class="flex items-center gap-0.5 ml-auto">
                                                <button type="button"
                                                        class="castia-gen__voice-chip-play w-5 h-5 flex items-center justify-center bg-primary/[0.06] rounded-full text-primary transition-all hover:bg-primary hover:text-white"
                                                        data-action="click->castia--generator#previewVoice:stop"
                                                        data-preview-url="{{ voice.previewUrl }}">
                                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                                                </button>
                                                <button type="button"
                                                        class="castia-gen__voice-star {{ key in favoriteVoices ? 'castia-gen__voice-star--active text-error' : 'text-gray-300' }} w-5 h-5 flex items-center justify-center rounded-full transition-all hover:text-error"
                                                        data-action="click->castia--generator#toggleFavorite:stop"
                                                        data-voice-key="{{ key }}">
                                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="{{ key in favoriteVoices ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                                </button>
                                            </div>
                                        </label>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>

                            {# ── Homme ── #}
                            <div class="castia-gen__voices-group border-t border-gray-50">
                                <p class="castia-gen__voices-group-label castia-gen__voices-group-label--male flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-blue-500 px-3 pt-2.5 pb-1">
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="10" cy="14" r="5"/><path d="M19 5l-5.4 5.4M19 5h-5M19 5v5"/></svg>
                                    Homme
                                </p>
                                <div class="castia-gen__voices-row flex flex-col">
                                    {% for key, voice in voices %}
                                        {% if voice.gender == 'male' and key not in shownKeys %}
                                        <label class="castia-gen__voice-chip flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors hover:bg-gray-50 has-[input:checked]:bg-primary/[0.06]"
                                               data-voice-key="{{ key }}"
                                               data-voice-label="{{ voice.label }}" data-voice-flag="{{ languages[voice.language].flag ?? '' }}"
                                               data-voice-desc="{{ voice.description }}"
                                               data-voice-gender="{{ voice.gender }}"
                                               data-preview-url="{{ voice.previewUrl }}">
                                            <input type="radio" name="voice" value="{{ key }}" {{ key == defaultVoice ? 'checked' }} class="sr-only"
                                                   data-castia--generator-target="voice"
                                                   data-action="change->castia--generator#voiceSelected">
                                            <span class="castia-gen__voice-chip-avatar castia-gen__voice-chip-avatar--male w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 select-none bg-gradient-to-br from-blue-100 to-blue-50 text-blue-600">{% if languages[voice.language] is defined %}<span class="text-base leading-none">{{ languages[voice.language].flag }}</span>{% else %}{{ voice.label|first }}{% endif %}</span>
                                            <span class="flex-1 min-w-0">
                                                <span class="block text-xs font-semibold text-gray-800 leading-tight">{{ voice.label }}</span>
                                                <span class="block text-[10px] text-gray-400 leading-tight truncate">{{ voice.description }}</span>
                                            </span>
                                            <div class="flex items-center gap-0.5 ml-auto">
                                                <button type="button"
                                                        class="castia-gen__voice-chip-play w-5 h-5 flex items-center justify-center bg-primary/[0.06] rounded-full text-primary transition-all hover:bg-primary hover:text-white"
                                                        data-action="click->castia--generator#previewVoice:stop"
                                                        data-preview-url="{{ voice.previewUrl }}">
                                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                                                </button>
                                                <button type="button"
                                                        class="castia-gen__voice-star {{ key in favoriteVoices ? 'castia-gen__voice-star--active text-error' : 'text-gray-300' }} w-5 h-5 flex items-center justify-center rounded-full transition-all hover:text-error"
                                                        data-action="click->castia--generator#toggleFavorite:stop"
                                                        data-voice-key="{{ key }}">
                                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="{{ key in favoriteVoices ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                                </button>
                                            </div>
                                        </label>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>

                        </div>{# /castia-gen__voices-sections #}
                    </div>{# /voicePicker #}
                </div>{# /voix #}

            </form>

            {# État de chargement (remplace le formulaire) #}
            <div class="flex flex-col items-center justify-center py-12 text-center"
                 data-castia--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"
                   data-castia--generator-target="loadingText">Génération en cours...</p>
                <p class="text-xs text-gray-400 mt-1.5 max-w-xs leading-relaxed">Castia crée votre podcast. Environ 30 secondes.</p>
            </div>

        </div>

        {# Bouton générer (ancré en bas) #}
        <div class="flex-shrink-0 px-6 py-4 border-t border-gray-100 bg-gray-50" data-tour-step="castia-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 %}>
            <button type="submit" form="castia-form"
                {% if not canCreate %}disabled aria-disabled="true"{% endif %}
                class="inline-flex items-center justify-center gap-2 w-full h-11
                       font-secondary font-semibold text-base text-white
                       rounded-xl shadow-primary transition-all
                       hover:-translate-y-0.5 active:translate-y-0
                       disabled:opacity-50 disabled:cursor-not-allowed
                       focus:outline-none focus:ring-2 focus:ring-offset-2"
                style="background: linear-gradient(135deg, {{ ctColor.primary }}, {{ ctColor.secondary }}); --tw-ring-color: {{ ctColor.primary }}4d;"
                data-castia--generator-target="submitBtn">
                {% include '_atoms/icon/icon.html.twig' with {name: 'castia', size: 'md', color: 'white'} only %}
                <span data-castia--generator-target="btnText">Générer le podcast</span>
            </button>
            </span>
        </div>

    </div>

    {# ── Modal script ── #}
    {% embed '_molecules/modal/modal.html.twig' with {
        id: 'castia-script-modal',
        title: 'Script',
        size: 'md'
    } %}
    {% block body %}
        <p class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap max-h-[60vh] overflow-y-auto"
           data-castia--generator-target="scriptModalContent"></p>
    {% endblock %}
    {% block footer %}
        {% include '_atoms/button/button.html.twig' with {
            label: 'Fermer',
            variant: 'ghost',
            size: 'lg',
            attr: { onclick: "closeModal('castia-script-modal')", type: 'button' }
        } only %}
    {% endblock %}
    {% endembed %}

    {# ── Modal : Ajouter dans un cours Moodia ── #}
    {% include '_molecules/add-to-moodia/add-to-moodia.html.twig' with {
        submitLabel: "Ajouter l'audio",
        submitIcon: 'castia',
        sourceColorPrimary: ctColor.primary,
        sourceColorBg: ctColor.bg
    } only %}

    {# ── Modal de confirmation de suppression ── #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        title:       'Supprimer cet audio ?',
        modalAttr:   {'data-castia--generator-target': 'deleteModal', 'data-action': 'keydown.esc@window->castia--generator#cancelDelete'},
        cancelAttr:  {'data-action': 'click->castia--generator#cancelDelete'},
        confirmAttr: {'data-action': 'click->castia--generator#confirmDelete'}
    } only %}
        {% block description %}
            <p class="text-sm text-gray-500">
                <strong class="text-gray-900 font-semibold" data-castia--generator-target="deletePodcastTitle"></strong>
                sera supprimé définitivement.
            </p>
        {% endblock %}
    {% endembed %}

    {# ══════════════════════════════════════════
       MODAL — RENOMMER L'AUDIO
       ══════════════════════════════════════════ #}
    {% embed '_organisms/rename-modal/rename-modal.html.twig' with {
        title:       "Renommer l'audio",
        subtitle:    'Donnez un titre plus parlant à votre audio.',
        placeholder: "Titre de l'audio...",
        color:       ctColor,
        modalAttr:   {'data-castia--generator-target': 'renameModal'},
        inputAttr:   {
            'data-castia--generator-target': 'renameInput',
            'data-action': 'keydown->castia--generator#renameKeydown',
            'maxlength': '255'
        },
        cancelAttr:  {'data-action': 'click->castia--generator#closeRenameModal'},
        confirmAttr: {'data-action': 'click->castia--generator#saveRename'}
    } only %}
        {% block hiddenInputs %}
            <input type="hidden" data-castia--generator-target="renameId">
        {% endblock %}
    {% endembed %}

</div>

{% endblock %}