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

{% block title %}Thèmes publics | SALSABIL Madrassas{% endblock %}

{% block content %}
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div>
                <div class="admin-hero-breadcrumbs">SALSABIL / THÈMES</div>
                <h1 class="admin-page-title">Thèmes publics</h1>
                <p>Gérez les variantes publiques disponibles pour les madrassas de la plateforme.</p>
            </div>
            <a class="admin-hero-action" href="{{ path('platform_theme_new') }}">
                <span class="material-symbols-outlined">add</span>
                <span>Ajouter un thème</span>
            </a>
        </section>

        <section class="admin-card admin-table-card">
            <div class="admin-card-head">
                <div>
                    <h2>Catalogue des thèmes</h2>
                    <p>{{ themes|length }} thème(s) disponible(s).</p>
                </div>
            </div>

            {% if themes is empty %}
                <div class="admin-empty-state">
                    <span class="material-symbols-outlined">palette</span>
                    <strong>Aucun thème public</strong>
                    <p>Créez les thèmes Qamar et Daroul-Ilm pour préparer les pages publiques.</p>
                    <a class="btn admin-btn admin-btn-primary" href="{{ path('platform_theme_new') }}">Créer un thème</a>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table admin-table align-middle mb-0">
                        <thead>
                        <tr>
                            <th>Thème</th>
                            <th>Code</th>
                            <th>Description</th>
                            <th>Aperçu</th>
                            <th>Statut</th>
                            <th class="text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for theme in themes %}
                            <tr>
                                <td>
                                    <div class="admin-entity">
                                        <span class="admin-entity-avatar">{{ theme.nom|slice(0, 2)|upper }}</span>
                                        <div>
                                            <strong>{{ theme.nom }}</strong>
                                            <small>{{ theme.ecoles|length }} madrassa(s)</small>
                                        </div>
                                    </div>
                                </td>
                                <td><code class="admin-code">{{ theme.code }}</code></td>
                                <td>{{ theme.description ?: 'Description non renseignée' }}</td>
                                <td>
                                    {% if theme.previewImage %}
                                        <img class="admin-preview-image" src="{{ asset(theme.previewImage) }}" alt="Aperçu {{ theme.nom }}">
                                    {% else %}
                                        <span class="admin-muted-text">Aucun aperçu</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% include 'components/admin/status_badge.html.twig' with {
                                        label: theme.actif ? 'Actif' : 'Inactif',
                                        tone: theme.actif ? 'success' : 'neutral'
                                    } only %}
                                </td>
                                <td>
                                    <div class="admin-actions">
                                        <a class="admin-action-button" href="{{ path('platform_theme_show', {id: theme.id}) }}">Voir</a>
                                        <a class="admin-action-button" href="{{ path('platform_theme_edit', {id: theme.id}) }}">Modifier</a>
                                        <form method="post" action="{{ path('platform_theme_delete', {id: theme.id}) }}" onsubmit="return confirm('Supprimer ce thème public ?');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_theme_' ~ theme.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 %}
