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

{% block title %}{{ theme.nom }} | 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">{{ theme.nom }}</h1>
                <p>{{ theme.description ?: 'Thème public disponible pour les madrassas.' }}</p>
            </div>
            <a class="admin-hero-action" href="{{ path('platform_theme_edit', {id: theme.id}) }}">
                <span class="material-symbols-outlined">edit</span>
                <span>Modifier</span>
            </a>
        </section>

        <section class="admin-kpi-grid admin-kpi-grid-platform">
            {% include 'components/admin/stat_card.html.twig' with {icon: 'code', label: 'Code technique', value: theme.code, trend: 'Utilisé par les templates publics'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'account_balance', label: 'Madrassas liées', value: theme.ecoles|length, trend: 'Écoles utilisant ce thème'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'toggle_on', label: 'Statut', value: theme.actif ? 'Actif' : 'Inactif', trend: 'Disponibilité dans le catalogue', accent: theme.actif ? 'emerald' : 'alert'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'calendar_month', label: 'Créé le', value: theme.createdAt ? theme.createdAt|date('d/m/Y') : 'Non renseigné', trend: 'Catalogue des thèmes'} only %}
        </section>

        <section class="admin-card">
            <div class="admin-card-head">
                <h2>Aperçu</h2>
            </div>
            {% if theme.previewImage %}
                <img class="admin-theme-preview-large" src="{{ asset(theme.previewImage) }}" alt="Aperçu {{ theme.nom }}">
            {% else %}
                <div class="admin-empty-state">
                    <span class="material-symbols-outlined">image</span>
                    <strong>Aucun aperçu configuré</strong>
                    <p>Une image pourra être ajoutée plus tard pour prévisualiser ce thème.</p>
                </div>
            {% endif %}
        </section>
    </div>
{% endblock %}
