{#
 # Molecule: Add to Moodia Modal
 # NE PAS étendre base.html.twig — utilisé via include
 #
 # Sélecteur 3 étapes : cours → section → position
 # Navigation par clic direct, breadcrumb = indicateur d'étapes cliquable.
 # Requiert le contrôleur Stimulus `shared--add-to-moodia` sur un parent.
 #
 # Paramètres optionnels :
 #   submitLabel        string  Libellé du bouton final       (défaut : 'Ajouter ici')
 #   submitIcon         string  Icône du bouton final          (défaut : 'castia')
 #   sourceIcon         string  Icône de la card source        (défaut : 'bubul-castia')
 #   sourceLabel        string  Sous-titre de la source        (défaut : 'Podcast Castia')
 #   sourceColorPrimary string  Couleur principale de l'icône  (défaut : 'primary')
 #   sourceColorBg      string  Fond de la card source         (défaut : null → bg-primary/5)
 #}

{% set submitLabel        = submitLabel        ?? 'Ajouter ici' %}
{% set submitIcon         = submitIcon         ?? 'castia' %}
{% set sourceIcon         = sourceIcon         ?? 'bubul-castia' %}
{% set sourceLabel        = sourceLabel        ?? 'Podcast Castia' %}
{% set sourceColorPrimary = sourceColorPrimary ?? null %}
{% set sourceColorBg      = sourceColorBg      ?? null %}

<style>
    .atm-panel {
        animation: atm-enter 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes atm-enter {
        from { opacity: 0; transform: translateY(14px) scale(0.975); }
        to   { opacity: 1; transform: translateY(0)   scale(1); }
    }
    @media (max-width: 639px) {
        @keyframes atm-enter {
            from { opacity: 0; transform: translateY(40px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }
</style>

<div class="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-5 hidden"
     data-shared--add-to-moodia-target="modal">

    {# Backdrop #}
    <div class="fixed inset-0 bg-black/50 backdrop-blur-[3px]"
         data-action="click->shared--add-to-moodia#close"></div>

    {# Panneau principal #}
    <div class="atm-panel relative z-10 w-full sm:max-w-[460px] bg-white rounded-t-[28px] sm:rounded-2xl shadow-2xl flex flex-col overflow-hidden"
         style="max-height: min(92vh, 590px)">

        {# ── HEADER ────────────────────────────────── #}
        <div class="shrink-0">

            {# Drag pill mobile — centré, espacé #}
            <div class="flex justify-center pt-3.5 pb-0 sm:hidden">
                <div class="w-10 h-1 bg-gray-200 rounded-full"></div>
            </div>

            {# Titre + bouton fermeture #}
            <div class="flex items-center justify-between px-4 pt-4 sm:pt-5 pb-0">
                <div class="flex items-center gap-2.5 min-w-0">
                    <div class="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with {
                            name: 'bubul-moodia',
                            size: 'sm',
                            colorPrimary: 'primary',
                            colorSecondary: 'primary'
                        } only %}
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-bold text-gray-900 leading-tight select-none">Ajouter dans Moodia</p>
                        <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">Choisissez un cours et une section</p>
                    </div>
                </div>
                <button type="button"
                        data-action="click->shared--add-to-moodia#close"
                        class="ml-3 w-8 h-8 flex items-center justify-center rounded-xl text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all cursor-pointer shrink-0">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>

            {# Card source — ce qu'on ajoute #}
            <div class="mx-4 mt-4 mb-4 flex items-center gap-3 px-3.5 py-3 rounded-2xl {{ sourceColorBg ? '' : 'bg-primary/5 border border-primary/10' }}"
                 {% if sourceColorBg %}style="background: {{ sourceColorBg }};"{% endif %}>
                <div class="w-9 h-9 rounded-xl bg-white shadow-sm flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: sourceIcon,
                        size: 'sm',
                        colorPrimary: sourceColorPrimary ?? 'primary',
                        colorSecondary: sourceColorPrimary ?? 'primary'
                    } only %}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-gray-900 truncate leading-snug"
                       data-shared--add-to-moodia-target="podcastName">…</p>
                    <p class="text-[11px] text-gray-500 leading-tight mt-0.5">{{ sourceLabel }}</p>
                </div>
                <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center shrink-0">
                    <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="text-green-600">
                        <polyline points="20,6 9,17 4,12"/>
                    </svg>
                </div>
            </div>

            {# Indicateur d'étapes (rendu par JS) #}
            <div class="px-5 pb-4 border-b border-gray-100"
                 data-shared--add-to-moodia-target="breadcrumb"></div>
        </div>

        {# ── CORPS SCROLLABLE ──────────────────────── #}
        <div class="flex-1 overflow-y-auto min-h-0">

            {# Étape 1 : Cours #}
            <div data-shared--add-to-moodia-target="step1" class="p-3">
                <div class="relative mb-2">
                    <div class="absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none">
                        <svg width="13" height="13" 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 un cours..."
                           class="w-full pl-9 pr-4 py-2.5 text-sm bg-gray-50 border border-transparent rounded-xl placeholder:text-gray-400 transition-all focus:outline-none focus:bg-white focus:border-primary/30 focus:ring-2 focus:ring-primary/10"
                           data-shared--add-to-moodia-target="courseSearch"
                           data-action="input->shared--add-to-moodia#filterCourses">
                </div>
                <div data-shared--add-to-moodia-target="courseList"></div>
            </div>

            {# Étape 2 : Section #}
            <div data-shared--add-to-moodia-target="step2" class="p-3" style="display:none">
                <div data-shared--add-to-moodia-target="sectionList"></div>

            </div>

            {# Étape 3 : Position #}
            <div data-shared--add-to-moodia-target="step3" class="px-4 pb-4 pt-3" style="display:none">
                <p class="text-xs text-gray-400 mb-3">Sélectionnez où insérer l'audio dans la section.</p>
                <div data-shared--add-to-moodia-target="positionList" class="space-y-1.5"></div>
            </div>

        </div>

        {# ── FOOTER ───────────────────────────────── #}
        <div class="shrink-0 px-4 py-3.5 bg-white border-t border-gray-100 flex items-center justify-between gap-3">
            <button type="button"
                    data-action="click->shared--add-to-moodia#close"
                    class="text-sm font-semibold text-gray-400 hover:text-gray-600 transition-colors cursor-pointer px-3 py-2 rounded-xl hover:bg-gray-50 shrink-0 whitespace-nowrap">
                Annuler
            </button>
            {% include '_atoms/button/button.html.twig' with {
                label: submitLabel,
                variant: 'primary',
                size: 'sm',
                icon: submitIcon,
                attr: {
                    'data-shared--add-to-moodia-target': 'submitBtn',
                    'data-action': 'click->shared--add-to-moodia#submit',
                    'disabled': true
                }
            } only %}
        </div>

    </div>
</div>