{% extends 'school/base.html.twig' %}
{% block title %}Annonces TV | {{ ecole.nom }}{% endblock %}
{% block content %}
<section class="tv-admin-page">
    <div class="tv-admin-hero">
        <div><span>Phase TV 4</span><h1>Annonces TV</h1><p>Diffusez un message important ou urgent sur les écrans d’affichage dynamique.</p></div>
        <div class="tv-actions">
            <a class="tv-btn tv-btn-light" href="{{ path('school_planning_tv_index') }}"><span class="material-symbols-outlined">event_note</span>Planning</a>
            <a class="tv-btn tv-btn-primary" href="{{ path('school_annonce_tv_new') }}"><span class="material-symbols-outlined">campaign</span>Nouvelle annonce</a>
        </div>
    </div>

    <div class="tv-kpi-grid">
        <article><span class="material-symbols-outlined">campaign</span><small>Total</small><strong>{{ annonces|length }}</strong></article>
        <article><span class="material-symbols-outlined">visibility</span><small>Actives</small><strong>{{ annonces|filter(a => a.active)|length }}</strong></article>
        <article><span class="material-symbols-outlined">priority_high</span><small>Urgentes</small><strong>{{ annonces|filter(a => a.urgent and a.active)|length }}</strong></article>
    </div>

    <div class="tv-card">
        <div class="tv-card-head"><div><h2>Messages configurés</h2><p>Une annonce active et dans sa période d’affichage prend le dessus sur le planning TV.</p></div></div>
        {% if annonces is empty %}
            <div class="tv-empty"><span class="material-symbols-outlined">campaign</span><strong>Aucune annonce TV</strong><p>Ajoutez une annonce pour afficher un message immédiat sur la TV.</p></div>
        {% else %}
            <div class="tv-planning-list">
                {% for annonce in annonces %}
                    <article class="tv-planning-row" style="--row-color: {{ annonce.couleur ?: ecole.couleurAccent ?: '#c5a059' }};">
                        <div class="tv-row-icon"><span class="material-symbols-outlined">{{ annonce.urgent ? 'priority_high' : 'campaign' }}</span></div>
                        <div class="tv-row-body">
                            <div class="tv-badges">
                                <span class="tv-pill {{ annonce.active ? 'tv-pill-success' : 'tv-pill-muted' }}">{{ annonce.active ? 'Active' : 'Inactive' }}</span>
                                {% if annonce.urgent %}<span class="tv-pill tv-pill-warn">Urgente</span>{% endif %}
                                {% if annonce.sonnerie %}<span class="tv-pill tv-pill-warn">Sonnerie</span>{% endif %}
                                {% if annonce.section %}<span class="tv-pill tv-pill-soft">{{ annonce.section.nom }}</span>{% endif %}
                                {% if annonce.ecranTv %}<span class="tv-pill tv-pill-soft">{{ annonce.ecranTv.nom }}</span>{% endif %}
                            </div>
                            <h3>{{ annonce.titre }}</h3>
                            <p>{{ annonce.message }}</p>
                            <p class="tv-days">Durée : {{ annonce.dureeSecondes }}s · Période : {{ annonce.afficherDe ? annonce.afficherDe|date('d/m H:i') : 'maintenant' }} → {{ annonce.afficherJusqua ? annonce.afficherJusqua|date('d/m H:i') : 'sans fin' }}</p>
                        </div>
                        <div class="tv-row-actions">
                            <a class="tv-btn tv-btn-light" href="{{ path('school_annonce_tv_edit', {id: annonce.id}) }}">Modifier</a>
                            <form method="post" action="{{ path('school_annonce_tv_toggle', {id: annonce.id}) }}"><input type="hidden" name="_token" value="{{ csrf_token('toggle_annonce_tv_' ~ annonce.id) }}"><button class="tv-btn tv-btn-light" type="submit">{{ annonce.active ? 'Désactiver' : 'Activer' }}</button></form>
                            <form method="post" action="{{ path('school_annonce_tv_delete', {id: annonce.id}) }}" onsubmit="return confirm('Supprimer cette annonce TV ?');"><input type="hidden" name="_token" value="{{ csrf_token('delete_annonce_tv_' ~ annonce.id) }}"><button class="tv-btn tv-btn-danger" type="submit">Supprimer</button></form>
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</section>
<style>
.tv-admin-page{display:grid;gap:1rem;padding-bottom:2rem}.tv-admin-hero{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--admin-border);border-left:6px solid var(--admin-primary);border-radius:1.45rem;padding:1.35rem;background:linear-gradient(135deg,color-mix(in srgb,var(--admin-primary) 12%,#fff),var(--admin-surface));box-shadow:var(--admin-shadow-soft,0 18px 45px rgba(15,23,42,.06))}.tv-admin-hero span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:950;color:var(--admin-muted)}.tv-admin-hero h1{margin:.25rem 0;font-size:clamp(2rem,3vw,3rem);font-weight:950;letter-spacing:-.04em}.tv-admin-hero p{margin:0;color:var(--admin-muted);font-weight:750}.tv-actions,.tv-row-actions{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}.tv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--admin-border);border-radius:.9rem;padding:.72rem 1rem;min-height:42px;font-weight:950;text-decoration:none;color:var(--admin-text);background:var(--admin-surface)}.tv-btn-primary{background:var(--admin-primary);border-color:var(--admin-primary);color:#fff}.tv-btn-danger{background:#fef2f2;border-color:#fecaca;color:#b91c1c}.tv-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.tv-kpi-grid article,.tv-card{background:var(--admin-surface);border:1px solid var(--admin-border);border-radius:1.25rem;box-shadow:var(--admin-shadow-soft,0 18px 45px rgba(15,23,42,.06))}.tv-kpi-grid article{padding:1.05rem;border-left:4px solid var(--admin-accent)}.tv-kpi-grid span{width:42px;height:42px;border-radius:1rem;display:grid;place-items:center;color:var(--admin-primary);background:color-mix(in srgb,var(--admin-primary) 10%,transparent);margin-bottom:.9rem}.tv-kpi-grid small{display:block;text-transform:uppercase;letter-spacing:.07em;color:var(--admin-muted);font-weight:950}.tv-kpi-grid strong{display:block;font-size:2rem;font-weight:950}.tv-card{padding:1.1rem}.tv-card-head{border-bottom:1px solid var(--admin-border);padding-bottom:1rem;margin-bottom:1rem}.tv-card-head h2{font-size:1.2rem;font-weight:950;margin:0}.tv-card-head p{margin:.25rem 0 0;color:var(--admin-muted);font-weight:700}.tv-empty{text-align:center;border:1px dashed var(--admin-border);border-radius:1.25rem;padding:3rem 1rem;color:var(--admin-muted)}.tv-empty>span{font-size:3rem;color:var(--admin-primary)}.tv-empty strong{display:block;color:var(--admin-text);font-size:1.1rem;margin:.5rem 0}.tv-planning-list{display:grid;gap:.85rem}.tv-planning-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:.9rem;align-items:center;border:1px solid var(--admin-border);border-left:6px solid var(--row-color);border-radius:1.15rem;padding:.9rem;background:color-mix(in srgb,var(--admin-surface-soft) 55%,var(--admin-surface))}.tv-row-icon{width:52px;height:52px;border-radius:1rem;display:grid;place-items:center;background:color-mix(in srgb,var(--row-color) 13%,transparent);color:var(--row-color)}.tv-row-icon span{font-size:1.8rem}.tv-badges{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}.tv-pill{border-radius:999px;padding:.3rem .6rem;font-size:.68rem;text-transform:uppercase;font-weight:950;background:var(--admin-surface-soft);color:var(--admin-muted)}.tv-pill-success{background:color-mix(in srgb,#16a34a 12%,transparent);color:#15803d}.tv-pill-soft{background:color-mix(in srgb,var(--admin-primary) 10%,transparent);color:var(--admin-primary)}.tv-pill-warn{background:#fff7ed;color:#9a3412}.tv-row-body h3{margin:.35rem 0 .2rem;font-weight:950}.tv-row-body p{margin:.18rem 0;color:var(--admin-muted);font-weight:750}.tv-days{font-size:.82rem}@media(max-width:900px){.tv-admin-hero{align-items:flex-start;flex-direction:column}.tv-kpi-grid{grid-template-columns:1fr}.tv-planning-row{grid-template-columns:1fr}.tv-row-actions,.tv-row-actions form,.tv-row-actions .tv-btn,.tv-actions,.tv-actions .tv-btn{width:100%}}
</style>
{% endblock %}
