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

{% block title %}Activités | {{ ecole.nom }}{% endblock %}

{% block content %}
{% set publishedCount = 0 %}
{% set draftCount = 0 %}
{% set photoCount = 0 %}
{% for activite in activites %}
    {% if activite.publiee %}{% set publishedCount = publishedCount + 1 %}{% else %}{% set draftCount = draftCount + 1 %}{% endif %}
    {% set photoCount = photoCount + activite.photos|length %}
{% endfor %}

<section class="admin-page-stack activity-module-shell">
    <div class="admin-page-header admin-page-header-compact activity-hero">
        <div>
            <span class="admin-eyebrow">Fil parent</span>
            <h1>Activités</h1>
            <p>Publiez les activités de l’école avec photos dans le portail parent.</p>
        </div>
        <div class="admin-hero-actions">
            <a class="admin-btn admin-btn-light" href="{{ path('parent_activite_feed') }}" target="_blank" rel="noopener">
                <span class="material-symbols-outlined">visibility</span> Voir côté parent
            </a>
            <a class="admin-btn admin-btn-primary" href="{{ path('school_activite_new') }}">
                <span class="material-symbols-outlined">add_photo_alternate</span> Nouvelle activité
            </a>
        </div>
    </div>

    <div class="activity-kpi-grid">
        <article class="activity-kpi-card">
            <span class="activity-kpi-icon material-symbols-outlined">dynamic_feed</span>
            <small>Total</small>
            <strong>{{ activites|length }}</strong>
            <em>Activités trouvées</em>
        </article>
        <article class="activity-kpi-card">
            <span class="activity-kpi-icon material-symbols-outlined">published_with_changes</span>
            <small>Publiées</small>
            <strong>{{ publishedCount }}</strong>
            <em>Visibles aux parents</em>
        </article>
        <article class="activity-kpi-card">
            <span class="activity-kpi-icon material-symbols-outlined">draft</span>
            <small>Brouillons</small>
            <strong>{{ draftCount }}</strong>
            <em>À finaliser</em>
        </article>
        <article class="activity-kpi-card">
            <span class="activity-kpi-icon material-symbols-outlined">photo_library</span>
            <small>Photos</small>
            <strong>{{ photoCount }}</strong>
            <em>Dans le fil parent</em>
        </article>
    </div>

    <form class="admin-filter-card admin-filter-card-compact activity-filter-card" method="get">
        <div class="activity-filter-grid">
            <div class="activity-filter-search">
                <label>Recherche</label>
                <input class="form-control" type="search" name="q" value="{{ filters.q }}" placeholder="Titre, description, enfant...">
            </div>
            <div>
                <label>Type</label>
                <select class="form-select" name="type">
                    <option value="">Tous</option>
                    {% for type in types %}<option value="{{ type }}" {{ filters.type == type ? 'selected' : '' }}>{{ type }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label>Statut</label>
                <select class="form-select" name="statut">
                    <option value="">Tous</option>
                    <option value="publiee" {{ filters.statut == 'publiee' ? 'selected' : '' }}>Publiées</option>
                    <option value="brouillon" {{ filters.statut == 'brouillon' ? 'selected' : '' }}>Brouillons</option>
                </select>
            </div>
            <div>
                <label>Section</label>
                <select class="form-select" name="section">
                    <option value="">Toutes</option>
                    {% for section in sections %}<option value="{{ section.id }}" {{ filters.section == section.id ? 'selected' : '' }}>{{ section.nom }}</option>{% endfor %}
                </select>
            </div>
            <div>
                <label>Classe</label>
                <select class="form-select" name="classe">
                    <option value="">Toutes</option>
                    {% for classe in classes %}<option value="{{ classe.id }}" {{ filters.classe == classe.id ? 'selected' : '' }}>{{ classe.nom }}</option>{% endfor %}
                </select>
            </div>
            <div class="activity-filter-actions">
                <button class="admin-btn admin-btn-primary" type="submit"><span class="material-symbols-outlined">filter_alt</span> Filtrer</button>
                <a class="admin-btn admin-btn-light" href="{{ path('school_activite_index') }}">Réinitialiser</a>
            </div>
        </div>
    </form>

    <section class="admin-card activity-list-card">
        <div class="admin-card-header">
            <div>
                <h2>Fil d’activités</h2>
                <p>Les activités publiées alimentent le portail parent avec photos et résumé.</p>
            </div>
            <a class="admin-btn admin-btn-light" href="{{ path('school_activite_new') }}"><span class="material-symbols-outlined">add</span> Ajouter</a>
        </div>

        {% if activites is empty %}
            <div class="admin-empty-state activity-empty-state">
                <span class="material-symbols-outlined">photo_camera</span>
                <strong>Aucune activité pour le moment.</strong>
                <p>Créez une première activité pour alimenter le fil parent.</p>
                <a class="admin-btn admin-btn-primary" href="{{ path('school_activite_new') }}">Créer une activité</a>
            </div>
        {% else %}
            <div class="activity-admin-list">
                {% for activite in activites %}
                    {% set cover = activite.coverPhoto %}
                    {% set target = activite.etudiant ? activite.etudiant.nomComplet : (activite.classe ? activite.classe.nom : (activite.section ? activite.section.nom : 'Toute l’école')) %}
                    <article class="activity-row-card">
                        <a class="activity-row-cover" href="{{ path('school_activite_show', {id: activite.id}) }}">
                            {% if cover %}
                                <img src="{{ asset(cover.publicPath) }}" alt="{{ activite.titre }}">
                            {% else %}
                                <span class="material-symbols-outlined">photo_camera</span>
                            {% endif %}
                        </a>
                        <div class="activity-row-main">
                            <div class="activity-row-meta">
                                <span class="admin-badge {{ activite.publiee ? 'admin-badge-success' : 'admin-badge-muted' }}">{{ activite.publiee ? 'Publié' : 'Brouillon' }}</span>
                                <span class="activity-type-pill">{{ activite.typeLabel }}</span>
                                <span class="activity-date"><span class="material-symbols-outlined">calendar_month</span>{{ activite.dateDebut ? activite.dateDebut|date('d/m/Y H:i') : '-' }}</span>
                            </div>
                            <h3><a href="{{ path('school_activite_show', {id: activite.id}) }}">{{ activite.titre }}</a></h3>
                            <p class="activity-target"><span class="material-symbols-outlined">adjust</span>{{ target }}</p>
                            {% if activite.description %}
                                <p class="activity-description-preview">{% set preview = activite.description|default('')|striptags %}{{ preview|length > 170 ? preview|slice(0, 170) ~ '...' : preview }}</p>
                            {% endif %}
                        </div>
                        <div class="activity-row-side">
                            <div class="activity-photo-count"><span class="material-symbols-outlined">photo_library</span>{{ activite.photos|length }} photo(s)</div>
                            <div class="activity-row-actions">
                                <a class="admin-btn admin-btn-light" href="{{ path('school_activite_show', {id: activite.id}) }}">Voir</a>
                                <a class="admin-btn admin-btn-light" href="{{ path('school_activite_edit', {id: activite.id}) }}">Modifier</a>
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% endif %}
    </section>
