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

{% block title %}Activités | Portail parent{% endblock %}
{% block portal_title %}Activités de l’école{% endblock %}
{% block portal_subtitle %}Photos, vidéos, sorties, ateliers et moments importants partagés par l’école.{% endblock %}

{% block content %}
<section class="portal-page-head">
    <div>
        <h2>Fil des activités</h2>
        <p>{{ total|default(activites|length) }} activité(s) publiée(s) pour votre compte.</p>
    </div>
    <div class="portal-page-actions">
        <a class="portal-btn portal-btn-secondary" href="{{ path('parent_dashboard') }}"><span class="material-symbols-outlined">dashboard</span> Tableau de bord</a>
    </div>
</section>

<form class="portal-card portal-activity-filter-v2" method="get">
    <div>
        <label class="portal-label">Du</label>
        <input class="form-control" type="date" name="debut" value="{{ dateDebut|default('') }}">
    </div>
    <div>
        <label class="portal-label">Au</label>
        <input class="form-control" type="date" name="fin" value="{{ dateFin|default(selectedDate|default('')) }}">
    </div>
    <div class="portal-activity-filter-buttons">
        <button class="portal-btn portal-btn-primary" type="submit"><span class="material-symbols-outlined">filter_alt</span> Filtrer</button>
        <a class="portal-btn portal-btn-secondary" href="{{ path('parent_activite_feed') }}">Tout voir</a>
    </div>
</form>

{% if activites is empty %}
    <div class="portal-card portal-activity-empty-v2">
        <span class="material-symbols-outlined">dynamic_feed</span>
        <h2>Aucune activité publiée</h2>
        <p>Les photos, vidéos et activités de l’école apparaîtront ici dès publication.</p>
    </div>
{% else %}
    <div class="portal-feed-layout-v2">
        {% 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 : ecole.nom)) %}
            <article class="portal-feed-card-v2">
                <a class="portal-feed-media-v2" href="{{ path('parent_activite_show', {id: activite.id}) }}">
                    {% if cover %}
                        <img src="{{ asset(cover.publicPath) }}" alt="{{ activite.titre }}">
                    {% elseif activite.videoPublicPath or activite.videoUrl %}
                        <div class="portal-feed-placeholder-v2"><span class="material-symbols-outlined">smart_display</span></div>
                    {% else %}
                        <div class="portal-feed-placeholder-v2"><span class="material-symbols-outlined">photo_camera</span></div>
                    {% endif %}
                    <span class="portal-feed-media-badge-v2">{{ activite.photos|length }} photo(s){% if activite.videoPublicPath or activite.videoUrl %} · vidéo{% endif %}</span>
                </a>
                <div class="portal-feed-body-v2">
                    <div class="portal-feed-meta-v2">
                        <span class="portal-badge">{{ activite.typeLabel }}</span>
                        <span>{{ activite.dateDebut ? activite.dateDebut|date('d/m/Y H:i') : '-' }}</span>
                    </div>
                    <h3><a href="{{ path('parent_activite_show', {id: activite.id}) }}">{{ activite.titre }}</a></h3>
                    <p class="portal-feed-target-v2"><span class="material-symbols-outlined">adjust</span>{{ target }}</p>
                    {% if activite.description %}
                        {% set preview = activite.description|default('')|striptags %}
                        <p class="portal-feed-text-v2">{{ preview|length > 180 ? preview|slice(0, 180) ~ '...' : preview }}</p>
                    {% endif %}
                    <a class="portal-btn portal-btn-secondary portal-feed-open-v2" href="{{ path('parent_activite_show', {id: activite.id}) }}"><span class="material-symbols-outlined">visibility</span> Voir l’activité</a>
                </div>
            </article>
        {% endfor %}
    </div>

    {% if pages|default(1) > 1 %}
        <nav class="portal-pagination-v2" aria-label="Pagination activités">
            {% set queryBase = app.request.query.all|merge({'page': null}) %}
            {% if page > 1 %}
                <a class="portal-btn portal-btn-secondary" href="{{ path('parent_activite_feed', queryBase|merge({'page': page - 1})) }}"><span class="material-symbols-outlined">chevron_left</span> Précédent</a>
            {% endif %}
            <span>Page {{ page }} / {{ pages }}</span>
            {% if page < pages %}
                <a class="portal-btn portal-btn-secondary" href="{{ path('parent_activite_feed', queryBase|merge({'page': page + 1})) }}">Suivant <span class="material-symbols-outlined">chevron_right</span></a>
            {% endif %}
        </nav>
    {% endif %}
{% endif %}

