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

{% block title %}Calendrier des événements{% endblock %}

{% block page_title %}Calendrier des événements{% endblock %}

{% block body %}
    <div class="card">
        <div class="card-body pt-6">
            {% if evenements is empty %}
                <div class="text-muted">Aucun événement.</div>
            {% else %}
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>Titre</th>
                                <th>Début</th>
                                <th>Fin</th>
                                <th>Lieu</th>
                                <th>Description</th>
                                <th>Statut</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            {% for evenement in evenements %}
                                <tr class="{{ evenement.estPasse ? 'opacity-50' : '' }}">
                                    <td>{{ evenement.titre }}</td>
                                    <td>{{ evenement.dateDebut|date('d/m/Y H:i') }}</td>
                                    <td>{{ evenement.dateFin ? evenement.dateFin|date('d/m/Y H:i') : '-' }}</td>
                                    <td>{{ evenement.lieu ?? '-' }}</td>
                                    <td>{{ evenement.description ?? '-' }}</td>
                                    <td>
                                        {% if evenement.estPasse %}
                                            <span class="badge badge-light">Passé</span>
                                        {% else %}
                                            <span class="badge badge-light-success">À venir</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}