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

{% block title %}Mes réservations {% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: "Vos réservations"}) }}

    <!-- Class Start -->
    <div class="container-fluid pt-5">
        <div class="container">
            <div class="text-center pb-2">
                <p class="section-title px-5">
                    <span class="px-2">Les ateliers</span>
                </p>
                <h1 class="mb-4">Vos réservations</h1>
            </div>

            {% if reservations|length > 0 %}

                <div class="row">

                    {% for content in reservations %}

                        <div class="col-lg-6 mb-5">
                            <div class="card border-0 bg-light shadow-sm pb-2">
                                <img class="card-img-top mb-2" src="{{ content.event.image }}" alt="" />
                                <div class="card-body text-center">
                                    <h4 class="card-title">{{ content.event.name }}</h4>
                                    <p class="card-text">
                                        {{ content.event.description }}
                                    </p>
                                </div>
                                <div class="card-footer bg-transparent py-4 px-5">
                                    <div class="row border-bottom">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Professeur</strong>
                                        </div>
                                        <div class="col-6 py-1">{{ content.event.teacher.firstname }}</div>
                                    </div>
                                    <div class="row border-bottom">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Date</strong>
                                        </div>
                                        <div class="col-6 py-1">
                                            {{ content.event.startDayAt|date("d/m/Y H:i:s", "Europe/Paris") }}
                                        </div>
                                    </div>
                                    <div class="row border-bottom">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Durée</strong>
                                        </div>
                                        <div class="col-6 py-1">
                                            {{ content.event.period }} min
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 py-1 text-right border-right">
                                            <strong>Prix</strong>
                                        </div>
                                        <div class="col-6 py-1">{{ content.event.price }}</div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <hr />
                                    <center>
                                        <strong><span>- Détails -</span></strong>
                                        <br /><br />
                                        <p>
                                            {{ content.event.informations }}
                                        </p>
                                    </center>
                                </div>

                            </div>
                        </div>

                    {% endfor %}

                </div>

            {% else %}
                <div class="text-center pb-2">
                    <p>
                        Aucune réservation existante. 
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
    <!-- Class End -->

{% endblock %}