{% extends 'sam/layout.html.twig' %}

{% block title %}{{ moodleUser.fullname }} - Stagiaire - SAM{% endblock %}

{% block sam_body %}
<div data-controller="sam--user-detail sam--user-crud"
     data-sam--user-detail-sync-url-value="{{ path('app_sam_users_detail_sync', {id: moodleUser.moodleId}) }}"
     data-sam--user-crud-api-url-value="{{ path('api_moodlev5_moodle_users_list') }}">

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {# ══════════════════════════════════════════════════════════════
           BREADCRUMB
           ══════════════════════════════════════════════════════════════ #}
        {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
            showHome: false,
            items: [
                { label: 'Dashboard', href: path('app_sam_index') },
                { label: 'Stagiaires', href: path('app_sam_users') },
                { label: moodleUser.fullname }
            ],
            class: 'mb-6'
        } %}

        {# ══════════════════════════════════════════════════════════════
           HERO CARD — identité + actions + KPI strip (pattern course_detail)
           ══════════════════════════════════════════════════════════════ #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-10">
            <div class="p-7">

                {# Identité + actions #}
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-6">

                    <div class="flex items-start gap-4 flex-1 min-w-0">
                        {% include '_atoms/avatar/avatar.html.twig' with {
                            initials: (moodleUser.firstname|slice(0,1) ~ moodleUser.lastname|slice(0,1))|upper,
                            size: 'xl',
                            rounded: 'xl',
                            variant: moodleUser.suspended ? 'gray' : 'primary'
                        } only %}

                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap mb-1">
                                <h1 class="text-2xl font-bold font-secondary text-gray-900">{{ moodleUser.fullname }}</h1>
                                {% if moodleUser.suspended %}
                                    {% include '_atoms/badge/badge.html.twig' with { label: 'Inactif', variant: 'error', dot: true, size: 'sm' } %}
                                {% else %}
                                    {% include '_atoms/badge/badge.html.twig' with { label: 'Actif', variant: 'success', dot: true, size: 'sm' } %}
                                {% endif %}
                            </div>
                            <div class="flex flex-wrap items-center gap-3 mb-2">
                                <span class="inline-flex items-center gap-1.5 text-sm text-gray-500">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'mail', size: 'sm', color: 'gray' } only %}
                                    {{ moodleUser.email }}
                                </span>
                                <span class="inline-flex items-center gap-1.5 text-sm text-gray-400">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'sm', color: 'gray' } only %}
                                    <code class="bg-gray-100 px-1.5 py-0.5 rounded font-mono text-xs">@{{ moodleUser.username }}</code>
                                </span>
                            </div>
                            {% if userCohorts|length > 0 %}
                                <div class="flex flex-wrap items-center gap-1.5">
                                    <span class="text-sm text-gray-400 font-medium">Cohortes :</span>
                                    {% for cohort in userCohorts %}
                                        <a href="{{ path('app_sam_cohorts_detail', {id: cohort.moodleId}) }}" class="hover:opacity-75 transition-opacity">
                                            {% include '_atoms/badge/badge.html.twig' with { label: cohort.name, variant: 'cohorts', size: 'sm' } %}
                                        </a>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    {# Actions — même style que course_detail (h-10, soft colors) #}
                    <div class="flex items-center gap-2 shrink-0">

                        {# Sync #}
                        <button type="button"
                                class="inline-flex items-center gap-2 h-10 px-4 text-sm font-semibold rounded-lg bg-cohorts/10 text-cohorts hover:bg-cohorts/20 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                                data-action="click->sam--user-detail#sync"
                                data-sam--user-detail-target="syncBtn">
                            <span data-sam--user-detail-target="syncIcon" class="inline-flex shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'refresh', size: 'sm', color: 'cohorts' } only %}
                            </span>
                            <span data-sam--user-detail-target="syncLabel">Synchroniser</span>
                        </button>

                        {# Toggle #}
                        <button type="button"
                                class="inline-flex items-center gap-2 h-10 px-4 text-sm font-semibold rounded-lg transition-all cursor-pointer {{ moodleUser.suspended ? 'bg-success/10 text-success hover:bg-success/20' : 'bg-warning/10 text-warning hover:bg-warning/20' }}"
                                data-action="click->sam--user-crud#toggleUser"
                                data-user-id="{{ moodleUser.moodleId }}"
                                data-fullname="{{ moodleUser.fullname }}"
                                data-suspended="{{ moodleUser.suspended ? '1' : '0' }}">
                            {% include '_atoms/icon/icon.html.twig' with { name: moodleUser.suspended ? 'eye' : 'lock', size: 'sm', color: 'current' } only %}
                            {{ moodleUser.suspended ? 'Activer' : 'Désactiver' }}
                        </button>

                        {# Modifier — icon only #}
                        <button type="button"
                                class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all cursor-pointer"
                                data-tooltip="Modifier"
                                data-action="click->sam--user-crud#openEditModal"
                                data-user-id="{{ moodleUser.moodleId }}"
                                data-username="{{ moodleUser.username }}"
                                data-email="{{ moodleUser.email }}"
                                data-firstname="{{ moodleUser.firstname }}"
                                data-lastname="{{ moodleUser.lastname }}">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'sm', color: 'current' } only %}
                        </button>

                        {# Supprimer — icon only #}
                        <button type="button"
                                class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-error/10 text-error hover:bg-error/20 transition-all cursor-pointer"
                                data-tooltip="Supprimer"
                                data-action="click->sam--user-crud#openDeleteModal"
                                data-user-id="{{ moodleUser.moodleId }}"
                                data-fullname="{{ moodleUser.fullname }}">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'trash', size: 'sm', color: 'current' } only %}
                        </button>

                    </div>
                </div>

                {# KPI strip — intégré dans le hero card, même pattern que course_detail #}
                <div class="mt-6 pt-5 border-t border-gray-100 grid grid-cols-2 sm:grid-cols-4 gap-0 divide-x divide-gray-100">
                    <div class="flex items-center gap-3 pr-4">
                        <div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'book', size: 'md', color: 'gray' } only %}
                        </div>
                        <div>
                            <div class="text-xl font-bold text-gray-900">{{ globalProgress.courses_count }}</div>
                            <div class="text-sm text-gray-400">Cours inscrits</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 px-4">
                        <div class="w-9 h-9 rounded-lg bg-success/10 flex items-center justify-center shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'md', color: 'success' } only %}
                        </div>
                        <div>
                            <div class="text-xl font-bold text-gray-900">{{ globalProgress.completed }}<span class="text-sm font-normal text-gray-400">/{{ globalProgress.total }}</span></div>
                            <div class="text-sm text-gray-400">Activités validées</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 px-4">
                        <div class="w-9 h-9 rounded-lg bg-warning/10 flex items-center justify-center shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'clock', size: 'md', color: 'warning' } only %}
                        </div>
                        <div>
                            <div class="text-xl font-bold text-gray-900">{{ totalTimeFormatted ?: '—' }}</div>
                            <div class="text-sm text-gray-400">Apprentissage</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 pl-4">
                        <div class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'chart', size: 'md', color: 'primary' } only %}
                        </div>
                        <div>
                            <div class="text-xl font-bold text-primary">{{ globalProgress.percentage|number_format(0) }}%</div>
                            <div class="text-sm text-gray-400">Progression globale</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {# ══════════════════════════════════════════════════════════════
           GRAPHIQUES
           ══════════════════════════════════════════════════════════════ #}
        {% embed '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Analyse de l\'apprentissage',
            subtitle: 'Activité récente et progression par cours',
            icon: 'presentation-graph',
            iconColor: 'success'
        } %}
            {% block right %}{% endblock %}
        {% endembed %}

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-100">
                    <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'chart', size: 'sm', color: 'gray' } only %}
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-800">Progression journalière</h3>
                        <p class="text-xs text-gray-400 mt-0.5">Complétions d'activités jour par jour</p>
                    </div>
                </div>
                <div class="p-5" style="position:relative;height:220px;min-height:220px;max-height:220px;">
                    {{ render_chart(dailyChart, {'data-controller': ''}) }}
                </div>
            </div>
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-100">
                    <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'presentation-graph', size: 'sm', color: 'gray' } only %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <h3 class="text-sm font-semibold text-gray-800">Évolution de la progression</h3>
                        <p class="text-xs text-gray-400 mt-0.5">60 derniers jours · par cours</p>
                    </div>
                    {% if hiddenCoursesCount > 0 %}
                        <span class="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full shrink-0">+{{ hiddenCoursesCount }} autre{{ hiddenCoursesCount > 1 ? 's' : '' }}</span>
                    {% endif %}
                </div>
                <div class="p-5" style="position:relative;height:220px;min-height:220px;max-height:220px;">
                    {{ render_chart(progressionLineChart, {'data-controller': ''}) }}
                </div>
            </div>
        </div>

        {# ══════════════════════════════════════════════════════════════
           ACCORDÉON DES COURS
           Le data-controller englobe le section-divider pour que les
           boutons dans {% block right %} soient dans le scope Stimulus
           ══════════════════════════════════════════════════════════════ #}
        {% if coursesData|length == 0 %}
            {% embed '_molecules/section-divider/section-divider.html.twig' with {
                title: 'Détail des cours',
                subtitle: '0 cours inscrits',
                icon: 'book',
                iconColor: 'warning'
            } %}
                {% block right %}{% endblock %}
            {% endembed %}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm mb-8">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucune inscription',
                    description: 'Cet utilisateur n\'est inscrit à aucun cours',
                    icon: 'book'
                } %}
            </div>
        {% else %}
            <div data-controller="sam--accordion" class="mb-8">
                {% embed '_molecules/section-divider/section-divider.html.twig' with {
                    title: 'Détail des cours',
                    subtitle: coursesData|length ~ ' cours inscrits',
                    icon: 'book',
                    iconColor: 'warning'
                } %}
                    {% block right %}
                        <button type="button"
                                class="inline-flex items-center gap-1.5 text-sm font-medium text-gray-500 hover:text-gray-800 transition-colors"
                                data-action="click->sam--accordion#toggleAll"
                                data-sam--accordion-target="toggleAllBtn">
                            <span data-icon style="display:inline-flex;transition:transform .3s ease">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'sm', color: 'current' } only %}
                            </span>
                            <span data-label>Tout déplier</span>
                        </button>
                    {% endblock %}
                {% endembed %}

                <div class="space-y-3">
                {% for courseData in coursesData %}
                    {% set course = courseData.course %}
                    {% set progress = courseData.progress %}
                    {% set progressPercent = progress.percentage|default(0) %}
                    {% set progressColor = progressPercent >= 75 ? 'success' : (progressPercent >= 40 ? 'warning' : 'error') %}

                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        {# Course header #}
                        <div class="flex items-center gap-4 px-5 py-4 cursor-pointer hover:bg-gray-50 transition-colors select-none"
                             data-action="click->sam--accordion#toggle"
                             data-item-id="course-{{ course.id }}"
                             data-level="course"
                             data-sam--accordion-target="courseToggle">

                            <div class="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'book', size: 'sm', color: 'primary' } only %}
                            </div>

                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <h3 class="text-sm font-semibold text-gray-900 truncate">{{ course.fullname }}</h3>
                                    <code class="text-xs text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded font-mono shrink-0">{{ course.shortname }}</code>
                                </div>
                                <div class="flex items-center gap-1.5 mt-1.5 flex-wrap">
                                    {# Sections count #}
                                    <span class="inline-flex items-center gap-1 text-xs text-gray-400 bg-gray-50 border border-gray-100 px-2 py-0.5 rounded-full">
                                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/></svg>
                                        {{ courseData.sections|length }} section{{ courseData.sections|length > 1 ? 's' : '' }}
                                    </span>
                                    {# Completed activities #}
                                    {% set completedColor = progress.completed == progress.total and progress.total > 0 ? 'text-success bg-success/10 border-success/20' : 'text-gray-500 bg-gray-50 border-gray-100' %}
                                    <span class="inline-flex items-center gap-1 text-xs border px-2 py-0.5 rounded-full {{ completedColor }}">
                                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                        {{ progress.completed }}/{{ progress.total }}
                                    </span>
                                    {# Time spent #}
                                    {% if courseData.timeSpent is defined and courseData.timeSpent > 0 %}
                                        <span class="inline-flex items-center gap-1 text-xs text-gray-500 bg-gray-50 border border-gray-100 px-2 py-0.5 rounded-full">
                                            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                            {{ courseData.timeFormatted|default('0 min') }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="flex items-center gap-3 shrink-0">
                                {% include '_molecules/progress-ring/progress-ring.html.twig' with {
                                    value: progressPercent,
                                    size: 'sm',
                                    variant: progressColor,
                                    thickness: 'normal',
                                    animate: false
                                } only %}
                                <div class="sam-accordion__icon text-gray-400" style="transition:transform .3s ease">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <polyline points="6 9 12 15 18 9"/>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        {# Course content — sections #}
                        <div class="sam-accordion__content border-t border-gray-100"
                             data-content-id="course-{{ course.id }}"
                             data-level="course"
                             style="overflow:hidden;max-height:0;transition:max-height .3s ease">

                            {% if courseData.sections|length == 0 %}
                                <div class="flex items-center gap-2 px-5 py-4 text-sm text-gray-400">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'sm', color: 'gray' } only %}
                                    Aucune section
                                </div>
                            {% else %}
                                {% if courseData.sections|length > 1 %}
                                    <div class="flex justify-end px-5 py-2 border-b border-gray-50">
                                        <button type="button"
                                                class="inline-flex items-center gap-1 text-xs font-medium text-gray-400 hover:text-gray-700 transition-colors"
                                                data-action="click->sam--accordion#expandCourseSections">
                                            <span data-icon style="display:inline-flex;transition:transform .3s ease">
                                                {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: 'current' } only %}
                                            </span>
                                            <span data-label>Tout déplier</span>
                                        </button>
                                    </div>
                                {% endif %}
                                <div class="space-y-2 p-4">
                                {% for sectionData in courseData.sections %}
                                    {% include '_molecules/section-accordion-item/section-accordion-item.html.twig' with {
                                        section: sectionData.section,
                                        sectionProgress: sectionData.progress,
                                        activities: sectionData.activities
                                    } only %}
                                {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        {% endif %}

        {# ══════════════════════════════════════════════════════════════
           DERNIÈRES ACTIVITÉS COMPLÉTÉES
           ══════════════════════════════════════════════════════════════ #}
        {% if recentCompletions|length > 0 %}
            {% embed '_molecules/section-divider/section-divider.html.twig' with {
                title: 'Dernières activités complétées',
                subtitle: recentCompletions|length ~ ' activités récentes',
                icon: 'check-circle',
                iconColor: 'success'
            } %}
                {% block right %}{% endblock %}
            {% endembed %}

            <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-8">
                {% for completion in recentCompletions %}
                    <div class="flex items-center gap-4 px-5 py-3.5 border-b border-gray-100 last:border-b-0 {{ loop.index is odd ? 'bg-white' : 'bg-gray-50/40' }}">
                        <div class="w-7 h-7 rounded-lg bg-success/10 flex items-center justify-center shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'xs', color: 'success' } only %}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-gray-900 truncate">{{ completion.activity.name }}</div>
                            <div class="text-xs text-gray-500 truncate">{{ completion.course.fullname }}</div>
                        </div>
                        <div class="text-xs text-gray-400 shrink-0">
                            {{ completion.completedAt ? completion.completedAt|date('d/m/Y à H:i') : '-' }}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        {# Footer #}
        <footer class="text-center text-xs text-gray-400 py-4">
            &copy; Bubul {{ "now"|date("Y") }} — Synchronisé le {{ moodleUser.syncedAt|date('d/m/Y à H:i') }}
        </footer>

    </main>

    {# ══════════════════════════════════════════════════════════════
       MODAL ÉDITION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--user-crud-target="modal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--user-crud#closeModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-lg z-10">
            <div class="px-6 pt-5 pb-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'sm', color: 'primary' } only %}
                    </div>
                    <h2 class="text-base font-semibold text-gray-900" data-sam--user-crud-target="modalTitle">Modifier le stagiaire</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--user-crud#closeModal' }
                } only %}
            </div>

            <form data-sam--user-crud-target="form" data-action="submit->sam--user-crud#submit">
                <div class="px-6 py-5 space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="user-firstName" class="block text-sm font-medium text-gray-700 mb-1">Prénom *</label>
                            <input type="text" id="user-firstName" name="firstName"
                                   class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
                                   required>
                        </div>
                        <div>
                            <label for="user-lastName" class="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
                            <input type="text" id="user-lastName" name="lastName"
                                   class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
                                   required>
                        </div>
                    </div>
                    <div>
                        <label for="user-email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                        <input type="email" id="user-email" name="email"
                               class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
                               required>
                    </div>
                    <div>
                        <label for="user-username" class="block text-sm font-medium text-gray-700 mb-1">Nom d'utilisateur *</label>
                        <input type="text" id="user-username" name="username"
                               class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
                               required>
                    </div>
                    <div data-sam--user-crud-target="passwordGroup" style="display:none;">
                        <label for="user-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
                        <input type="password" id="user-password" name="password"
                               class="w-full px-3 py-2 text-sm border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all">
                    </div>
                </div>
                <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Annuler',
                        variant: 'ghost',
                        size: 'md',
                        attr: {'data-action': 'click->sam--user-crud#closeModal'}
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Enregistrer',
                        variant: 'primary',
                        size: 'md',
                        icon: 'check',
                        type: 'submit',
                        attr: {'data-sam--user-crud-target': 'submitBtn'}
                    } %}
                </div>
            </form>
        </div>
    </div>

    {# ══════════════════════════════════════════════════════════════
       MODAL SUPPRESSION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--user-crud-target="deleteModal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--user-crud#closeDeleteModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm z-10">
            <div class="px-6 pt-5 pb-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-error/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'warning', size: 'sm', color: 'error' } only %}
                    </div>
                    <h2 class="text-base font-semibold text-gray-900">Confirmer la suppression</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--user-crud#closeDeleteModal' }
                } only %}
            </div>
            <div class="px-6 py-5 space-y-3">
                <p class="text-sm text-gray-600">
                    Êtes-vous sûr de vouloir supprimer
                    <strong class="text-gray-900" data-sam--user-crud-target="deleteUserName">{{ moodleUser.fullname }}</strong> ?
                </p>
                <p class="text-xs text-error/80 bg-error/5 border border-error/20 rounded-lg px-3 py-2">
                    Cette action désactivera l'utilisateur sur Moodle.
                </p>
            </div>
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler',
                    variant: 'ghost',
                    size: 'md',
                    attr: {'data-action': 'click->sam--user-crud#closeDeleteModal'}
                } %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Supprimer',
                    variant: 'error',
                    size: 'md',
                    icon: 'trash',
                    attr: {
                        'data-action': 'click->sam--user-crud#confirmDelete',
                        'data-sam--user-crud-target': 'deleteBtn'
                    }
                } %}
            </div>
        </div>
    </div>

</div>
{% endblock %}