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

{% block title %}Cohortes - SAM{% endblock %}

{% block sam_body %}
<div data-controller="sam--cohort-crud"
     data-sam--cohort-crud-api-url-value="{{ path('api_moodlev5_moodle_cohorts_list') }}"
     data-sam--cohort-crud-users-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: 'Cohortes' }
            ],
            class: 'mb-6'
        } %}

        {# ══════════════════════════════════════════════════════════════
           PAGE HEADER
           ══════════════════════════════════════════════════════════════ #}
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-8"
             data-controller="sam--sync"
             data-sam--sync-url-value="{{ path('app_sam_cohorts_sync') }}"
             data-sam--sync-label-value="cohortes">

            <div>
                <div class="flex items-center gap-3 mb-1">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'xl', color: 'cohorts' } only %}
                    <h1 class="text-2xl font-bold font-secondary text-gray-900">Gestion des cohortes</h1>
                </div>
                <p class="text-base text-gray-500 mt-1">
                    Consultez, modifiez et gérez vos <strong class="text-gray-700">{{ total }}</strong> cohorte{{ total > 1 ? 's' : '' }} Moodle
                </p>
            </div>

            <div class="flex items-center gap-2 flex-shrink-0">
                {# Sync button — keeps custom SVG for spin animation via Stimulus target #}
                <button type="button"
                        class="inline-flex items-center gap-2 h-10 px-4 text-sm font-secondary font-semibold rounded-lg bg-cohorts/10 text-cohorts hover:bg-cohorts/20 transition-all duration-base cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                        data-action="click->sam--sync#sync"
                        data-sam--sync-target="button">
                    <svg data-sam--sync-target="icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M23 4v6h-6M1 20v-6h6"/>
                        <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
                    </svg>
                    <span data-sam--sync-target="label">Synchroniser</span>
                </button>

                {# Create cohort button #}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer une cohorte',
                    variant: 'cohorts',
                    size: 'md',
                    icon: 'plus',
                    iconPosition: 'left',
                    attr: {
                        'data-action': 'click->sam--cohort-crud#openAddModal'
                    }
                } only %}
            </div>
        </div>

        {# ══════════════════════════════════════════════════════════════
           FILTRES
           ══════════════════════════════════════════════════════════════ #}
        {% if cohorts|length > 0 %}

            {# Collecter toutes les formations uniques #}
            {% set allCourses = [] %}
            {% set seenShortnames = [] %}
            {% for cohort in cohorts %}
                {% for course in cohortCourses[cohort.id] ?? [] %}
                    {% if course.shortname not in seenShortnames %}
                        {% set allCourses = allCourses|merge([course]) %}
                        {% set seenShortnames = seenShortnames|merge([course.shortname]) %}
                    {% endif %}
                {% endfor %}
            {% endfor %}

            <div class="mb-6 flex flex-wrap items-center gap-3">

                {# ── Recherche texte ── #}
                <div class="relative flex items-center h-10 flex-1 bg-white border border-gray-200 rounded-lg shadow-sm focus-within:border-cohorts focus-within:ring-2 focus-within:ring-cohorts/20 transition-all">
                    <div class="absolute left-3 inset-y-0 flex items-center pointer-events-none text-gray-400">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'md', color: 'muted' } only %}
                    </div>
                    <input type="text"
                           class="flex-1 h-full pl-10 pr-4 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder-gray-400"
                           placeholder="Rechercher une cohorte..."
                           data-action="input->sam--cohort-crud#applyFilters"
                           data-sam--cohort-crud-target="filterSearch">
                </div>

                {# ── Dropdown Formations ── #}
                {% if allCourses|length > 0 %}
                <div class="relative">
                    <button type="button"
                            class="flex items-center gap-2 h-10 px-3 bg-white border border-gray-200 rounded-lg shadow-sm text-sm text-gray-600 hover:border-gray-300 transition-all cursor-pointer"
                            data-action="click->sam--cohort-crud#toggleCourseDropdown"
                            data-sam--cohort-crud-target="courseDropdownBtn">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'book', size: 'sm', color: 'muted' } only %}
                        <span data-sam--cohort-crud-target="courseDropdownLabel">Formations</span>
                        {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: 'muted' } only %}
                    </button>
                    <div style="display:none"
                         class="absolute top-full left-0 mt-1.5 w-72 bg-white border border-gray-200 rounded-2xl shadow-xl z-30"
                         data-sam--cohort-crud-target="courseDropdownPanel">
                        {# Search inside dropdown #}
                        <div class="p-2 border-b border-gray-100">
                            <div class="relative flex items-center">
                                <div class="absolute left-2.5 inset-y-0 flex items-center pointer-events-none text-gray-400">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'xs', color: 'muted' } only %}
                                </div>
                                <input type="text"
                                       class="w-full h-8 pl-8 pr-3 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-cohorts placeholder-gray-400"
                                       placeholder="Rechercher..."
                                       data-action="input->sam--cohort-crud#filterCourseItems">
                            </div>
                        </div>
                        {# Course list #}
                        <div class="max-h-64 overflow-y-auto py-1">
                            {% for course in allCourses %}
                                <label class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer"
                                       data-item-label="{{ course.fullname|lower }}">
                                    <input type="checkbox"
                                           value="{{ course.shortname|lower }}"
                                           class="w-4 h-4 rounded border-gray-300 cursor-pointer accent-cohorts shrink-0"
                                           data-action="change->sam--cohort-crud#applyFilters">
                                    <div class="w-7 h-7 rounded-lg bg-cohorts/10 flex items-center justify-center shrink-0">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'book', size: 'xs', color: 'cohorts' } only %}
                                    </div>
                                    <span class="text-sm text-gray-700 truncate flex-1">{{ course.fullname }}</span>
                                </label>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}

                {# ── Dropdown Membres ── #}
                <div class="relative">
                    <button type="button"
                            class="flex items-center gap-2 h-10 px-3 bg-white border border-gray-200 rounded-lg shadow-sm text-sm text-gray-600 hover:border-gray-300 transition-all cursor-pointer"
                            data-action="click->sam--cohort-crud#toggleMembersDropdown"
                            data-sam--cohort-crud-target="membersDropdownBtn">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'sm', color: 'muted' } only %}
                        <span data-sam--cohort-crud-target="membersDropdownLabel">Membres</span>
                        {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs', color: 'muted' } only %}
                    </button>
                    <div style="display:none"
                         class="absolute top-full right-0 mt-1.5 w-56 bg-white border border-gray-200 rounded-2xl shadow-xl z-30"
                         data-sam--cohort-crud-target="membersDropdownPanel">
                        <div class="py-1">
                            <label class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="empty" class="w-4 h-4 rounded border-gray-300 cursor-pointer accent-cohorts shrink-0" data-action="change->sam--cohort-crud#applyFilters">
                                <div class="w-7 h-7 rounded-lg bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-400 shrink-0">0</div>
                                <div><div class="text-sm font-medium text-gray-700">Vides</div><div class="text-xs text-gray-400">0 membre</div></div>
                            </label>
                            <label class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="small" class="w-4 h-4 rounded border-gray-300 cursor-pointer accent-cohorts shrink-0" data-action="change->sam--cohort-crud#applyFilters">
                                <div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center shrink-0">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'xs', color: 'cohorts' } only %}
                                </div>
                                <div><div class="text-sm font-medium text-gray-700">Petites</div><div class="text-xs text-gray-400">1 à 10 membres</div></div>
                            </label>
                            <label class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="medium" class="w-4 h-4 rounded border-gray-300 cursor-pointer accent-cohorts shrink-0" data-action="change->sam--cohort-crud#applyFilters">
                                <div class="w-7 h-7 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'xs' } only %}
                                </div>
                                <div><div class="text-sm font-medium text-gray-700">Moyennes</div><div class="text-xs text-gray-400">11 à 50 membres</div></div>
                            </label>
                            <label class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" value="large" class="w-4 h-4 rounded border-gray-300 cursor-pointer accent-cohorts shrink-0" data-action="change->sam--cohort-crud#applyFilters">
                                <div class="w-7 h-7 rounded-lg bg-green-50 flex items-center justify-center shrink-0">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'xs', color: 'success' } only %}
                                </div>
                                <div><div class="text-sm font-medium text-gray-700">Grandes</div><div class="text-xs text-gray-400">Plus de 50 membres</div></div>
                            </label>
                        </div>
                    </div>
                </div>

                {# ── Réinitialiser ── #}
                <button type="button"
                        class="inline-flex items-center gap-1.5 h-10 px-3 text-sm text-gray-500 hover:text-gray-700 transition-colors cursor-pointer"
                        style="display:none"
                        data-action="click->sam--cohort-crud#resetFilters"
                        data-sam--cohort-crud-target="resetFilters">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'x', size: 'sm' } only %}
                    Réinitialiser
                </button>

            </div>
        {% endif %}

        {# ══════════════════════════════════════════════════════════════
           CONTENT — DATA TABLE
           ══════════════════════════════════════════════════════════════ #}
        {% if cohorts|length == 0 %}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucune cohorte trouvée',
                    description: 'Synchronisez les données depuis Moodle ou créez une nouvelle cohorte.',
                    icon: 'users-group'
                } %}
            </div>
        {% else %}

            {# No results message (hidden by default, shown by JS filter) #}
            <div class="hidden justify-center py-16 bg-white rounded-xl border border-gray-200 shadow-sm" data-sam--cohort-crud-target="noResults">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucune cohorte trouvée',
                    description: 'Essayez avec d\'autres termes de recherche.',
                    icon: 'search',
                    variant: 'minimal',
                    size: 'sm'
                } %}
            </div>

            {# Data table #}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden"
                 data-sam--cohort-crud-target="cardGrid">

                {# Table header #}
                <div class="grid grid-cols-[2fr_1fr_2fr_auto] gap-4 px-5 py-3 bg-gray-50 border-b border-gray-200 text-xs font-semibold text-gray-500 uppercase tracking-wide">
                    <span>Cohorte</span>
                    <span>Membres</span>
                    <span>Formations</span>
                    <span class="w-24 text-right">Actions</span>
                </div>

                {# Table body #}
                {% for cohort in cohorts %}
                    {% set enrolledCourses = cohortCourses[cohort.id] ?? [] %}

                    <div onclick="window.location.href='{{ path('app_sam_cohorts_detail', {id: cohort.moodleId}) }}'"
                         class="grid grid-cols-[2fr_1fr_2fr_auto] gap-4 items-center px-5 py-3.5 border-b border-gray-100 last:border-b-0 {{ loop.index is odd ? 'bg-white' : 'bg-cohorts/3' }} hover:bg-cohorts/[0.07] transition-colors cursor-pointer group"
                         data-cohort-name="{{ cohort.name|lower }}"
                         data-member-count="{{ cohort.membersCount }}"
                         data-courses="{{ enrolledCourses|map(c => c.shortname|lower)|join(',') }}">

                        {# Cohorte : avatar + nom #}
                        <div class="flex items-center gap-3 min-w-0">
                            {% include '_atoms/avatar/avatar.html.twig' with {
                                initials: cohort.name|slice(0, 2)|upper,
                                size: 'sm',
                                rounded: 'lg',
                                variant: 'cohorts'
                            } only %}
                            <div class="min-w-0">
                                <div class="text-sm font-semibold text-gray-900 truncate group-hover:text-cohorts transition-colors">{{ cohort.name }}</div>
                                {% if cohort.idnumber %}
                                    <code class="text-xs text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded font-mono">{{ cohort.idnumber }}</code>
                                {% elseif cohort.description %}
                                    <p class="text-xs text-gray-400 truncate max-w-[180px]">{{ cohort.description|slice(0, 50) }}{{ cohort.description|length > 50 ? '…' : '' }}</p>
                                {% endif %}
                            </div>
                        </div>

                        {# Membres #}
                        <div class="flex items-center gap-1.5">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'sm', color: 'cohorts' } only %}
                            <span class="text-sm font-semibold text-gray-900">{{ cohort.membersCount }}</span>
                            <span class="text-xs text-gray-400">membre{{ cohort.membersCount != 1 ? 's' : '' }}</span>
                        </div>

                        {# Formations (tags) #}
                        <div class="flex flex-wrap gap-1 items-center" onclick="event.preventDefault(); event.stopPropagation()">
                            {% if enrolledCourses|length > 0 %}
                                {% for course in enrolledCourses|slice(0, 3) %}
                                    {% include '_atoms/badge/badge.html.twig' with {
                                        label: course.fullname|slice(0, 18) ~ (course.fullname|length > 18 ? '…' : ''),
                                        variant: 'cohorts',
                                        size: 'xs'
                                    } %}
                                {% endfor %}
                                {% if enrolledCourses|length > 3 %}
                                    {% include '_atoms/badge/badge.html.twig' with {
                                        label: '+' ~ (enrolledCourses|length - 3),
                                        variant: 'neutral',
                                        size: 'xs'
                                    } %}
                                {% endif %}
                            {% else %}
                                <span class="text-xs text-gray-300 italic">Aucun cours</span>
                            {% endif %}
                        </div>

                        {# Row actions — stopPropagation pour éviter la navigation #}
                        <div class="flex items-center justify-end gap-1 w-24 self-center" onclick="event.preventDefault(); event.stopPropagation();">

                            {# Edit #}
                            {% include '_atoms/button/button.html.twig' with {
                                variant: 'ghost',
                                size: 'sm',
                                icon: 'edit',
                                iconOnly: true,
                                class: 'text-gray-400 hover:text-primary hover:bg-primary/10 shrink-0',
                                attr: {
                                    'data-action': 'click->sam--cohort-crud#openEditModal:stop',
                                    'data-cohort-id': cohort.moodleId,
                                    'data-name': cohort.name,
                                    'data-idnumber': cohort.idnumber,
                                    'data-description': cohort.description
                                }
                            } %}

                            {# Delete #}
                            {% include '_atoms/button/button.html.twig' with {
                                variant: 'ghost',
                                size: 'sm',
                                icon: 'trash',
                                iconOnly: true,
                                class: 'text-gray-400 hover:text-error hover:bg-error/10 shrink-0',
                                attr: {
                                    'data-action': 'click->sam--cohort-crud#confirmDelete:stop',
                                    'data-cohort-id': cohort.moodleId,
                                    'data-name': cohort.name
                                }
                            } %}
                        </div>

                    </div>
                {% endfor %}

                {# Table footer — pagination #}
                <div class="flex items-center justify-between px-5 py-3 border-t border-gray-100 bg-gray-50/50">
                    <span class="text-sm text-gray-500">
                        <strong class="text-gray-700">{{ total }}</strong> cohorte{{ total > 1 ? 's' : '' }}
                    </span>

                    {% if totalPages > 1 %}
                        {% include '_molecules/pagination/pagination.html.twig' with {
                            currentPage: page,
                            totalPages: totalPages,
                            baseUrl: path('app_sam_cohorts'),
                            size: 'sm',
                            showFirstLast: false
                        } %}
                    {% endif %}
                </div>

            </div>
        {% endif %}

        {# Footer #}
        <p class="text-xs text-center text-gray-400 mt-8">
            &copy; Bubul {{ "now"|date("Y") }}
            {% if lastSyncedAt is defined and lastSyncedAt %}
                · Synchronisé le {{ lastSyncedAt|date('d/m/Y à H:i') }}
            {% else %}
                · Non synchronisé
            {% endif %}
        </p>

    </main>

    {# ══════════════════════════════════════════════════════════════
       MODAL CRÉATION/ÉDITION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--cohort-crud-target="modal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--cohort-crud#closeModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md z-10">

            {# Header #}
            <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-cohorts/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'sm', color: 'cohorts' } only %}
                    </div>
                    <h2 class="text-base font-semibold text-gray-900" data-sam--cohort-crud-target="modalTitle">Créer une cohorte</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--cohort-crud#closeModal' }
                } only %}
            </div>

            {# Form #}
            <form data-sam--cohort-crud-target="form" data-action="submit->sam--cohort-crud#submit">
                <div class="px-6 py-5 space-y-4">
                    {% include '_molecules/form/form-field.html.twig' with {
                        name: 'name',
                        label: 'Nom de la cohorte',
                        type: 'text',
                        icon: 'users-group',
                        required: true,
                        size: 'sm'
                    } only %}

                    {% include '_molecules/form/form-field.html.twig' with {
                        name: 'idNumber',
                        label: 'Identifiant',
                        type: 'text',
                        icon: 'user-id',
                        placeholder: 'ex: PROMO-2026',
                        hint: 'Identifiant unique optionnel pour faciliter les recherches.',
                        size: 'sm'
                    } only %}

                    {% include '_molecules/form/form-field.html.twig' with {
                        name: 'description',
                        label: 'Description',
                        type: 'textarea',
                        rows: 3,
                        placeholder: 'Description de la cohorte...',
                        size: 'sm'
                    } only %}
                </div>

                {# Footer #}
                <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--cohort-crud#closeModal'
                        }
                    } only %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Créer',
                        variant: 'cohorts',
                        size: 'md',
                        icon: 'check',
                        type: 'submit',
                        attr: {
                            'data-sam--cohort-crud-target': 'submitBtn'
                        }
                    } only %}
                </div>
            </form>
        </div>
    </div>

    {# ══════════════════════════════════════════════════════════════
       MODAL MEMBRES
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--cohort-crud-target="membersModal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--cohort-crud#closeMembersModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-2xl z-10 max-h-[90vh] flex flex-col">

            {# Header #}
            <div class="px-6 pt-5 pb-4 border-b border-gray-100 flex items-center justify-between shrink-0">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-cohorts/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'sm', color: 'cohorts' } only %}
                    </div>
                    <div class="flex items-center gap-2">
                        <h2 class="text-base font-semibold text-gray-900">
                            Membres de <span data-sam--cohort-crud-target="cohortName">la cohorte</span>
                        </h2>
                        <span data-sam--cohort-crud-target="membersCount">
                            {% include '_atoms/badge/badge.html.twig' with {
                                label: '0',
                                variant: 'cohorts',
                                size: 'sm'
                            } only %}
                        </span>
                    </div>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--cohort-crud#closeMembersModal' }
                } only %}
            </div>

            {# Body #}
            <div class="px-6 py-5 space-y-4 overflow-y-auto flex-1">
                {# User search #}
                <div>
                    {% include '_molecules/form/form-field.html.twig' with {
                        name: 'member-search',
                        label: 'Ajouter des membres',
                        type: 'text',
                        placeholder: 'Rechercher un utilisateur (min. 3 caractères)...',
                        size: 'sm',
                        attr: {
                            'data-sam--cohort-crud-target': 'searchInput',
                            'data-action': 'input->sam--cohort-crud#onSearchInput'
                        }
                    } only %}

                    {# Search results dropdown #}
                    <div class="relative">
                        <div class="absolute left-0 right-0 top-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto z-20"
                             style="display:none"
                             data-sam--cohort-crud-target="searchResults"></div>
                    </div>
                </div>

                {# Selected users chips #}
                <div class="flex flex-wrap gap-2" data-sam--cohort-crud-target="selectedUsers"></div>

                {# Divider #}
                {% include '_atoms/divider/divider.html.twig' with {
                    text: 'Membres actuels',
                    spacing: 'sm'
                } only %}

                {# Members list #}
                <div data-sam--cohort-crud-target="membersList">
                    <p class="text-sm text-gray-400 text-center py-4">Chargement...</p>
                </div>
            </div>

            {# Footer #}
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3 shrink-0">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Fermer',
                    variant: 'ghost',
                    size: 'md',
                    attr: {
                        'data-action': 'click->sam--cohort-crud#closeMembersModal'
                    }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Ajouter les membres',
                    variant: 'cohorts',
                    size: 'md',
                    icon: 'plus',
                    iconPosition: 'left',
                    disabled: true,
                    attr: {
                        'data-action': 'click->sam--cohort-crud#addSelectedMembers',
                        'data-sam--cohort-crud-target': 'addMembersBtn'
                    }
                } only %}
            </div>
        </div>
    </div>

    {# ══════════════════════════════════════════════════════════════
       MODAL SUPPRESSION
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         data-sam--cohort-crud-target="deleteModal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" data-action="click->sam--cohort-crud#closeDeleteModal"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm z-10">

            {# Header #}
            <div class="px-6 pt-5 pb-4 border-b border-error/15 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">Supprimer la cohorte</h2>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { 'data-action': 'click->sam--cohort-crud#closeDeleteModal' }
                } only %}
            </div>

            {# Body #}
            <div class="px-6 py-5 space-y-3">
                <p class="text-sm text-gray-600">
                    Êtes-vous sûr de vouloir supprimer la cohorte
                    <strong class="text-gray-900" data-sam--cohort-crud-target="deleteModalName">-</strong> ?
                </p>
                <div class="flex items-start gap-2.5 bg-error/5 border border-error/15 rounded-lg px-4 py-3">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'warning', size: 'sm', color: 'error', class: 'shrink-0 mt-0.5' } only %}
                    <p class="text-xs text-error font-medium">Cette action est irréversible et supprimera la cohorte sur Moodle.</p>
                </div>
            </div>

            {# Footer #}
            <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--cohort-crud#closeDeleteModal'
                    }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Supprimer',
                    variant: 'error',
                    size: 'md',
                    attr: {
                        'data-action': 'click->sam--cohort-crud#executeDelete',
                        'data-sam--cohort-crud-target': 'deleteBtn'
                    }
                } only %}
            </div>
        </div>
    </div>

</div>
{% endblock %}