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

{% block title %}{{ activite.titre }} | Activité{% endblock %}

{% block content %}
{% set cover = activite.coverPhoto %}
{% set target = activite.etudiant ? activite.etudiant.nomComplet : (activite.classe ? activite.classe.nom : (activite.section ? activite.section.nom : 'Toute l’école')) %}
<section class="admin-page-stack activity-detail-page">
    <div class="admin-page-header admin-page-header-compact activity-detail-hero">
        <div>
            <span class="admin-eyebrow">{{ activite.typeLabel }}{% if activite.dateDebut %} · {{ activite.dateDebut|date('d/m/Y H:i') }}{% endif %}</span>
            <h1>{{ activite.titre }}</h1>
            <p>{{ target }}</p>
        </div>
        <div class="admin-hero-actions">
            <a class="admin-btn admin-btn-light" href="{{ path('school_activite_index') }}"><span class="material-symbols-outlined">arrow_back</span> Retour</a>
            <a class="admin-btn admin-btn-primary" href="{{ path('school_activite_edit', {id: activite.id}) }}"><span class="material-symbols-outlined">edit</span> Modifier</a>
        </div>
    </div>

    <div class="activity-detail-layout">
        <main class="activity-detail-main">
            <section class="admin-card activity-detail-story">
                <div class="activity-detail-media">
                    {% if activite.videoPublicPath %}
                        <video controls preload="metadata" poster="{{ cover ? asset(cover.publicPath) : '' }}" src="{{ asset(activite.videoPublicPath) }}"></video>
                    {% elseif activite.videoUrl %}
                        {% if 'youtube.com' in activite.videoUrl or 'youtu.be' in activite.videoUrl %}
                            <div class="activity-video-external">
                                <span class="material-symbols-outlined">smart_display</span>
                                <strong>Vidéo externe</strong>
                                <a href="{{ activite.videoUrl }}" target="_blank" rel="noopener">Ouvrir la vidéo</a>
                            </div>
                        {% else %}
                            <div class="activity-video-external">
                                <span class="material-symbols-outlined">link</span>
                                <strong>Vidéo liée</strong>
                                <a href="{{ activite.videoUrl }}" target="_blank" rel="noopener">{{ activite.videoUrl }}</a>
                            </div>
                        {% endif %}
                    {% elseif cover %}
                        <img src="{{ asset(cover.publicPath) }}" alt="{{ activite.titre }}">
                    {% else %}
                        <div class="activity-detail-placeholder">
                            <span class="material-symbols-outlined">photo_library</span>
                            <strong>Aucun média principal</strong>
                            <small>Ajoutez une photo ou une vidéo pour rendre l’activité vivante.</small>
                        </div>
                    {% endif %}
                </div>

                <div class="activity-detail-copy">
                    <div class="activity-detail-badges">
                        <span class="admin-badge {{ activite.publiee ? 'admin-badge-success' : 'admin-badge-muted' }}">{{ activite.publiee ? 'Publié' : 'Brouillon' }}</span>
                        <span class="admin-badge {{ activite.visibleParent ? 'admin-badge-success' : 'admin-badge-muted' }}">{{ activite.visibleParent ? 'Visible parent' : 'Masqué parent' }}</span>
                        {% if activite.hasVideo %}<span class="admin-badge admin-badge-info">Vidéo</span>{% endif %}
                        <span class="activity-type-pill">{{ activite.typeLabel }}</span>
                    </div>
                    <h2>Résumé de l’activité</h2>
                    <div class="activity-detail-text">{{ activite.description ? activite.description|nl2br : 'Aucune description renseignée.' }}</div>

                    <div class="activity-detail-facts">
                        <div><span>Cible</span><strong>{{ target }}</strong></div>
                        <div><span>Début</span><strong>{{ activite.dateDebut ? activite.dateDebut|date('d/m/Y H:i') : '-' }}</strong></div>
                        <div><span>Fin</span><strong>{{ activite.dateFin ? activite.dateFin|date('d/m/Y H:i') : '-' }}</strong></div>
                        <div><span>Médias</span><strong>{{ activite.photos|length }} photo(s){% if activite.hasVideo %} + vidéo{% endif %}</strong></div>
                    </div>
                </div>
            </section>

            <section class="admin-card activity-gallery-card-pro">
                <div class="admin-card-header activity-section-head">
                    <div>
                        <h2>Galerie photos</h2>
                        <p>{{ activite.photos|length }} photo(s) associée(s) à cette activité.</p>
                    </div>
                    <a class="admin-btn admin-btn-light" href="{{ path('school_activite_edit', {id: activite.id}) }}"><span class="material-symbols-outlined">add_photo_alternate</span> Ajouter</a>
                </div>
                {% if activite.photos is empty %}
                    <div class="admin-empty-state activity-empty-gallery">
                        <span class="material-symbols-outlined">photo_library</span>
                        <strong>Aucune photo ajoutée</strong>
                        <p>Ajoutez des photos pour alimenter le fil parent.</p>
                    </div>
                {% else %}
                    <div class="activity-photo-grid-pro">
                        {% for photo in activite.photos %}
                            <figure>
                                <img src="{{ asset(photo.publicPath) }}" alt="Photo activité">
                                <figcaption>
                                    <span>{{ photo.caption ?: 'Photo ' ~ loop.index }}</span>
                                    <form method="post" action="{{ path('school_activite_photo_delete', {id: photo.id}) }}" onsubmit="return confirm('Supprimer cette photo ?')">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete_activity_photo_' ~ photo.id) }}">
                                        <button class="admin-link-danger" type="submit" title="Supprimer"><span class="material-symbols-outlined">delete</span></button>
                                    </form>
                                </figcaption>
                            </figure>
                        {% endfor %}
                    </div>
                {% endif %}
            </section>
        </main>

        <aside class="activity-detail-aside">
            <section class="admin-side-card activity-side-panel">
                <div class="activity-side-head">
                    <span class="material-symbols-outlined">campaign</span>
                    <div><h2>Publication</h2><p>Visibilité, publication et notification.</p></div>
                </div>
                <div class="activity-side-list">
                    <div><span>Statut</span><strong>{{ activite.publiee ? 'Publié' : 'Brouillon' }}</strong></div>
                    <div><span>Portail parent</span><strong>{{ activite.visibleParent ? 'Visible' : 'Masqué' }}</strong></div>
                    <div><span>Publié le</span><strong>{{ activite.publishedAt ? activite.publishedAt|date('d/m/Y H:i') : '-' }}</strong></div>
                    <div><span>Notification</span><strong>{{ activite.notifiedAt ? activite.notifiedAt|date('d/m/Y H:i') : (activite.notifierParents ? 'Prévue' : '-') }}</strong></div>
                </div>

                {% if activite.publiee and activite.visibleParent %}
                    <form method="post" action="{{ path('school_activite_notify', {id: activite.id}) }}" onsubmit="return confirm('Envoyer une notification WhatsApp aux parents concernés ?')">
                        <input type="hidden" name="_token" value="{{ csrf_token('notify_activity_' ~ activite.id) }}">
                        <button class="admin-btn admin-btn-primary w-100" type="submit"><span class="material-symbols-outlined">send</span> {{ activite.notifiedAt ? 'Renvoyer WhatsApp' : 'Notifier WhatsApp' }}</button>
                    </form>
                {% endif %}
                {% if not activite.publiee %}
                    <form class="activity-publish-form" method="post" action="{{ path('school_activite_publish', {id: activite.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('publish_activity_' ~ activite.id) }}">
                        <label class="activity-notify-inline">
                            <input type="checkbox" name="notify_parents" value="1" {% if activite.notifierParents %}checked{% endif %}>
                            <span>Notifier les parents après publication</span>
                        </label>
                        <button class="admin-btn admin-btn-primary w-100" type="submit"><span class="material-symbols-outlined">publish</span> Publier</button>
                    </form>
                {% else %}
                    <form method="post" action="{{ path('school_activite_unpublish', {id: activite.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('unpublish_activity_' ~ activite.id) }}">
                        <button class="admin-btn admin-btn-light w-100" type="submit"><span class="material-symbols-outlined">visibility_off</span> Remettre en brouillon</button>
                    </form>
                {% endif %}
            </section>

            <section class="admin-side-card activity-side-panel">
                <div class="activity-side-head">
                    <span class="material-symbols-outlined">bolt</span>
                    <div><h2>Actions</h2><p>Raccourcis rapides.</p></div>
                </div>
                <div class="activity-action-stack">
                    <a class="admin-btn admin-btn-light w-100" href="{{ path('school_activite_edit', {id: activite.id}) }}"><span class="material-symbols-outlined">edit</span> Modifier l’activité</a>
                    {% if activite.publiee and activite.visibleParent %}
                        <a class="admin-btn admin-btn-light w-100" href="{{ path('parent_activite_show', {id: activite.id}) }}" target="_blank" rel="noopener"><span class="material-symbols-outlined">open_in_new</span> Voir côté parent</a>
                    {% endif %}
                    <a class="admin-btn admin-btn-light w-100" href="{{ path('school_activite_index') }}"><span class="material-symbols-outlined">list_alt</span> Toutes les activités</a>
                </div>
            </section>
        </aside>
    </div>