</section>

<style>
.activity-module-shell{--activity-radius:1.45rem}.activity-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--admin-primary) 12%,var(--admin-surface)) 0%,var(--admin-surface) 64%);border-left:6px solid var(--admin-primary)}
.activity-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0}.activity-kpi-card{background:var(--admin-surface);border:1px solid var(--admin-border);border-radius:var(--activity-radius);padding:1rem;box-shadow:var(--admin-shadow-soft);display:grid;gap:.35rem}.activity-kpi-icon{width:2.7rem;height:2.7rem;display:grid;place-items:center;border-radius:1rem;background:color-mix(in srgb,var(--admin-primary) 10%,transparent);color:var(--admin-primary)}.activity-kpi-card small{font-weight:900;text-transform:uppercase;color:var(--admin-muted);letter-spacing:.06em}.activity-kpi-card strong{font-size:2rem;line-height:1;font-weight:950;color:var(--admin-text)}.activity-kpi-card em{font-style:normal;color:var(--admin-muted);font-weight:750}.activity-filter-card{margin-bottom:1rem}.activity-filter-grid{display:grid;grid-template-columns:minmax(250px,1.6fr) minmax(120px,.8fr) minmax(130px,.8fr) minmax(160px,1fr) minmax(150px,1fr) auto;gap:.75rem;align-items:end}.activity-filter-grid label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--admin-muted);font-weight:950;margin-bottom:.2rem}.activity-filter-actions{display:flex;gap:.5rem;justify-content:flex-end;white-space:nowrap}.activity-list-card{overflow:hidden}.activity-empty-state{display:grid;place-items:center;text-align:center;gap:.5rem;padding:2.5rem}.activity-empty-state .material-symbols-outlined{font-size:3rem;color:var(--admin-primary)}.activity-admin-list{display:grid;gap:.85rem}.activity-row-card{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.85rem;border:1px solid var(--admin-border);border-radius:1.25rem;background:var(--admin-surface-soft);transition:.18s ease}.activity-row-card:hover{transform:translateY(-1px);box-shadow:var(--admin-shadow-soft);border-color:color-mix(in srgb,var(--admin-primary) 25%,var(--admin-border))}.activity-row-cover{height:118px;border-radius:1rem;overflow:hidden;background:color-mix(in srgb,var(--admin-primary) 8%,var(--admin-surface));display:grid;place-items:center;color:var(--admin-primary);text-decoration:none}.activity-row-cover img{width:100%;height:100%;object-fit:cover}.activity-row-cover .material-symbols-outlined{font-size:2.7rem}.activity-row-main{min-width:0}.activity-row-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.activity-type-pill,.activity-date{display:inline-flex;align-items:center;gap:.25rem;font-weight:850;color:var(--admin-muted);font-size:.82rem}.activity-date .material-symbols-outlined{font-size:1rem}.activity-row-main h3{margin:.45rem 0 .25rem;font-weight:950;font-size:1.2rem;letter-spacing:-.02em}.activity-row-main h3 a{text-decoration:none;color:var(--admin-text)}.activity-target{display:flex;align-items:center;gap:.3rem;margin:0;color:var(--admin-text);font-weight:850}.activity-target .material-symbols-outlined{font-size:1rem;color:var(--admin-primary)}.activity-description-preview{margin:.45rem 0 0;color:var(--admin-muted);font-weight:650;line-height:1.45}.activity-row-side{display:grid;gap:.75rem;justify-items:end}.activity-photo-count{display:inline-flex;align-items:center;gap:.35rem;color:var(--admin-muted);font-weight:850;white-space:nowrap}.activity-photo-count .material-symbols-outlined{font-size:1.1rem;color:var(--admin-primary)}.activity-row-actions{display:flex;gap:.5rem;white-space:nowrap}@media(max-width:1100px){.activity-kpi-grid{grid-template-columns:repeat(2,1fr)}.activity-filter-grid{grid-template-columns:1fr 1fr}.activity-filter-search,.activity-filter-actions{grid-column:1/-1}.activity-filter-actions{justify-content:flex-start}.activity-row-card{grid-template-columns:130px 1fr}.activity-row-side{grid-column:1/-1;justify-items:start;display:flex;justify-content:space-between;align-items:center}}@media(max-width:680px){.activity-kpi-grid{grid-template-columns:1fr}.activity-filter-grid{grid-template-columns:1fr}.activity-row-card{grid-template-columns:1fr}.activity-row-cover{height:190px}.activity-row-side{display:grid}.activity-row-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.activity-row-actions .admin-btn{justify-content:center}.admin-hero-actions{width:100%;display:grid;grid-template-columns:1fr}.admin-hero-actions .admin-btn{justify-content:center}}
</style>
{% endblock %}