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

{% block title %}{{ ecole.nom }} | SALSABIL Madrassas{% endblock %}

{% block content %}
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div class="admin-entity admin-entity-large">
                {% 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>
                    <div class="admin-hero-breadcrumbs">SALSABIL / MADRASSAS</div>
                    <h1 class="admin-page-title">{{ ecole.nom }}</h1>
                    <p>{{ ecole.slogan ?: 'Madrassa configurée dans SALSABIL Madrassas.' }}</p>
                </div>
            </div>
            <div class="admin-actions">
                {% if ecole.slug %}
                    <a class="admin-hero-action admin-hero-action-soft" href="{{ public_school_url(ecole) }}" target="_blank" rel="noopener">
                        <span class="material-symbols-outlined">open_in_new</span>
                        <span>Voir la page publique</span>
                    </a>
                {% endif %}
                <a class="admin-hero-action" href="{{ path('platform_ecole_edit', {id: ecole.id}) }}">
                    <span class="material-symbols-outlined">edit</span>
                    <span>Modifier</span>
                </a>
            </div>
        </section>

        <section class="admin-kpi-grid admin-kpi-grid-platform">
            {% include 'components/admin/stat_card.html.twig' with {icon: 'badge', label: 'Préfixe matricule', value: ecole.prefixeMatricule, trend: 'Dernier numéro : ' ~ ecole.dernierNumeroMatricule} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'palette', label: 'Thème public', value: ecole.themePublic ? ecole.themePublic.nom : 'À définir', trend: ecole.themePublic ? ecole.themePublic.code : 'Aucun thème'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'manage_accounts', label: 'Admins école', value: adminCount, trend: 'Comptes rattachés'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'toggle_on', label: 'Statut', value: ecole.active ? 'Actif' : 'Inactif', trend: ecole.displayLocation, accent: ecole.active ? 'emerald' : 'alert'} only %}
        </section>

        <section class="admin-grid admin-grid-platform">
            <div class="admin-card">
                <div class="admin-card-head">
                    <h2>Informations administratives</h2>
                </div>
                <dl class="admin-detail-list">
                    <div><dt>Slug</dt><dd>{{ ecole.slug }}</dd></div>
                    <div><dt>Sous-domaine canonique</dt><dd>{{ ecole.sousDomaine }}</dd></div>
                    <div>
                        <dt>Domaines</dt>
                        <dd>
                            {% for domain in ecole.tenantDomains %}
                                {% if domain.active %}
                                    <span>{{ domain.host }}{% if domain.canonical %} (canonique){% endif %}</span>{% if not loop.last %}<br>{% endif %}
                                {% endif %}
                            {% else %}
                                Non renseigné
                            {% endfor %}
                        </dd>
                    </div>
                    <div><dt>Email</dt><dd>{{ ecole.email ?: 'Non renseigné' }}</dd></div>
                    <div><dt>Téléphone 1</dt><dd>{{ ecole.telephone1 ?: 'Non renseigné' }}</dd></div>
                    <div><dt>Téléphone 2</dt><dd>{{ ecole.telephone2 ?: 'Non renseigné' }}</dd></div>
                    <div><dt>WhatsApp</dt><dd>{{ ecole.whatsapp ?: 'Non renseigné' }}</dd></div>
                    <div><dt>Adresse</dt><dd>{{ ecole.adresse ?: 'Non renseignée' }}</dd></div>
                    <div><dt>Ville / pays</dt><dd>{{ ecole.displayLocation }}</dd></div>
                </dl>
            </div>

            <aside class="admin-sidebar-column">
                <div class="admin-card">
                    <div class="admin-card-head">
                        <h2>Couleurs</h2>
                    </div>
                    <div class="admin-color-detail-list">
                        {% for label, color in {
                            'Principale': ecole.couleurPrincipale,
                            'Secondaire': ecole.couleurSecondaire,
                            'Accent': ecole.couleurAccent
                        } %}
                            <div class="admin-color-detail">
                                <span class="admin-color-swatch" style="background: {{ color ?: '#ece9e1' }}"></span>
                                <strong>{{ label }}</strong>
                                <small>{{ color ?: 'Non renseignée' }}</small>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="admin-card">
                    <div class="admin-card-head">
                        <h2>Identité visuelle</h2>
                    </div>
                    <div class="admin-upload-preview-grid admin-upload-preview-grid-stacked">
                        <div class="admin-upload-preview">
                            <span>Logo</span>
                            {% if ecole.logo %}
                                <img class="admin-upload-thumb admin-upload-thumb-logo" src="{{ asset(ecole.logo) }}" alt="Logo de {{ ecole.nom }}">
                                <small>{{ ecole.logo }}</small>
                            {% else %}
                                <strong>{{ ecole.nom|slice(0, 2)|upper }}</strong>
                                <small>Non renseigné</small>
                            {% endif %}
                        </div>
                        <div class="admin-upload-preview">
                            <span>Favicon</span>
                            {% if ecole.favicon %}
                                <img class="admin-upload-thumb admin-upload-thumb-favicon" src="{{ asset(ecole.favicon) }}" alt="Favicon de {{ ecole.nom }}">
                                <small>{{ ecole.favicon }}</small>
                            {% else %}
                                <strong>{{ ecole.nom|slice(0, 1)|upper }}</strong>
                                <small>Non renseigné</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </aside>
        </section>

        <section class="admin-card">
            <div class="admin-card-head">
                <h2>Contenus publics</h2>
            </div>
            <dl class="admin-detail-list admin-detail-list-wide">
                <div><dt>Titre hero</dt><dd>{{ ecole.heroTitle ?: 'Non renseigné' }}</dd></div>
                <div><dt>Sous-titre hero</dt><dd>{{ ecole.heroSubtitle ?: 'Non renseigné' }}</dd></div>
                <div><dt>Titre présentation</dt><dd>{{ ecole.aboutTitle ?: 'Non renseigné' }}</dd></div>
                <div><dt>Texte présentation</dt><dd>{{ ecole.aboutText ?: 'Non renseigné' }}</dd></div>
                <div><dt>Titre appel à l’action</dt><dd>{{ ecole.ctaTitle ?: 'Non renseigné' }}</dd></div>
                <div><dt>Texte appel à l’action</dt><dd>{{ ecole.ctaText ?: 'Non renseigné' }}</dd></div>
            </dl>
        </section>
    </div>
{% endblock %}
