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

{% block title %}Photos - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block page_title %}Photos - {{ enfant.prenom }} {{ enfant.nom }}{% endblock %}

{% block body %}
    <div class="card mb-5">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Photos</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if photos is empty %}
                <div class="text-muted">Aucune photo publiée pour le moment.</div>
            {% else %}
                <div class="row g-4">
                    {% for ligne in photos %}
                        <div class="col-md-3 col-sm-4 col-6">
                            <a href="{{ ligne.lienConsultation }}" target="_blank" rel="noopener" class="d-block">
                                <img src="{{ ligne.lienMiniature }}" alt="Photo du {{ ligne.photo.dateAjout|date('d/m/Y') }}" class="rounded w-100" style="aspect-ratio:1;object-fit:cover">
                            </a>
                            <div class="text-muted fs-7 mt-1">{{ ligne.photo.dateAjout|date('d/m/Y') }}</div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Vidéos</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if videos is empty %}
                <div class="text-muted">Aucune vidéo publiée pour le moment.</div>
            {% else %}
                <div class="d-flex flex-column gap-3">
                    {% for ligne in videos %}
                        <div class="d-flex align-items-center justify-content-between border rounded p-3">
                            <div class="d-flex align-items-center gap-3">
                                <i class="ki-outline ki-film fs-2x text-muted"></i>
                                <div>
                                    <div>{{ ligne.video.nomOriginal }}</div>
                                    <div class="text-muted fs-7">{{ ligne.video.dateAjout|date('d/m/Y') }} - {{ (ligne.video.tailleOctets / 1000000)|round(1) }} Mo</div>
                                </div>
                            </div>
                            <a href="{{ ligne.lienTelechargement }}" class="btn btn-light-primary btn-sm">Télécharger</a>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}