{#
 # ============================================================================
 # PAGE: MOODIA GENERATION — Design "Ring + Step Pills" (v2)
 # ============================================================================
 #
 # 2 couches :
 #   FOND   — Gradient bleu pastel + glows bleus diffus
 #   CONTENU — 2 colonnes : grand ring loader (gauche) + step pills (droite)
 #
 # ============================================================================
 # STIMULUS CONTROLLER
 # ============================================================================
 #
 # data-controller="moodia--generation"
 # Values: streamUrl, editorUrl
 # Targets: status, ringBar, ringGlow, pct, elapsed,
 #          stepCircle, stepConnector,
 #          mainContent, error, errorText,
 #          bottomBar, timeRemaining, actionBtn
 #
 #}

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

{% block show_sidebar %}false{% endblock %}

{% block title %}Moodia - Génération du cours{% endblock %}

{% block meta_description %}Génération de votre cours Moodle en temps réel avec l'IA.{% endblock %}

{% block body %}

<style>
    /* ── Background ── */
    .gen-bg {
        position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
        background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 30%, #FFFFFF 70%, #F0F9FF 100%);
    }
    .gen-glow {
        position: absolute; border-radius: 50%;
    }
    .gen-glow-a {
        width: 700px; height: 700px; top: -18%; left: -12%;
        background: radial-gradient(circle, rgba(12,129,228,0.10) 0%, rgba(12,129,228,0.04) 40%, transparent 70%);
        filter: blur(60px);
    }
    .gen-glow-b {
        width: 550px; height: 550px; bottom: -14%; right: -8%;
        background: radial-gradient(circle, rgba(61,158,235,0.08) 0%, rgba(61,158,235,0.03) 45%, transparent 70%);
        filter: blur(80px);
    }
    .gen-glow-c {
        width: 400px; height: 400px; top: 35%; left: 50%; transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(12,129,228,0.05) 0%, transparent 65%);
        filter: blur(50px);
    }
    .gen-glow-d {
        width: 300px; height: 300px; top: 10%; right: 20%;
        background: radial-gradient(circle, rgba(10,107,196,0.06) 0%, transparent 60%);
        filter: blur(70px);
    }

    /* ── Layout ── */
    .gen-wrap {
        position: relative; z-index: 1;
        min-height: 100vh;
        display: flex; align-items: center; justify-content: center;
        padding: 2rem; gap: 5rem;
    }

    /* ═══ LEFT — Ring Loader ═══ */
    .gen-loader { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
    .gen-ring-box { position: relative; width: 400px; height: 400px; }
    .gen-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .gen-ring-track { fill: none; stroke: rgb(12 129 228 / 0.07); stroke-width: 5.5; }
    .gen-ring-bar {
        fill: none; stroke: url(#gen-grad1);
        stroke-width: 6; stroke-linecap: round;
        stroke-dasharray: 753.98; stroke-dashoffset: 753.98;
    }
    .gen-ring-glow {
        fill: none; stroke: url(#gen-grad1);
        stroke-width: 16; stroke-linecap: round;
        stroke-dasharray: 753.98; stroke-dashoffset: 753.98;
        opacity: 0.12; filter: blur(8px);
    }
    .gen-ring-inner {
        position: absolute; inset: 0;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
    }
    .gen-pct {
        font-family: var(--font-secondary, 'Poppins', sans-serif); font-weight: 700;
        font-size: 4.2rem; color: var(--color-primary-dark, #0A6BC4);
        line-height: 1; transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        letter-spacing: -0.02em;
    }
    .gen-pct i { font-style: normal; font-size: 1.6rem; font-weight: 500; opacity: 0.45; }
    .gen-lbl {
        font-family: var(--font-secondary, 'Poppins', sans-serif); font-weight: 500;
        font-size: 0.9rem; color: var(--color-secondary, #6B7280);
        margin-top: 0.6rem; text-align: center;
        max-width: 220px; min-height: 2.4em;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-page-title {
        font-size: 0.72rem; color: var(--color-secondary, #6B7280); opacity: 0.8;
        text-align: center; max-width: 180px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        margin-top: 0.15rem; padding: 0 6px;
        transition: opacity 0.3s ease;
    }

    /* Orbits */
    .gen-orb { position: absolute; border-radius: 50%; border: 1px dashed rgb(12 129 228 / 0.10); }
    .gen-orb-1 { inset: -28px; animation: gen-sp 26s linear infinite; }
    .gen-orb-2 { inset: -58px; border-color: rgb(12 129 228 / 0.06); animation: gen-sp 40s linear infinite reverse; }
    .gen-orb-d {
        position: absolute; width: 6px; height: 6px; border-radius: 50%;
        top: -3px; left: 50%; transform: translateX(-50%);
    }
    .gen-orb-1 .gen-orb-d { background: var(--color-primary-light, #3D9EEB); box-shadow: 0 0 10px var(--color-primary-light, #3D9EEB); }
    .gen-orb-2 .gen-orb-d { background: rgb(12 129 228 / 0.3); box-shadow: 0 0 8px rgb(12 129 228 / 0.2); }
    @keyframes gen-sp { to { transform: rotate(360deg); } }

    .gen-tmr {
        display: flex; align-items: center; gap: 0.4rem;
        font-weight: 500; font-size: 0.84rem; color: var(--color-secondary-light, #9CA3AF);
    }
    .gen-tmr svg { opacity: 0.5; }

    /* ═══ RIGHT — Steps ═══ */
    .gen-steps { max-width: 420px; width: 100%; }
    .gen-steps-hd {
        font-family: var(--font-secondary, 'Poppins', sans-serif); font-weight: 600; font-size: 0.95rem;
        color: var(--color-secondary-dark, #4B5563); margin-bottom: 1rem;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .gen-steps-hd svg { color: var(--color-primary, #0C81E4); }

    /* Step pill */
    .gen-st {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.65rem 1rem; border-radius: 9999px;
        border: 1.5px solid transparent; background: transparent;
        margin-bottom: 0.35rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-st.on {
        background: rgb(12 129 228 / 0.05);
        border-color: rgb(12 129 228 / 0.14);
        transform: translateX(5px);
    }
    .gen-st.ok {
        background: rgb(48 147 68 / 0.04);
        border-color: rgb(48 147 68 / 0.16);
    }

    /* Step circle */
    .gen-sc {
        width: 32px; height: 32px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--font-secondary, 'Poppins', sans-serif); font-weight: 600; font-size: 0.8rem;
        color: var(--color-secondary-light, #9CA3AF); background: rgb(12 129 228 / 0.06);
        flex-shrink: 0; position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-st.on .gen-sc {
        background: var(--color-primary, #0C81E4); color: white;
        box-shadow: 0 0 0 4px rgb(12 129 228 / 0.12), 0 2px 8px rgb(12 129 228 / 0.20);
    }
    .gen-st.ok .gen-sc {
        background: var(--color-success, #309344); color: white;
        box-shadow: 0 1px 4px rgb(48 147 68 / 0.15);
    }
    .gen-sc::after {
        content: ''; position: absolute; inset: -5px; border-radius: 50%;
        border: 2px solid transparent; border-top-color: var(--color-primary, #0C81E4);
        opacity: 0; animation: gen-ss 0.85s linear infinite;
        transition: opacity 0.3s;
    }
    .gen-st.on .gen-sc::after { opacity: 1; }
    @keyframes gen-ss { to { transform: rotate(360deg); } }

    .gen-si { flex: 1; min-width: 0; }
    .gen-sn {
        font-family: var(--font-secondary, 'Poppins', sans-serif); font-weight: 500; font-size: 0.84rem;
        color: var(--color-secondary-dark, #4B5563); transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-st.on .gen-sn { color: var(--color-primary-dark, #0A6BC4); font-weight: 600; }
    .gen-st.ok .gen-sn { color: var(--color-success-dark, #267A35); }

    .gen-sd {
        font-size: 0.72rem; color: var(--color-secondary-light, #9CA3AF);
        max-height: 0; overflow: hidden; opacity: 0;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-st.on .gen-sd { max-height: 2em; opacity: 1; margin-top: 3px; }

    .gen-ss-time {
        font-size: 0.7rem; font-weight: 500; color: var(--color-success, #309344);
        opacity: 0; white-space: nowrap; transition: opacity 0.3s;
    }
    .gen-st.ok .gen-ss-time { opacity: 1; }

    .gen-ck { display: none; }
    .gen-st.ok .gen-ck { display: block; }
    .gen-st.ok .gen-nt { display: none; }

    /* Connector */
    .gen-cn {
        width: 1.5px; height: 10px; background: rgb(12 129 228 / 0.10);
        margin-left: calc(1rem + 15px); margin-bottom: 0.35rem;
        border-radius: 1px; transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-cn.ok { background: var(--color-success, #309344); opacity: 0.35; }

    /* Bottom bar */
    .gen-bb {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.62rem 1.15rem; border-radius: 9999px;
        background: white; border: 1.5px solid rgb(12 129 228 / 0.08);
        margin-top: 1.2rem; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 4px rgb(12 129 228 / 0.04);
    }
    .gen-bb.ok { border-color: var(--color-success, #309344); background: rgb(48 147 68 / 0.03); }

    .gen-est {
        display: flex; align-items: center; gap: 0.35rem;
        font-size: 0.8rem; color: var(--color-secondary, #6B7280);
    }
    .gen-est strong { color: var(--color-secondary-dark, #4B5563); font-weight: 500; }
    .gen-est svg { opacity: 0.45; flex-shrink: 0; }

    .gen-bt {
        font-family: var(--font-secondary, 'Poppins', sans-serif); font-weight: 600; font-size: 0.76rem;
        padding: 0.44rem 1.15rem; border-radius: 9999px; border: none;
        cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-bt-g { background: rgb(12 129 228 / 0.06); color: var(--color-secondary, #6B7280); }
    .gen-bt-g:hover { background: rgb(12 129 228 / 0.10); color: var(--color-secondary-dark, #4B5563); }
    .gen-bt-s {
        background: linear-gradient(135deg, var(--color-success-dark, #267A35), var(--color-success, #309344));
        color: white; box-shadow: 0 3px 10px rgb(48 147 68 / 0.25);
    }
    .gen-bt-s:hover { box-shadow: 0 5px 16px rgb(48 147 68 / 0.35); transform: translateY(-1px); }

    /* ── Exit & Success animations ── */
    @keyframes screen-fade-out {
        0% { opacity: 1; transform: scale(1); }
        100% { opacity: 0; transform: scale(0.97) translateY(10px); }
    }
    .screen-exiting {
        animation: screen-fade-out 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
        pointer-events: none;
    }

    /* Success overlay */
    .gen-done {
        position: fixed; inset: 0; z-index: 60;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 1.2rem;
        background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 30%, #FFFFFF 70%, #F0F9FF 100%);
        opacity: 0; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-done.visible { opacity: 1; }

    /* Checkmark circle */
    .gen-done-circle {
        width: 100px; height: 100px; border-radius: 50%;
        background: linear-gradient(135deg, #267A35, #309344);
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 0 0 0 rgb(48 147 68 / 0.25), 0 8px 30px rgb(48 147 68 / 0.20);
        transform: scale(0.6); opacity: 0;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .gen-done.visible .gen-done-circle {
        transform: scale(1); opacity: 1;
        box-shadow: 0 0 0 16px rgb(48 147 68 / 0.08), 0 8px 30px rgb(48 147 68 / 0.20);
    }

    /* Checkmark SVG draw */
    .gen-done-circle svg path {
        stroke-dasharray: 36;
        stroke-dashoffset: 36;
        transition: stroke-dashoffset 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0s;
    }
    .gen-done-circle.drawn svg path {
        stroke-dashoffset: 0;
    }

    /* Title & subtitle */
    .gen-done-title {
        font-family: var(--font-secondary, 'Poppins', sans-serif);
        font-weight: 700; font-size: 1.6rem;
        color: var(--color-secondary-dark, #4B5563);
        opacity: 0; transform: translateY(12px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-done-title.visible { opacity: 1; transform: translateY(0); }

    .gen-done-sub {
        display: flex; align-items: center; gap: 0.5rem;
        font-family: var(--font-secondary, 'Poppins', sans-serif);
        font-weight: 500; font-size: 0.9rem;
        color: var(--color-secondary, #6B7280);
        opacity: 0; transform: translateY(8px);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gen-done-sub.visible { opacity: 1; transform: translateY(0); }

    /* Spinning dot for redirect */
    .gen-done-dot {
        width: 16px; height: 16px; border-radius: 50%;
        border: 2px solid rgb(12 129 228 / 0.15);
        border-top-color: var(--color-primary, #0C81E4);
        animation: gen-ss 0.7s linear infinite;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
        .gen-wrap { flex-direction: column; gap: 2.5rem; padding: 1.5rem 1rem; }
        .gen-ring-box { width: 280px; height: 280px; }
        .gen-pct { font-size: 3rem; }
        .gen-pct i { font-size: 1.3rem; }
        .gen-orb-1 { inset: -20px; }
        .gen-orb-2 { inset: -42px; }
        .gen-steps { max-width: 100%; }
    }

    /* ── Respect de prefers-reduced-motion (accessibilité) ── */
    @media (prefers-reduced-motion: reduce) {
        .gen-orb-1, .gen-orb-2,
        [class^="gen-"], [class*=" gen-"] { animation: none !important; }
        .gen-ring-bar, .gen-ring-glow { transition: none !important; }
    }
</style>

<div class="min-h-screen relative overflow-hidden"
     data-controller="moodia--generation"
     data-moodia--generation-stream-url-value="{{ path('app_moodia_generate_stream') }}"
     data-moodia--generation-editor-url-value="{{ courseUuid ? path('app_moodia_editor', {uuid: courseUuid}) : path('app_moodia') }}"
     data-moodia--generation-list-url-value="{{ path('app_moodia') }}"
     data-moodia--generation-course-duration-value="{{ config.duration|default(0) }}"
     data-moodia--generation-section-url-value="{{ path('app_moodia_content_section') }}"
     data-moodia--generation-intro-url-value="{{ path('app_moodia_content_intro') }}"
     data-moodia--generation-page-url-value="{{ path('app_moodia_content_page') }}"
     data-moodia--generation-section-pages-url-value="{{ path('app_moodia_content_section_pages') }}"
     data-moodia--generation-quiz-url-value="{{ path('app_moodia_content_quiz') }}"
     data-moodia--generation-finalize-url-value="{{ path('app_moodia_content_finalize') }}"
     data-moodia--generation-cancel-url-value="{{ path('app_moodia_content_cancel') }}">

    {# ====================================================================
       BACKGROUND — Gradient bleu pastel + glows diffus
       ==================================================================== #}
    <div class="gen-bg">
        <div class="gen-glow gen-glow-a"></div>
        <div class="gen-glow gen-glow-b"></div>
        <div class="gen-glow gen-glow-c"></div>
        <div class="gen-glow gen-glow-d"></div>
    </div>

    {# ====================================================================
       CONTENU — 2 colonnes
       ==================================================================== #}
    <div class="gen-wrap" data-moodia--generation-target="mainContent">

        {# ── LEFT: Ring Loader ── #}
        <div class="gen-loader">
            <div class="gen-ring-box">
                <div class="gen-orb gen-orb-1"><div class="gen-orb-d"></div></div>
                <div class="gen-orb gen-orb-2"><div class="gen-orb-d"></div></div>
                <svg class="gen-ring-svg" viewBox="0 0 260 260">
                    <defs>
                        <linearGradient id="gen-grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#0A6BC4"/>
                            <stop offset="50%" stop-color="#0C81E4"/>
                            <stop offset="100%" stop-color="#3D9EEB"/>
                        </linearGradient>
                        <linearGradient id="gen-grad2" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#267A35"/>
                            <stop offset="50%" stop-color="#309344"/>
                            <stop offset="100%" stop-color="#34D399"/>
                        </linearGradient>
                    </defs>
                    <circle class="gen-ring-track" cx="130" cy="130" r="120"/>
                    <circle class="gen-ring-glow" cx="130" cy="130" r="120"
                            data-moodia--generation-target="ringGlow"/>
                    <circle class="gen-ring-bar" cx="130" cy="130" r="120"
                            data-moodia--generation-target="ringBar"/>
                </svg>
                <div class="gen-ring-inner">
                    <div class="gen-pct" data-moodia--generation-target="pct"
                         role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
                         aria-label="Progression de la génération du cours">0<i>%</i></div>
                    <div class="gen-lbl" data-moodia--generation-target="status" aria-live="polite">Initialisation…</div>
                    <div class="gen-page-title" data-moodia--generation-target="pageTitle" hidden></div>
                </div>
            </div>
            <div class="gen-tmr">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.3"/><path d="M8 4.5v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
                <span data-moodia--generation-target="elapsed">00:00</span>
            </div>
        </div>

        {# ── RIGHT: Steps ── #}
        <div class="gen-steps">
            <div class="gen-steps-hd">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M2 5h14M2 9h10M2 13h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
                Étapes de génération
            </div>

            {% set steps = [
                {id: 'extraction', label: 'Analyse du document source', desc: 'Extraction du texte et des concepts clés'},
                {id: 'plan', label: 'Structure du cours', desc: 'Organisation du parcours d\'apprentissage'},
                {id: 'content', label: 'Rédaction du contenu', desc: 'Génération de toutes les activités en parallèle'},
                {id: 'done', label: 'Compilation finale', desc: 'Vérification et assemblage du cours'}
            ] %}

            <div>
                {% for step in steps %}
                    {% if not loop.first %}
                        <div class="gen-cn"
                             data-moodia--generation-target="stepConnector"
                             data-connector-index="{{ loop.index0 - 1 }}"></div>
                    {% endif %}
                    <div class="gen-st"
                         data-moodia--generation-target="stepCircle"
                         data-step-id="{{ step.id }}">
                        <div class="gen-sc">
                            <span class="gen-nt">{{ loop.index }}</span>
                            <svg class="gen-ck" width="14" height="14" viewBox="0 0 16 16" fill="none">
                                <path d="M3.5 8l3.5 3.5 5.5-5.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="gen-si">
                            <div class="gen-sn" data-role="label">{{ step.label }}</div>
                            <div class="gen-sd">{{ step.desc }}</div>
                        </div>
                        <div class="gen-ss-time" data-role="time"></div>
                    </div>
                {% endfor %}
            </div>

            <div class="gen-bb" data-moodia--generation-target="bottomBar">
                <div class="gen-est" data-moodia--generation-target="timeRemaining">
                    <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.3"/><path d="M8 4.5v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
                    <span>Temps estimé : <strong>Estimation…</strong></span>
                </div>
                <button class="gen-bt gen-bt-g"
                        data-moodia--generation-target="actionBtn"
                        data-action="click->moodia--generation#handleAction">Annuler</button>
            </div>
        </div>

    </div>

    {# ====================================================================
       SUCCESS OVERLAY — Appears after generation completes
       ==================================================================== #}
    <div class="gen-done"
         data-moodia--generation-target="doneOverlay" hidden>
        <div class="gen-done-circle"
             data-moodia--generation-target="doneCheck">
            <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
                <path d="M12 22l8 8 12-12" stroke="white" stroke-width="3.5"
                      stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
        <div class="gen-done-title"
             data-moodia--generation-target="doneTitle">Votre cours est prêt !</div>
        <div class="gen-done-sub"
             data-moodia--generation-target="doneSub">
            <div class="gen-done-dot"></div>
            Ouverture de l'éditeur…
        </div>
        <ul class="gen-warnings mt-3 text-xs text-amber-600 text-left list-disc pl-4"
            data-moodia--generation-target="warnings"
            hidden></ul>
    </div>

    {# ====================================================================
       MESSAGE D'ERREUR
       ==================================================================== #}
    <div class="fixed inset-x-0 bottom-8 z-50 flex justify-center px-4"
         data-moodia--generation-target="error" hidden>
        <div class="flex items-center gap-4 px-6 py-4 bg-white rounded-2xl shadow-xl border border-error/20 max-w-lg w-full">
            <div class="w-10 h-10 rounded-xl bg-error/10 flex items-center justify-center shrink-0">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'alert',
                    size: 'md',
                    color: 'error'
                } only %}
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-900">Une erreur est survenue</p>
                <p class="text-xs text-gray-500 truncate" data-moodia--generation-target="errorText"></p>
            </div>
            <button type="button"
                    class="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-error
                           bg-error/10 rounded-lg hover:bg-error/20 transition-colors"
                    data-action="click->moodia--generation#retry">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'refresh',
                    size: 'sm',
                    color: 'error'
                } only %}
                Réessayer
            </button>
        </div>
    </div>

    {# ====================================================================
       MODAL DE CONFIRMATION D'ANNULATION
       ==================================================================== #}
    {% embed '_molecules/modal/modal.html.twig' with {
        id: 'cancel-generation-modal',
        title: 'Annuler la génération ?',
        variant: 'warning'
    } %}
        {% block body %}
            <p class="text-sm text-gray-600">La génération est en cours. Si vous annulez maintenant, toute la progression sera perdue.</p>
        {% endblock %}
        {% block footer %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Continuer',
                variant: 'ghost',
                size: 'lg',
                type: 'button',
                attr: { onclick: "closeModal('cancel-generation-modal')" }
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Oui, annuler',
                variant: 'warning',
                size: 'lg',
                icon: 'x',
                type: 'button',
                attr: { 'data-action': 'click->moodia--generation#confirmCancel' }
            } only %}
        {% endblock %}
    {% endembed %}

</div>
{% endblock %}