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

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

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

{% block body %}
    {% if is_granted('ROLE_DIRECTION') %}
        <div class="card mb-5 mb-xl-8">
            <div class="card-header border-0 pt-6">
                <div class="card-title"><h3>Planifier un événement</h3></div>
            </div>
            <div class="card-body pt-0">
                <form method="post" action="{{ path('equipe_calendrier_planifier') }}" class="row g-3">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('equipe_calendrier_planifier') }}">
                    <div class="col-md-4">
                        <label class="form-label">Titre *</label>
                        <input type="text" name="titre" required class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Début *</label>
                        <input type="datetime-local" name="date_debut" value="{{ 'now'|date('Y-m-d\\TH:i') }}" required class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Fin (facultatif)</label>
                        <input type="datetime-local" name="date_fin" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Lieu</label>
                        <input type="text" name="lieu" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control"></textarea>
                    </div>
                    <div class="col-12 form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="visible_parents" value="1" checked id="evenement-visible-parents">
                        <label class="form-check-label" for="evenement-visible-parents">Visible des parents</label>
                        <div class="text-muted fs-8">Décochez pour un événement interne à l'équipe uniquement (réunion, formation...).</div>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">Planifier</button>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Événements</h3></div>
        </div>
        <div class="card-body pt-0">
            {% 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>Audience</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.visibleParents %}
                                            <span class="badge badge-light-success">Parents</span>
                                        {% else %}
                                            <span class="badge badge-light-warning">Interne</span>
                                        {% endif %}
                                    </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 %}