</section>

<style>
.activity-detail-page{display:grid;gap:1rem;padding-bottom:2rem}.activity-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-left:6px solid var(--admin-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--admin-primary) 9%,var(--admin-surface)) 0%,var(--admin-surface) 72%);box-shadow:var(--admin-shadow-soft);border-radius:1.45rem;padding:1.15rem 1.35rem}.activity-detail-hero h1{margin:.12rem 0 .25rem;font-size:clamp(2rem,3vw,3rem);font-weight:950;letter-spacing:-.06em;line-height:1}.activity-detail-hero p{margin:0;color:var(--admin-muted);font-weight:750}.activity-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}.activity-detail-main{display:grid;gap:1rem}.activity-detail-story{display:grid;grid-template-columns:minmax(280px,40%) minmax(0,1fr);gap:1rem;padding:1rem;border-radius:1.45rem;box-shadow:var(--admin-shadow-soft)}.activity-detail-media{border:1px solid var(--admin-border);border-radius:1.25rem;overflow:hidden;background:var(--admin-surface-soft);min-height:310px;display:grid;place-items:center}.activity-detail-media img,.activity-detail-media video{width:100%;height:100%;min-height:310px;max-height:430px;object-fit:cover;display:block;background:#000}.activity-video-external,.activity-detail-placeholder{height:100%;min-height:310px;width:100%;display:grid;place-items:center;text-align:center;gap:.4rem;padding:2rem;color:var(--admin-muted)}.activity-video-external .material-symbols-outlined,.activity-detail-placeholder .material-symbols-outlined{font-size:3.25rem;color:var(--admin-primary)}.activity-video-external strong,.activity-detail-placeholder strong{font-size:1.1rem;color:var(--admin-text)}.activity-video-external a{font-weight:950;color:var(--admin-primary);word-break:break-all}.activity-detail-copy{display:flex;flex-direction:column;justify-content:center;padding:.4rem}.activity-detail-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.85rem}.activity-type-pill{display:inline-flex;align-items:center;border-radius:999px;background:color-mix(in srgb,var(--admin-primary) 8%,var(--admin-surface-soft));border:1px solid color-mix(in srgb,var(--admin-primary) 18%,var(--admin-border));padding:.28rem .7rem;font-size:.75rem;font-weight:950;color:var(--admin-primary)}.activity-detail-copy h2{font-size:clamp(1.55rem,2vw,2.15rem);letter-spacing:-.045em;margin:0 0 .6rem;color:var(--admin-text)}.activity-detail-text{font-size:1rem;line-height:1.75;font-weight:700;color:var(--admin-text);margin-bottom:1rem}.activity-detail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.activity-detail-facts div{border:1px solid var(--admin-border);background:var(--admin-surface-soft);border-radius:1rem;padding:.78rem}.activity-detail-facts span{display:block;text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;color:var(--admin-muted);font-weight:950;margin-bottom:.25rem}.activity-detail-facts strong{font-size:.96rem;color:var(--admin-text)}.activity-gallery-card-pro{padding:1rem;border-radius:1.45rem}.activity-section-head{border-bottom:1px solid var(--admin-border);padding-bottom:.85rem;margin-bottom:.95rem}.activity-photo-grid-pro{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}.activity-photo-grid-pro figure{margin:0;border:1px solid var(--admin-border);border-radius:1.1rem;overflow:hidden;background:var(--admin-surface-soft)}.activity-photo-grid-pro img{width:100%;height:150px;object-fit:cover;display:block}.activity-photo-grid-pro figcaption{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .75rem;color:var(--admin-muted);font-weight:850}.admin-link-danger{border:0;background:transparent;color:#b91c1c;font-weight:950;display:inline-grid;place-items:center;cursor:pointer}.activity-empty-gallery{min-height:170px;display:grid;place-items:center;text-align:center}.activity-empty-gallery .material-symbols-outlined{font-size:2.4rem;color:var(--admin-primary)}.activity-detail-aside{position:sticky;top:92px;display:grid;gap:1rem}.activity-side-panel{border:1px solid var(--admin-border);box-shadow:var(--admin-shadow-soft);border-radius:1.25rem;padding:1rem;display:grid;gap:.85rem}.activity-side-head{display:flex;align-items:flex-start;gap:.75rem}.activity-side-head>span{width:2.5rem;height:2.5rem;border-radius:.9rem;display:grid;place-items:center;background:color-mix(in srgb,var(--admin-primary) 10%,transparent);color:var(--admin-primary)}.activity-side-head h2{margin:0;font-size:1.2rem;font-weight:950;letter-spacing:-.025em}.activity-side-head p{margin:.1rem 0 0;color:var(--admin-muted);font-weight:700;line-height:1.35}.activity-side-list{display:grid;gap:.5rem}.activity-side-list div{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--admin-border);background:var(--admin-surface-soft);border-radius:.85rem;padding:.62rem .72rem}.activity-side-list span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--admin-muted);font-weight:950}.activity-side-list strong{font-size:.86rem;color:var(--admin-text);text-align:right}.activity-action-stack,.activity-publish-form{display:grid;gap:.55rem}.activity-notify-inline{display:flex;align-items:center;gap:.45rem;border:1px solid var(--admin-border);border-radius:.9rem;padding:.7rem .8rem;background:var(--admin-surface-soft);font-size:.82rem;font-weight:850;color:var(--admin-text)}.activity-notify-inline input{width:1rem;height:1rem;accent-color:var(--admin-primary)}.w-100{width:100%!important}@media(max-width:1120px){.activity-detail-layout{grid-template-columns:1fr}.activity-detail-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.activity-detail-story{grid-template-columns:1fr 1fr}}@media(max-width:760px){.activity-detail-hero{display:grid}.activity-detail-story{grid-template-columns:1fr}.activity-detail-aside{grid-template-columns:1fr}.activity-detail-facts{grid-template-columns:1fr}.activity-detail-media,.activity-detail-media img,.activity-detail-media video,.activity-video-external,.activity-detail-placeholder{min-height:235px}.activity-photo-grid-pro{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-photo-grid-pro img{height:135px}}@media(max-width:480px){.activity-photo-grid-pro{grid-template-columns:1fr}.activity-photo-grid-pro img{height:220px}}
</style>
{% endblock %}
