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

{% block title %}Évènements - Le Migennois{% endblock %}

{% block body %}
    <main role="main">
        <section class="evenement" data-controller="swiperEvent">
            <div class="container">
                <div class="title-subtitle blue">
                    <h2>Nos évènements</h2>
                </div>
                <div class="swiper-js">
                    <div class="wrapper swiper-wrapper">
                        {% for event in events %}
                            <div class="wrapper__item swiper-slide">
                                <img src="{{ asset('images/evenement.jpg') }}" alt="" class="wrapper__item__poster">
                                <div class="wrapper__item__content">
                                    <div class="wrapper__item__content__wrapper">
                                        <span class="date">{{ event.date|date('d/m/Y') }}</span>
                                        <span class="tel">{{ event.telephone }}</span>
                                    </div>
                                    <h2>{{ event.name }}</h2>
                                    <p>
                                        {{ event.description }}
                                    </p>
                                    <div class="wrapper__item__content__wrap">
                                        <a href="{{ event.link }}" class="btn blue" target="_blank">Voir l'événement</a>
                                        <div class="wrapper__item__content__wrap__wrapper">
                                            <img src="{{ asset('images/icons/pin.svg') }}" alt="">
                                            <span>{{ event.ville }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <!-- Navigation carousel -->
                    <div class="swiper-button-prev sw-button">
                        <img src="{{ asset('images/icons/prev.svg') }}" alt="Flêche gauche">
                    </div>
                    <div class="swiper-button-next sw-button">
                        <img src="{{ asset('images/icons/next.svg') }}" alt="Flêche droite">
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}