<style>
.portal-activity-filter-v2{display:grid;grid-template-columns:180px 180px auto;gap:.8rem;align-items:end;margin-bottom:1rem}.portal-activity-filter-buttons{display:flex;gap:.55rem;justify-content:flex-end}.portal-activity-empty-v2{text-align:center;display:grid;gap:.5rem;place-items:center;padding:3rem 1.5rem}.portal-activity-empty-v2 .material-symbols-outlined{font-size:3.3rem;color:var(--portal-primary)}.portal-activity-empty-v2 h2{font-weight:950;margin:0}.portal-activity-empty-v2 p{margin:0;color:var(--portal-muted);font-weight:700}.portal-feed-layout-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.portal-feed-card-v2{background:#fff;border:1px solid var(--portal-border);border-radius:24px;box-shadow:var(--portal-shadow);overflow:hidden;display:grid;grid-template-columns:220px minmax(0,1fr);min-height:210px}.portal-feed-media-v2{position:relative;display:block;background:var(--portal-soft);overflow:hidden;text-decoration:none}.portal-feed-media-v2 img{width:100%;height:100%;object-fit:cover;display:block}.portal-feed-placeholder-v2{height:100%;min-height:210px;display:grid;place-items:center;background:linear-gradient(135deg,var(--portal-soft),#fff)}.portal-feed-placeholder-v2 .material-symbols-outlined{font-size:3rem;color:var(--portal-primary)}.portal-feed-media-badge-v2{position:absolute;left:.75rem;bottom:.75rem;background:rgba(15,35,34,.76);color:#fff;border-radius:999px;padding:.42rem .7rem;font-size:.75rem;font-weight:900}.portal-feed-body-v2{padding:1rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.45rem;min-width:0}.portal-feed-meta-v2{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:var(--portal-muted);font-weight:850;font-size:.82rem}.portal-feed-body-v2 h3{font-size:1.2rem;line-height:1.18;font-weight:950;letter-spacing:-.035em;margin:.15rem 0}.portal-feed-body-v2 h3 a{text-decoration:none;color:var(--portal-text)}.portal-feed-target-v2{display:flex;align-items:center;gap:.3rem;margin:0;color:var(--portal-muted);font-weight:800;font-size:.88rem}.portal-feed-target-v2 .material-symbols-outlined{font-size:1rem;color:var(--portal-primary)}.portal-feed-text-v2{margin:.2rem 0;color:var(--portal-text);font-weight:650;line-height:1.55}.portal-feed-open-v2{margin-top:auto;align-self:flex-start}.portal-pagination-v2{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.2rem}.portal-pagination-v2 span{font-weight:900;color:var(--portal-muted)}@media(max-width:1100px){.portal-feed-layout-v2{grid-template-columns:1fr}.portal-feed-card-v2{grid-template-columns:240px minmax(0,1fr)}}@media(max-width:720px){.portal-activity-filter-v2{grid-template-columns:1fr}.portal-activity-filter-buttons{display:grid;grid-template-columns:1fr 1fr}.portal-feed-card-v2{grid-template-columns:1fr}.portal-feed-media-v2 img,.portal-feed-placeholder-v2{height:260px}.portal-feed-open-v2{width:100%}.portal-pagination-v2{flex-wrap:wrap}.portal-pagination-v2 .portal-btn{flex:1 1 140px}}
</style>
{% endblock %}
