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

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

{% block title %}{{ course.title ?? 'Éditeur' }} - Moodia{% endblock %}

{% block body %}
{# La barre de navigation fixe occupe le bas de l'écran : le bouton « Revoir le tutoriel »
   irait se poser dessus. On le pousse au-dessus. `:root` et non un conteneur parent — l'hôte
   du tutoriel est inclus depuis base.html.twig, dans un autre sous-arbre du document, et une
   variable CSS ne remonte pas. #}
<style>:root { --tour-bouton-decalage: 60px; }</style>
{# ============================================================================
   MOODIA EDITOR - STUDIO DE CRÉATION (100% Tailwind)
   ============================================================================
   Layout split view : Navigator (280px) + Editor Canvas
   Une seule activité affichée à la fois, navigation fluide
   ============================================================================ #}

{# Solde de tokens : blocage + info-bulle d'upgrade pour la génération d'image (même patron que Pixia/Monalisia) #}
{% set currentPlanSlug = app.user.company ? 'b2b' : (app.user.plan ? app.user.plan.slug : 'freemium') %}
{% set pixiaTooltipHtml %}{% include '_molecules/upgrade-tooltip/upgrade-tooltip.html.twig' with {
    minTokens: pixiaMinTokens, currentPlanSlug: currentPlanSlug, upgradeUrl: path('app_upgrade')
} only %}{% endset %}
{% set monalisiaTooltipHtml %}{% include '_molecules/upgrade-tooltip/upgrade-tooltip.html.twig' with {
    minTokens: monalisiaMinTokens, currentPlanSlug: currentPlanSlug, upgradeUrl: path('app_upgrade')
} only %}{% endset %}

{# Logos + couleurs des outils (depuis la table tool, via les globals tool_details / tool_color_details) #}
{% set pixiaColors = tool_color_details['pixia'] ?? {} %}
{% set monalisiaColors = tool_color_details['monalisia'] ?? {} %}
{% set pxP = pixiaColors.primary ?? '#6366F1' %}
{% set mnP = monalisiaColors.primary ?? '#EC4899' %}
{% set pixiaIconHtml %}{% include '_atoms/icon/icon.html.twig' with { name: (tool_details['pixia'] ?? {}).icon ?? 'pixia', size: 'sm', colorPrimary: pxP, colorSecondary: pixiaColors.secondary ?? pxP } only %}{% endset %}
{% set monalisiaIconHtml %}{% include '_atoms/icon/icon.html.twig' with { name: (tool_details['monalisia'] ?? {}).icon ?? 'monalisia', size: 'sm', colorPrimary: mnP, colorSecondary: monalisiaColors.secondary ?? mnP } only %}{% endset %}

<div class="flex flex-col min-h-screen bg-gray-50"
     style="--navigator-width: 380px; --header-height: 56px;"
     data-controller="moodia--editor"
     data-moodia--editor-course-uuid-value="{{ course.uuid }}"
     data-moodia--editor-save-url-value="{{ path('app_moodia_save_course', {uuid: course.uuid}) }}"
     data-moodia--editor-export-stream-url-value="{{ path('app_moodia_export_mbz_stream', {uuid: course.uuid}) }}"
     data-moodia--editor-generate-audio-url-value="{{ path('app_moodia_generate_audio') }}"
     data-moodia--editor-delete-audio-url-value="{{ path('app_moodia_delete_audio') }}"
     data-moodia--editor-tokens-remaining-value="{{ tokenStats.remaining }}"
     data-moodia--editor-pixia-min-tokens-value="{{ pixiaMinTokens }}"
     data-moodia--editor-monalisia-min-tokens-value="{{ monalisiaMinTokens }}"
     data-moodia--editor-pixia-tooltip-value="{{ pixiaTooltipHtml|trim|e('html_attr') }}"
     data-moodia--editor-monalisia-tooltip-value="{{ monalisiaTooltipHtml|trim|e('html_attr') }}"
     data-moodia--editor-pixia-icon-value="{{ pixiaIconHtml|trim|e('html_attr') }}"
     data-moodia--editor-monalisia-icon-value="{{ monalisiaIconHtml|trim|e('html_attr') }}"
     data-moodia--editor-pixia-bg-value="{{ pixiaColors.bg ?? '' }}"
     data-moodia--editor-monalisia-bg-value="{{ monalisiaColors.bg ?? '' }}"
     data-moodia--editor-pixia-primary-value="{{ pixiaColors.primary ?? '' }}"
     data-moodia--editor-monalisia-primary-value="{{ monalisiaColors.primary ?? '' }}">

    {# ========================================================================
       DONNÉES DU COURS (JSON caché)
       ======================================================================== #}
    <script type="application/json" data-moodia--editor-target="courseData">
        {{ courseData|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_HEX_AMP'))|raw }}
    </script>

    {# ========================================================================
       HEADER - 100% Tailwind
       ======================================================================== #}
    <header class="sticky top-0 z-40 flex items-center gap-2 sm:gap-4 px-4 h-14 bg-white border-b border-gray-200">
        {# Retour avec tooltip explicite #}
        <a href="{{ path('app_moodia') }}"
           class="flex items-center justify-center w-9 h-9 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
            {% include '_atoms/icon/icon.html.twig' with { name: 'arrow-left', size: 'sm' } only %}
        </a>

        {# Titre éditable avec indication #}
        <div class="flex-1 min-w-0 relative group">
            <input type="text"
                   class="w-full px-3 py-1.5 text-lg font-semibold font-[Poppins] text-gray-900 bg-transparent border-2 border-transparent rounded-lg outline-none hover:bg-gray-50 focus:bg-white focus:border-primary transition-all"
                   value="{{ course.title }}"
                   placeholder="Cliquez pour modifier le titre du cours"
                   data-moodia--editor-target="courseTitle"
                   data-action="input->moodia--editor#updateCourseTitle">
            <span class="absolute -bottom-5 left-3 text-xs text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                Cliquez pour modifier le titre
            </span>
        </div>

        {# Statut sauvegarde - Design épuré #}
        <div class="flex items-center gap-2 px-2.5 py-1.5 rounded-full bg-gray-50 text-xs text-gray-500 transition-all"
             data-moodia--editor-target="saveStatus">
            <span class="relative flex h-2 w-2" data-moodia--editor-target="statusDot">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-success"></span>
            </span>
            <span class="hidden sm:inline" data-moodia--editor-target="statusText">Enregistré</span>
        </div>

        {# Export MBZ : icône seule < sm, texte complet ≥ sm #}
        {# `data-tour-step` porté par un conteneur : l'atome bouton n'accepte pas d'attribut
           arbitraire hors de `attr`, et l'envelopper est moins intrusif que de l'y ajouter. #}
        <div data-tour-step="moodia-exporter" class="flex-shrink-0">
        {% include '_atoms/button/button.html.twig' with {
            label: 'Export MBZ',
            variant: 'primary',
            size: 'md',
            icon: 'download',
            mobileIconOnly: true,
            mobileBreakpoint: 'sm',
            attr: {
                'data-moodia--editor-target': 'exportBtn',
                'data-action': 'click->moodia--editor#exportMbz',
            }
        } only %}
        </div>
    </header>

    {# ========================================================================
       LAYOUT SPLIT VIEW - 100% Tailwind
       ======================================================================== #}
    <div class="flex flex-1 h-[calc(100vh-var(--header-height))] overflow-hidden">

        {# ====================================================================
           NAVIGATOR - Sidebar fixe style File Explorer
           ==================================================================== #}
        <aside class="fixed top-14 left-0 bottom-0 flex flex-col w-[380px] bg-white border-r border-gray-200 z-20
                      -translate-x-full lg:translate-x-0 transition-transform duration-200 max-lg:z-30"
               data-moodia--editor-target="navigator"
               data-tour-step="moodia-structure">

            {# Header Navigator #}
            <div class="flex items-center justify-between px-4 h-12 text-xs font-semibold uppercase tracking-wider text-gray-400 border-b border-gray-100 shadow-sm relative z-[1]">
                <div class="flex items-center gap-2">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'folder', size: 'sm', class: 'text-primary' } only %}
                    <span>Structure du cours</span>
                </div>
                {# Replier (desktop) / Fermer le tiroir (mobile) — même icône pour la cohérence #}
                {% include '_atoms/button/button.html.twig' with {
                    icon: 'chevrons-left',
                    variant: 'ghost',
                    size: 'sm',
                    iconOnly: true,
                    attr: {
                        'data-action': 'click->moodia--editor#closeStructure',
                        'data-tooltip': 'Replier la structure',
                        'aria-label': 'Replier la structure'
                    }
                } only %}
            </div>

            {# Contenu navigable avec scroll stylé #}
            <nav class="flex-1 overflow-y-auto py-2 pb-6 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent hover:scrollbar-thumb-gray-300"
                 data-moodia--editor-target="navigatorContent">
                {# Rendu dynamique par JS #}
            </nav>
        </aside>

        {# Overlay mobile #}
        <div class="fixed inset-0 z-20 bg-black/30 opacity-0 pointer-events-none transition-opacity lg:hidden"
             data-moodia--editor-target="navigatorOverlay"
             data-action="click->moodia--editor#toggleNavigator"></div>

        {# ====================================================================
           EDITOR CANVAS - Zone d'édition mono-activité
           ==================================================================== #}
        <main class="flex flex-col flex-1 lg:ml-[380px] overflow-hidden bg-gray-50 transition-[margin] duration-200"
              data-moodia--editor-target="canvas">

            {# Breadcrumb avec molécule #}
            <div class="flex items-center gap-2 px-6 h-12 text-sm text-gray-400 bg-white border-b border-gray-100 sticky top-0 z-20 min-w-0 overflow-hidden"
                 data-moodia--editor-target="breadcrumb">
                {# Ouvrir la structure : toujours visible en mobile ; sur desktop, seulement quand elle est repliée #}
                <span class="flex shrink-0 -ml-2 lg:hidden" data-moodia--editor-target="structureReopen">
                    {% include '_atoms/button/button.html.twig' with {
                        icon: 'chevrons-right',
                        variant: 'ghost',
                        size: 'sm',
                        iconOnly: true,
                        attr: {
                            'data-action': 'click->moodia--editor#openStructure',
                            'data-tooltip': 'Afficher la structure du cours',
                            'aria-label': 'Afficher la structure du cours'
                        }
                    } only %}
                </span>
                <span data-moodia--editor-target="breadcrumbSection" class="min-w-0 truncate hover:text-gray-600 transition-colors cursor-pointer" data-action="click->moodia--editor#goToCurrentSection">Section</span>
                <span class="shrink-0 text-gray-300">/</span>
                <span class="shrink-0 text-gray-900 font-medium" data-moodia--editor-target="breadcrumbActivity">Activité</span>
            </div>

            {# Zone de contenu scrollable #}
            <div class="flex-1 overflow-y-auto pb-20" data-moodia--editor-target="canvasContent">
                <div class="max-w-4xl mx-auto p-6" data-moodia--editor-target="activityContainer">
                    {# Rendu dynamique par JS #}
                </div>
            </div>

            {# Pagination fixe - 100% Tailwind + Atomic Design #}
            <div class="fixed bottom-0 right-0 left-0 lg:left-[380px] z-30 flex items-center justify-between px-6 py-3 bg-white border-t border-gray-100 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] transition-[left] duration-200"
                 data-moodia--editor-target="pagination"
                 data-tour-step="moodia-navigation">

                {# Bouton Précédent #}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Précédent',
                    variant: 'ghost',
                    size: 'md',
                    icon: 'chevron-left',
                    attr: {
                        'data-moodia--editor-target': 'prevBtn',
                        'data-action': 'click->moodia--editor#goToPrev',
                        'disabled': 'disabled'
                    }
                } only %}

                {# Centre : Info pagination #}
                <span class="text-sm font-medium text-gray-500" data-moodia--editor-target="paginationInfo">1 / 1</span>

                {# Bouton Suivant #}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Suivant',
                    variant: 'ghost',
                    size: 'md',
                    icon: 'chevron-right',
                    iconPosition: 'right',
                    attr: {
                        'data-moodia--editor-target': 'nextBtn',
                        'data-action': 'click->moodia--editor#goToNext',
                        'disabled': 'disabled'
                    }
                } only %}
            </div>
        </main>
    </div>

    {# ========================================================================
       TOOLBAR FLOTTANTE - 100% Tailwind
       ======================================================================== #}
    <div class="fixed z-50 hidden items-center gap-1 px-2 py-1.5 rounded-xl bg-gray-900 shadow-xl opacity-0 pointer-events-none transform translate-y-2 scale-95 transition-all duration-150"
         data-moodia--editor-target="floatingToolbar"
         role="toolbar"
         aria-label="Outils de formatage du texte sélectionné">

        {# Groupe : Style de texte #}
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
                data-command="bold"
                data-tooltip="Mettre en GRAS le texte sélectionné (Ctrl+B)">
            <strong class="text-sm">B</strong>
        </button>
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
                data-command="italic"
                data-tooltip="Mettre en ITALIQUE le texte sélectionné (Ctrl+I)">
            <em class="text-sm">I</em>
        </button>
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
                data-command="underline"
                data-tooltip="SOULIGNER le texte sélectionné (Ctrl+U)">
            <u class="text-sm">U</u>
        </button>

        {# Séparateur #}
        <span class="w-px h-5 mx-1 bg-white/20"></span>

        {# Groupe : Titres #}
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors text-xs font-bold"
                data-command="h2"
                data-tooltip="Transformer en TITRE principal (H2)">
            H2
        </button>
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors text-xs font-bold"
                data-command="h3"
                data-tooltip="Transformer en SOUS-TITRE (H3)">
            H3
        </button>

        {# Séparateur #}
        <span class="w-px h-5 mx-1 bg-white/20"></span>

        {# Groupe : Listes #}
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
                data-command="ul"
                data-tooltip="Créer une LISTE À PUCES (•)">
            {% include '_atoms/icon/icon.html.twig' with { name: 'list', size: 'sm', color: 'white' } only %}
        </button>
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors text-xs font-medium"
                data-command="ol"
                data-tooltip="Créer une LISTE NUMÉROTÉE (1. 2. 3.)">
            1.
        </button>

        {# Séparateur #}
        <span class="w-px h-5 mx-1 bg-white/20"></span>

        {# Lien #}
        <button type="button"
                class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
                data-command="link"
                data-tooltip="Ajouter un LIEN vers une page web">
            {% include '_atoms/icon/icon.html.twig' with { name: 'link', size: 'sm', color: 'white' } only %}
        </button>
    </div>

    {# ========================================================================
       MODAL EXPORT - Atomic Design + Animations Premium
       ======================================================================== #}
    <div class="fixed inset-0 z-50 hidden" data-moodia--editor-target="exportModal">
        {# Backdrop #}
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>

        {# Modal Container #}
        <div class="fixed inset-0 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden relative">

                    {# ===== Vue progression ===== #}
                    <div data-moodia--editor-target="exportProgressView">
                        {# Header #}
                        <div class="px-6 py-5 border-b border-primary/10 flex items-start gap-4">
                            <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'download', size: 'lg', color: 'primary' } only %}
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 font-[Poppins]">Export du cours</h3>
                                <p class="text-sm text-gray-500 mt-0.5">Génération du fichier Moodle</p>
                            </div>
                        </div>

                        {# Body - Progress #}
                        <div class="px-6 py-6">
                            <div class="mb-4">
                                <div class="h-3 bg-gray-100 rounded-full overflow-hidden">
                                    <div class="h-full bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end rounded-full transition-all duration-300"
                                         data-moodia--editor-target="exportProgressFill"
                                         style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500" data-moodia--editor-target="exportProgressLabel">Préparation...</span>
                                <span class="font-semibold text-primary" data-moodia--editor-target="exportProgressPercent">0%</span>
                            </div>
                            <p class="text-xs text-gray-400 mt-3">
                                Votre cours est converti au format Moodle (.mbz). Ce fichier pourra être importé directement dans votre plateforme.
                            </p>

                            {# Avertissement tokens insuffisants (caché par défaut) #}
                            <div class="hidden mt-4 flex items-start gap-3 px-4 py-3 bg-amber-50 border border-amber-200 rounded-xl text-sm text-amber-800"
                                 data-moodia--editor-target="exportWarning">
                                <svg class="w-4 h-4 mt-0.5 flex-shrink-0 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                                </svg>
                                <span data-moodia--editor-target="exportWarningText"></span>
                            </div>
                        </div>
                    </div>

                    {# ===== Vue tutoriel (post-export) ===== #}
                    <div class="hidden animate-scale-fade-in" data-moodia--editor-target="exportTutorialView">

                        {# Header succès #}
                        <div class="px-6 pt-6 pb-4 text-center">
                            <div class="mx-auto w-12 h-12 bg-success rounded-full flex items-center justify-center mb-3">
                                <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 6 9 17 4 12"/>
                                </svg>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900">Export réussi !</h3>
                            <p class="text-sm text-gray-500 mt-1">Votre fichier <span class="font-medium text-gray-700">.mbz</span> est prêt</p>
                        </div>

                        {# Étapes d'import Moodle #}
                        <div class="px-6 pb-4">
                            <p class="text-xs font-medium uppercase tracking-wider text-gray-400 mb-3">Comment importer dans Moodle</p>

                            <ol class="space-y-2">
                                <li class="flex items-center gap-3 text-sm">
                                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-xs font-semibold">1</span>
                                    <span class="text-gray-700">Connectez-vous à Moodle en tant qu'admin</span>
                                </li>
                                <li class="flex items-center gap-3 text-sm">
                                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-xs font-semibold">2</span>
                                    <span class="text-gray-700">Administration → Cours → Restaurer</span>
                                </li>
                                <li class="flex items-center gap-3 text-sm">
                                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-xs font-semibold">3</span>
                                    <span class="text-gray-700">Glissez-déposez votre fichier .mbz</span>
                                </li>
                                <li class="flex items-center gap-3 text-sm">
                                    <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-xs font-semibold">4</span>
                                    <span class="text-gray-700">Confirmez et votre cours est en ligne</span>
                                </li>
                            </ol>
                        </div>

                        {# Footer #}
                        <div class="px-6 py-4 border-t border-gray-100">
                            {% include '_atoms/button/button.html.twig' with {
                                label: "C'est compris !",
                                variant: 'success',
                                size: 'lg',
                                width: 'full',
                                icon: 'check',
                                attr: {
                                    'data-action': 'click->moodia--editor#closeExportModal'
                                }
                            } only %}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    {# ========================================================================
       MODAL AJOUT ACTIVITÉ - 100% Tailwind + Atomic Design
       ======================================================================== #}
    <div class="fixed inset-0 z-50 hidden" data-moodia--editor-target="addActivityModal">
        {# Backdrop #}
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" data-action="click->moodia--editor#closeAddModal"></div>

        {# Modal Container #}
        <div class="fixed inset-0 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden relative">
                    {# Header #}
                    <div class="px-6 py-4 border-b border-gray-100 flex items-start justify-between gap-4">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'plus', size: 'md', color: 'primary' } only %}
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 font-[Poppins]">Nouvelle activité</h3>
                                <p class="text-sm text-gray-500 mt-0.5">Choisissez le type</p>
                            </div>
                        </div>
                        {% include '_atoms/close-button/close-button.html.twig' with {
                            attr: { 'data-action': 'click->moodia--editor#closeAddModal' }
                        } only %}
                    </div>

                    {# Body #}
                    <div class="px-5 py-5">
                        <div data-moodia--editor-target="addModalChoices">
                        {# Grille 2 colonnes — items horizontaux homogènes (icône + libellé) #}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-3">
                            {# Page - Bleu #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-blue-200 hover:bg-blue-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="page">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(59,130,246,0.1); color: #3B82F6">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path fill="currentColor" opacity="0.5" d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z"/><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M7.25 10a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-blue-600 leading-tight">Page</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">Texte & médias</p>
                                </div>
                            </button>

                            {# Étiquette - Emerald #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-emerald-200 hover:bg-emerald-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="label">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(16,185,129,0.1); color: #10B981">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path fill="currentColor" opacity="0.5" d="M4.728 16.137C3.183 14.591 2.41 13.819 2.123 12.816c-.288-1.003-.042-2.068.45-4.198l.283-1.228C3.27 5.599 3.476 4.703 4.09 4.09c.613-.614 1.509-.82 3.3-1.234l1.229-.283c2.129-.492 3.194-.737 4.197-.45 1.003.288 1.775 1.06 3.321 2.606l1.83 1.83C20.655 9.247 22 10.591 22 12.262c0 1.671-1.345 3.015-4.034 5.705-2.689 2.689-4.034 4.033-5.705 4.033-1.67 0-3.015-1.344-5.704-4.033z"/><path fill="currentColor" d="M10.124 7.271a2.025 2.025 0 1 1-2.853 2.853 2.025 2.025 0 0 1 2.853-2.853z"/><path fill="currentColor" d="M19.051 12.051 12.072 19.03a.75.75 0 0 1-1.06-1.06l6.979-6.98a.75.75 0 0 1 1.06 1.061z"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-emerald-600 leading-tight">Étiquette</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">Intro courte</p>
                                </div>
                            </button>

                            {# Lien externe - Sky #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-sky-200 hover:bg-sky-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="url">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(14,165,233,0.1); color: #0EA5E9">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path fill="currentColor" opacity="0.5" d="M13.196 14.823a5.476 5.476 0 0 1-7.746 0 5.476 5.476 0 0 1 0-7.746l3.026-3.026a5.476 5.476 0 0 1 7.746 0 5.386 5.386 0 0 1 1.1 6.3l-1.18-1.18a3.476 3.476 0 0 0-.566-4.06 3.476 3.476 0 0 0-4.914 0L8.636 8.137a3.476 3.476 0 0 0 0 4.914 3.5 3.5 0 0 0 .716.541z"/><path fill="currentColor" d="M10.804 9.177a5.476 5.476 0 0 1 7.746 0 5.476 5.476 0 0 1 0 7.746l-3.026 3.026a5.476 5.476 0 0 1-7.746 0 5.386 5.386 0 0 1-1.1-6.3l1.18 1.18a3.476 3.476 0 0 0 .566 4.06 3.476 3.476 0 0 0 4.914 0l3.026-3.026a3.476 3.476 0 0 0 0-4.914 3.5 3.5 0 0 0-.716-.541z"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-sky-600 leading-tight">Lien</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">YouTube, doc…</p>
                                </div>
                            </button>

                            {# Audio - Violet #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-violet-200 hover:bg-violet-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="audio">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(124,58,237,0.1); color: #7C3AED">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path fill="currentColor" opacity="0.5" d="M12 2c-2.21 0-4 1.791-4 4v5a4 4 0 0 0 8 0V6c0-2.209-1.791-4-4-4z"/><path fill="currentColor" d="M18.75 11.25a.75.75 0 0 0-1.5 0a5.25 5.25 0 0 1-10.5 0a.75.75 0 0 0-1.5 0a6.75 6.75 0 0 0 6 6.71V21a.75.75 0 0 0 1.5 0v-3.04a6.75 6.75 0 0 0 6-6.71z"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-violet-600 leading-tight">Audio</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">Narration IA</p>
                                </div>
                            </button>

                            {# Forum - Orange #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-orange-200 hover:bg-orange-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="forum">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(249,115,22,0.1); color: #F97316">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path fill="currentColor" opacity="0.5" d="M12 22C17.523 22 22 17.523 22 12S17.523 2 12 2S2 6.477 2 12c0 1.6.376 3.112 1.043 4.453.178.356.237.763.134 1.148l-.595 2.226c-.259.966.625 1.85 1.591 1.591l2.226-.595a2 2 0 0 1 1.148.134A9.96 9.96 0 0 0 12 22z"/><path fill="currentColor" d="M7.825 12.85a.825.825 0 0 0 0 1.65h6.05a.825.825 0 0 0 0-1.65zm0-3.85a.825.825 0 0 0 0 1.65h8.8a.825.825 0 0 0 0-1.65z"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-orange-600 leading-tight">Forum</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">Débat libre</p>
                                </div>
                            </button>

                            {# Devoir - Indigo #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="assignment">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(99,102,241,0.1); color: #6366F1">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path fill="currentColor" opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14 22H10C6.229 22 4.343 22 3.172 20.828C2 19.657 2 17.771 2 14V10C2 6.229 2 4.343 3.172 3.172C4.343 2 6.239 2 10.03 2c.606 0 1.092 0 1.5.017C11.517 2.097 11.51 2.178 11.509 2.26L11.5 5.095c-.001 1.097-.001 2.066.105 2.848.119.847.38 1.694 1.072 2.385c.691.691 1.538.953 2.385 1.072.782.105 1.751.104 2.848.104L18 11.5h3.957C22 12.034 22 12.69 22 13.563V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22z"/><path fill="currentColor" d="M6 13.75a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5zm0 3.5a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5zm5.509-15.49L11.5 5.095c-.001 1.097-.001 2.066.105 2.848.119.847.38 1.694 1.072 2.385c.691.691 1.538.953 2.385 1.072.782.105 1.751.104 2.848.104L21.957 11.5C21.97 11.655 21.979 11.821 21.985 12H22c0-.268 0-.402-.01-.559-.057-.895-.429-1.92-.959-2.643a8 8 0 0 0-.294-.362c-.792-.949-1.836-2.13-2.747-2.943C17.189 4.776 16.079 3.985 15.11 3.338 14.278 2.783 13.862 2.505 13.291 2.298a6 6 0 0 0-.507-.155C12.4 2.05 12.027 2.017 11.5 2.006z"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-indigo-600 leading-tight">Devoir</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">À remettre</p>
                                </div>
                            </button>

                            {# Quiz - Amber #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-amber-200 hover:bg-amber-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="quiz">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(217,119,6,0.1); color: #D97706">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none"><path fill="currentColor" opacity="0.5" d="m9.153 5.408-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408"/><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-amber-600 leading-tight">Quiz</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">Auto-évaluation</p>
                                </div>
                            </button>

                            {# SCORM - Indigo (logo Scormia) #}
                            <button type="button"
                                    class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 hover:shadow-sm transition-all duration-200 group text-left"
                                    data-action="click->moodia--editor#addActivity" data-type="scorm">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105"
                                     style="background: rgba(79,70,229,0.1); color: #4F46E5">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-scormia', size: 'md', color: 'current' } only %}
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-900 group-hover:text-indigo-600 leading-tight">SCORM</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5 truncate">Module Scormia</p>
                                </div>
                            </button>
                        </div>

                        {# Nouvelle section — séparée, pleine largeur #}
                        <button type="button"
                                class="flex items-center gap-3 w-full px-4 py-3 rounded-xl border border-dashed border-gray-200 hover:border-gray-400 hover:bg-gray-50 transition-all duration-200 group text-left"
                                data-action="click->moodia--editor#addSection">
                            <div class="w-8 h-8 rounded-lg flex-shrink-0 flex items-center justify-center bg-gray-100 text-gray-500 group-hover:bg-gray-200 transition-colors">
                                <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd"/><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z"/></svg>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-700 group-hover:text-gray-900 leading-tight">Nouvelle section</p>
                                <p class="text-xs text-gray-400">Ajouter un groupe d'activités</p>
                            </div>
                        </button>
                        </div>{# /addModalChoices #}

                        {# Panneau SCORM (affiché à la place des choix) : bibliothèque Scormia OU import ZIP #}
                        <div class="hidden" data-moodia--editor-target="addScormPanel">
                            <button type="button"
                                    class="inline-flex items-center gap-1.5 text-xs font-medium text-gray-400 hover:text-gray-600 transition-colors mb-3"
                                    data-action="click->moodia--editor#hideScormPanel">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
                                Retour aux types d'activité
                            </button>

                            {# Voie 1 : choisir un module de la bibliothèque Scormia #}
                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Depuis votre bibliothèque Scormia</p>
                            <div class="relative mb-2">
                                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 10.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z"/></svg>
                                <input type="text" placeholder="Rechercher un module…"
                                       class="w-full text-sm text-gray-700 border border-gray-200 rounded-lg focus:border-indigo-400 focus:ring-0 pl-9 pr-3 py-2 placeholder-gray-300"
                                       data-moodia--editor-target="scormLibrarySearch"
                                       data-action="input->moodia--editor#scormLibraryFilter">
                            </div>
                            <div class="max-h-56 overflow-y-auto rounded-xl border border-gray-100 divide-y divide-gray-50"
                                 data-moodia--editor-target="scormLibraryList">
                                <p class="p-4 text-xs text-gray-400 text-center">Chargement de vos modules…</p>
                            </div>

                            {# Séparateur #}
                            <div class="flex items-center gap-3 my-4">
                                <div class="flex-1 h-px bg-gray-100"></div>
                                <span class="text-[11px] font-medium text-gray-300 uppercase">ou</span>
                                <div class="flex-1 h-px bg-gray-100"></div>
                            </div>

                            {# Voie 2 : importer un paquet ZIP #}
                            <label class="flex items-center gap-3 p-4 rounded-xl border-2 border-dashed border-indigo-200 bg-indigo-50/40 hover:bg-indigo-50 hover:border-indigo-300 transition-colors cursor-pointer"
                                   data-moodia--editor-target="scormDropzone"
                                   data-action="dragover->moodia--editor#scormDragOver dragleave->moodia--editor#scormDragLeave drop->moodia--editor#scormDrop">
                                <div class="w-10 h-10 rounded-xl bg-white border border-indigo-200 flex items-center justify-center shadow-sm shrink-0">
                                    <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[13px] font-semibold text-gray-700 leading-tight">Glissez un paquet SCORM Scormia (.zip)</p>
                                    <p class="text-[11px] text-gray-400 leading-tight mt-0.5">ou cliquez pour choisir un fichier · max 150 Mo</p>
                                </div>
                                <input type="file" accept=".zip,application/zip" class="hidden"
                                       data-moodia--editor-target="scormFileInput"
                                       data-action="change->moodia--editor#scormFileSelected">
                            </label>

                            <p class="hidden mt-3 text-xs font-medium text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2"
                               data-moodia--editor-target="scormError"></p>

                            <div class="hidden mt-3 items-center gap-2 text-xs font-medium text-indigo-600"
                                 data-moodia--editor-target="scormProgress">
                                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
                                Import du paquet en cours…
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# ========================================================================
       MODAL CONFIRMATION SUPPRESSION
       ======================================================================== #}
    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        title:       'Supprimer cette activité ?',
        modalAttr:   {'data-moodia--editor-target': 'deleteModal', 'data-action': 'keydown.esc@window->moodia--editor#closeDeleteModal'},
        cancelAttr:  {'data-action': 'click->moodia--editor#closeDeleteModal'},
        confirmAttr: {'data-action': 'click->moodia--editor#confirmDelete'}
    } only %}
        {% block titleBlock %}
            <h3 class="text-xl font-bold text-gray-900 mb-1.5"
                data-moodia--editor-target="deleteModalTitle">Supprimer cette activité ?</h3>
        {% endblock %}
        {% block description %}
            <p class="text-sm text-gray-500"
               data-moodia--editor-target="deleteModalMessage">Cette action est irréversible. Le contenu de cette activité sera définitivement supprimé.</p>
        {% endblock %}
    {% endembed %}

    {# ========================================================================
       MODAL IMAGE PICKER - Sélection d'image depuis Pixia ou Monalisia
       ======================================================================== #}
    <div class="fixed inset-0 z-[60] hidden" data-moodia--editor-target="pixiaPickerModal">
        {# Backdrop #}
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"
             data-action="click->moodia--editor#closePixiaPicker"></div>

        {# Modal Container #}
        <div class="fixed inset-0 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="w-full max-w-2xl bg-white rounded-2xl shadow-xl overflow-hidden relative flex flex-col max-h-[85vh]">

                    {# Header #}
                    <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between flex-shrink-0">
                        <div class="flex items-center gap-3">
                            <div>
                                <h3 class="text-base font-semibold text-gray-900 font-[Poppins]">Bibliothèque d'images</h3>
                                <p class="text-xs text-gray-400">Choisissez une image à insérer</p>
                            </div>
                        </div>
                        {% include '_atoms/close-button/close-button.html.twig' with {
                            attr: { 'data-action': 'click->moodia--editor#closePixiaPicker' }
                        } only %}
                    </div>

                    {# Onglets Images du cours / Pixia / Monalisia / Importer #}
                    <div class="flex border-b border-gray-100 px-6 flex-shrink-0">
                        <button type="button"
                                class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
                                data-source="course"
                                data-action="click->moodia--editor#switchImagePickerTab"
                                data-moodia--editor-target="imagePickerTab">
                            Images du cours
                        </button>
                        <button type="button"
                                class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
                                data-source="pixia"
                                data-action="click->moodia--editor#switchImagePickerTab"
                                data-moodia--editor-target="imagePickerTab">
                            Pixia
                        </button>
                        <button type="button"
                                class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
                                data-source="monalisia"
                                data-action="click->moodia--editor#switchImagePickerTab"
                                data-moodia--editor-target="imagePickerTab">
                            Monalisia
                        </button>
                        <button type="button"
                                class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
                                data-source="upload"
                                data-action="click->moodia--editor#switchImagePickerTab"
                                data-moodia--editor-target="imagePickerTab">
                            Importer
                        </button>
                    </div>

                    {# Body — grille images ou état vide. Hauteur FIXE (indépendante du contenu)
                       pour que la modale ne change pas de taille selon l'onglet/le nombre d'images. #}
                    <div class="p-5 overflow-y-auto h-[440px] max-h-[60vh]" data-moodia--editor-target="pixiaPickerGrid">
                        {# Rendu dynamique par JS #}
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}