{% extends 'equipe/_layout.html.twig' %}

{% block title %}Galerie vidéos - {{ groupe.nom }}{% endblock %}

{% block page_title %}Galerie vidéos à publier - {{ groupe.nom }}{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Ajouter une vidéo</h3></div>
        </div>
        <div class="card-body pt-0">
            <p class="text-muted">Les parents téléchargeront la vidéo pour la lire sur leur ordinateur - pas de lecture directe dans l'espace parent.</p>
            <form method="post" action="{{ path('equipe_videos_televerser', {groupeId: groupe.id}) }}" enctype="multipart/form-data">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('videos_televerser_' ~ groupe.id) }}">
                <div class="mb-4">
                    <label class="form-label">Fichier (MP4/MOV/WebM/AVI, 20 Mo max) *</label>
                    <input type="file" name="fichier" accept="video/mp4,video/quicktime,video/webm,video/x-msvideo" required class="form-control">
                </div>
                <fieldset class="border rounded p-4 mb-4">
                    <legend class="fs-6 fw-bold">Enfants visibles sur la vidéo</legend>
                    <div class="d-flex flex-wrap gap-4">
                        {% for enfant in groupe.enfants %}
                            {% if enfant.actif %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="enfants[]" value="{{ enfant.id }}" id="video-enfant-{{ enfant.id }}">
                                    <label class="form-check-label" for="video-enfant-{{ enfant.id }}">{{ enfant.prenom }} {{ enfant.nom }}</label>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </fieldset>
                <button type="submit" class="btn btn-primary">Téléverser</button>
            </form>
        </div>
    </div>

    {% if lignes is empty %}
        <div class="card"><div class="card-body text-muted">Aucune vidéo pour ce groupe.</div></div>
    {% else %}
        <div class="card">
            <div class="card-body pt-6">
                <div class="d-flex flex-column gap-4">
                    {% for ligne in lignes %}
                        <div class="border rounded p-4{% if ligne.bloquee %} border-danger{% endif %}">
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                                <div class="d-flex align-items-center gap-3">
                                    <i class="ki-outline ki-film fs-2x text-muted"></i>
                                    <span>
                                        {{ ligne.video.nomOriginal }} - {{ (ligne.video.tailleOctets / 1000000)|round(1) }} Mo - {{ ligne.video.dateAjout|date('d/m/Y H:i') }}
                                        {% if ligne.video.publiee %}
                                            <span class="badge badge-light-success">Publiée</span>
                                        {% elseif ligne.bloquee %}
                                            <span class="badge badge-light-danger">Bloquée - consentement manquant</span>
                                        {% else %}
                                            <span class="badge badge-light">Non publiée</span>
                                        {% endif %}
                                    </span>
                                </div>
                                <a href="{{ ligne.lienTelechargement }}" class="btn btn-light btn-sm">Télécharger</a>
                            </div>

                            <p class="mb-3">
                                Enfants tagués :
                                {% for enfant in ligne.video.enfantsTagges %}
                                    {{ enfant.prenom }} {{ enfant.nom }}{% if not loop.last %}, {% endif %}
                                {% else %}
                                    aucun
                                {% endfor %}
                            </p>

                            {% if ligne.bloquee %}
                                <div class="alert alert-danger">Au moins un enfant visible n'a pas de consentement "suivi quotidien" accordé - publication bloquée.</div>
                            {% endif %}

                            <div class="d-flex gap-2">
                                <form method="post" action="{{ path(ligne.video.publiee ? 'equipe_videos_depublier' : 'equipe_videos_publier', {groupeId: groupe.id, videoId: ligne.video.id}) }}">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token((ligne.video.publiee ? 'videos_depublier_' : 'videos_publier_') ~ ligne.video.id) }}">
                                    <button type="submit" class="btn {{ ligne.video.publiee ? 'btn-light' : 'btn-light-success' }}" {% if not ligne.video.publiee and ligne.bloquee %}disabled{% endif %}>{{ ligne.video.publiee ? 'Dépublier' : 'Publier' }}</button>
                                </form>
                                <form method="post" action="{{ path('equipe_videos_supprimer', {groupeId: groupe.id, videoId: ligne.video.id}) }}">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('videos_supprimer_' ~ ligne.video.id) }}">
                                    <button type="submit" class="btn btn-light-danger">Supprimer</button>
                                </form>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}