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

{% block title %}Niveaux | 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">Niveaux</h1>
                <p>Définissez les étapes de progression et les parcours pédagogiques de {{ ecole.nom }}.</p>
            </div>
            <a class="admin-btn admin-btn-primary" href="{{ path('school_niveau_new') }}">Nouveau niveau</a>
        </section>

        <section class="school-summary-grid">
            <article class="school-summary-card"><span>Total</span><strong>{{ niveaux|length }}</strong></article>
            <article class="school-summary-card"><span>Actifs</span><strong>{{ niveaux|filter(niveau => niveau.active)|length }}</strong></article>
            <article class="school-summary-card"><span>Avec section</span><strong>{{ niveaux|filter(niveau => niveau.section)|length }}</strong></article>
        </section>

        <section class="admin-card admin-table-card">
            <div class="admin-card-head">
                <div>
                    <h2>Parcours pédagogiques</h2>
                    <p>Les niveaux actifs sont repris sur la page publique de la madrassa.</p>
                </div>
            </div>

            {% if niveaux is empty %}
                <div class="admin-empty-state">
                    <span class="material-symbols-outlined">menu_book</span>
                    <strong>Aucun niveau configuré</strong>
                    <p>Ajoutez les paliers pédagogiques pour présenter une progression claire aux familles.</p>
                    <a class="btn admin-btn admin-btn-primary" href="{{ path('school_niveau_new') }}">Créer un niveau</a>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table admin-table school-table align-middle mb-0">
                        <thead>
                        <tr>
                            <th>Niveau</th>
                            <th>Section</th>
                            <th>Ordre</th>
                            <th>Statut</th>
                            <th class="text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for niveau in niveaux %}
                            {% set description = niveau.description|default('Aucune description')|striptags %}
                            <tr>
                                <td>
                                    <div class="school-table-title">
                                        <strong>{{ niveau.nom }}</strong>
                                        <small>{{ description|length > 92 ? description|slice(0, 92) ~ '...' : description }}</small>
                                    </div>
                                </td>
                                <td>{{ niveau.section ? niveau.section.nom : 'Toutes les sections' }}</td>
                                <td>{{ niveau.ordre }}</td>
                                <td>
                                    {% include 'components/admin/status_badge.html.twig' with {label: niveau.active ? 'Actif' : 'Inactif', tone: niveau.active ? 'success' : 'neutral'} only %}
                                </td>
                                <td>
                                    <div class="admin-actions">
                                        <a class="admin-action-button" href="{{ path('school_niveau_edit', {id: niveau.id}) }}">Modifier</a>
                                        <form method="post" action="{{ path('school_niveau_delete', {id: niveau.id}) }}" onsubmit="return confirm('Supprimer ce niveau ?');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_niveau_' ~ niveau.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 %}
