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

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

{% block content %}
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div>
                <div class="admin-hero-breadcrumbs">SALSABIL / MADRASSAS</div>
                <h1 class="admin-page-title">Gestion des madrassas</h1>
                <p>Créez et administrez les écoles, leurs couleurs, leurs sous-domaines et leurs thèmes publics.</p>
            </div>
            <a class="admin-hero-action" href="{{ path('platform_ecole_new') }}">
                <span class="material-symbols-outlined">add</span>
                <span>Ajouter une madrassa</span>
            </a>
        </section>

        <section class="admin-card admin-table-card">
            <div class="admin-card-head">
                <div>
                    <h2>Madrassas enregistrées</h2>
                    <p>{{ ecoles|length }} madrassa(s) dans la plateforme.</p>
                </div>
            </div>

            {% if ecoles is empty %}
                <div class="admin-empty-state">
                    <span class="material-symbols-outlined">account_balance</span>
                    <strong>Aucune madrassa enregistrée</strong>
                    <p>Ajoutez Qamar, Daroul-Ilm ou une nouvelle école pilote pour démarrer.</p>
                    <a class="btn admin-btn admin-btn-primary" href="{{ path('platform_ecole_new') }}">Créer une madrassa</a>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table admin-table align-middle mb-0">
                        <thead>
                        <tr>
                            <th>Madrassa</th>
                            <th>Favicon</th>
                            <th>Slug</th>
                            <th>Domaine public</th>
                            <th>Ville</th>
                            <th>Thème</th>
                            <th>Couleurs</th>
                            <th>Admins</th>
                            <th>Statut</th>
                            <th class="text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for ecole in ecoles %}
                            <tr>
                                <td>
                                    <div class="admin-entity">
                                        {% if ecole.logo %}
                                            <img class="admin-entity-avatar admin-entity-logo" src="{{ asset(ecole.logo) }}" alt="{{ ecole.nom }}">
                                        {% else %}
                                            <span class="admin-entity-avatar">{{ ecole.nom|slice(0, 2)|upper }}</span>
                                        {% endif %}
                                        <div>
                                            <strong>{{ ecole.nom }}</strong>
                                            <small>{{ ecole.prefixeMatricule }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if ecole.favicon %}
                                        <img class="admin-favicon-preview" src="{{ asset(ecole.favicon) }}" alt="Favicon de {{ ecole.nom }}">
                                    {% else %}
                                        <span class="admin-muted-text">À définir</span>
                                    {% endif %}
                                </td>
                                <td>{{ ecole.slug }}</td>
                                <td>
                                    {% set canonicalDomain = ecole.canonicalTenantDomain %}
                                    {{ canonicalDomain ? canonicalDomain.host : ecole.sousDomaine }}
                                </td>
                                <td>{{ ecole.displayLocation }}</td>
                                <td>{{ ecole.themePublic ? ecole.themePublic.nom : 'À définir' }}</td>
                                <td>
                                    <div class="admin-color-swatches">
                                        {% for color in [ecole.couleurPrincipale, ecole.couleurSecondaire, ecole.couleurAccent] %}
                                            {% if color %}
                                                <span class="admin-color-swatch" style="background: {{ color }}" title="{{ color }}"></span>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </td>
                                <td>{{ adminCounts[ecole.id]|default(0) }}</td>
                                <td>
                                    {% include 'components/admin/status_badge.html.twig' with {
                                        label: ecole.active ? 'Actif' : 'Inactif',
                                        tone: ecole.active ? 'success' : 'neutral'
                                    } only %}
                                </td>
                                <td>
                                    <div class="admin-actions">
                                        <a class="admin-action-button" href="{{ path('platform_ecole_show', {id: ecole.id}) }}">Voir</a>
                                        <a class="admin-action-button" href="{{ path('platform_ecole_edit', {id: ecole.id}) }}">Modifier</a>
                                        <form method="post" action="{{ path('platform_ecole_delete', {id: ecole.id}) }}" onsubmit="return confirm('Supprimer cette madrassa ? Les comptes rattachés seront détachés.');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_ecole_' ~ ecole.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 %}
