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

{% block title %}Sections | SALSABIL Madrassas{% endblock %}

{% block content %}
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div>
                <p class="admin-eyebrow">PÉDAGOGIE</p>
                <h1 class="admin-page-title">Sections</h1>
                <p>Organisez les offres, programmes et parcours publics de {{ ecole.nom }}.</p>
            </div>
            <a class="admin-btn admin-btn-primary" href="{{ path('school_section_new') }}">Nouvelle section</a>
        </section>

        <section class="school-summary-grid">
            <article class="school-summary-card"><span>Total</span><strong>{{ sections|length }}</strong></article>
            <article class="school-summary-card"><span>Actives</span><strong>{{ sections|filter(section => section.active)|length }}</strong></article>
            <article class="school-summary-card"><span>Page publique</span><strong>{{ ecole.slug ? 'Reliée' : 'À configurer' }}</strong></article>
        </section>

        <section class="admin-card admin-table-card">
            <div class="admin-card-head">
                <div>
                    <h2>Programmes configurés</h2>
                    <p>Les sections actives alimentent automatiquement la page publique.</p>
                </div>
            </div>

            {% if sections is empty %}
                <div class="admin-empty-state">
                    <span class="material-symbols-outlined">category</span>
                    <strong>Aucune section configurée</strong>
                    <p>Créez un premier programme pour structurer l’offre pédagogique de la madrassa.</p>
                    <a class="btn admin-btn admin-btn-primary" href="{{ path('school_section_new') }}">Créer une section</a>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table admin-table school-table align-middle mb-0">
                        <thead>
                        <tr>
                            <th>Section</th>
                            <th>Type</th>
                            <th>Public</th>
                            <th>Ordre</th>
                            <th>Statut</th>
                            <th class="text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for section in sections %}
                            {% set description = section.description|default('Aucune description')|striptags %}
                            <tr>
                                <td>
                                    <div class="school-table-title">
                                        <strong>{{ section.nom }}</strong>
                                        <small>{{ description|length > 92 ? description|slice(0, 92) ~ '...' : description }}</small>
                                    </div>
                                </td>
                                <td>{{ section.type|replace({'_':' '})|title }}</td>
                                <td>{{ section.publicCible ?: 'Non renseigné' }}</td>
                                <td>{{ section.ordre }}</td>
                                <td>
                                    {% include 'components/admin/status_badge.html.twig' with {label: section.active ? 'Actif' : 'Inactif', tone: section.active ? 'success' : 'neutral'} only %}
                                </td>
                                <td>
                                    <div class="admin-actions">
                                        <a class="admin-action-button" href="{{ path('school_section_edit', {id: section.id}) }}">Modifier</a>
                                        <form method="post" action="{{ path('school_section_delete', {id: section.id}) }}" onsubmit="return confirm('Supprimer cette section ?');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_section_' ~ section.id) }}">
                                            <button class="admin-action-button admin-action-danger" type="submit">Supprimer</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </section>
    </div>
{% endblock %}
