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

{% block title %}Détail de la sortie{% endblock %}

{% block body %}
    <section class="event-page">
        <article class="event-card"
                 data-day="{{ event.dateStart|date('d') }}"
                 data-month="{{ event.dateStart|format_date(pattern='MMM', locale='fr')|upper }}">

            <div class="event-header">
                <div class="event-heading">
                    <h1 class="event-title">{{ event.name }}</h1>
                </div>

                <span class="event-status">{{ event.status.name }}</span>
            </div>

            <div class="event-layout">
                <div class="event-main">
                    <div class="event-grid">
                        <div class="event-item">
                            <span class="label">Catégorie</span>
                            <span class="value">{{ event.category.name }}</span>
                        </div>

                        <div class="event-item">
                            <span class="label">Horaires</span>
                            <span class="value">
                                {{ event.dateStart|format_datetime(pattern="HH'h'mm", locale="fr") }}
                                —
                                {{ event.dateStart|date_modify("+" ~ event.duration ~ " minutes")|format_datetime(pattern="HH'h'mm", locale="fr") }}
                            </span>
                        </div>

                        <div class="event-item">
                            <span class="label">Date limite d'inscription</span>
                            <span class="value">
                                {{ event.deadline|format_date(pattern="d MMMM yyyy", locale='fr') }}
                            </span>
                        </div>

                        <div class="event-item">
                            <span class="label">Places restantes</span>
                            <span class="value">
                                {{ event.maxIscription - event.registred.count }}
                            </span>
                        </div>

                        <div class="event-item">
                            <span class="label">Organisateur</span>
                            {% if event.organizer is not null %}
                                <span class="value">{{ event.organizer.name }}</span>
                            {% else %}
                                <span class="value">Organisateur supprimé</span>
                            {% endif %}
                        </div>

                        <div class="event-item">
                            <span class="label">Campus</span>
                            <span class="value">{{ event.campus.name }}</span>
                        </div>

                        <div class="event-item event-item-full">
                            <span class="label">Adresse</span>
                            <span class="value">{{ event.adress.street }}</span>
                            <span class="value">{{ event.adress.city.zipCode }} {{ event.adress.city.name }}</span>
                            <span class="value coords">
                                Latitude : {{ event.adress.latitude }} · Longitude : {{ event.adress.longitude }}
                            </span>
                        </div>
                    </div>

                    <div class="event-description-block">
                        <h2>Description</h2>
                        <p>{{ event.eventInfo }}</p>
                    </div>

                    {% if event.canceledInfo %}
                        <div class="event-cancel-block">
                            <h2>Détail annulation</h2>
                            <p>{{ event.canceledInfo }}</p>
                        </div>
                    {% endif %}
                </div>

                <aside class="participants-block participants-side">
                    <h2>Participants</h2>
                    <ul class="participants-list participants-scroll">
                        {% for user in event.registred %}
                            <li>
                                <a href="{{ path('user_detail_id', {'id': user.id}) }}">
                                    {{ user.name }} {{ user.lastname }}
                                </a>
                            </li>
                        {% else %}
                            <li>Aucun participant</li>
                        {% endfor %}
                    </ul>
                </aside>
            </div>

            <div class="event-actions">
                {% if app.user in event.registred %}
                    <form method="post" action="{{ path('desinscription_event', {id: event.id}) }}">
                        <button type="submit" class="btnEventDetail btn-primary">Se désinscrire</button>
                    </form>
                {% elseif event.registred.count < event.maxIscription %}
                    <form method="post" action="{{ path('inscription_event', {id: event.id}) }}">
                        <button type="submit" class="btnEventDetail btn-primary">S'inscrire</button>
                    </form>
                {% endif %}

                {% if is_granted('EVENT_EDIT', event) %}
                    <a class="btnEventDetail btn-secondary" href="{{ path('update_event', {'id': event.id}) }}">
                        Modifier l'évènement
                    </a>
                {% endif %}
            </div>
        </article>
    </section>
{% endblock %}