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

{% block title %}Attractions - Les gîtes de Roquetoire{% endblock %}

{% block meta %}
    <meta name="description" content="Attraction autour des gîtes de Roquetoire">
{% endblock %}

{% block content %}

<div class="container mt-5">
    <h1>Attractions</h1>
    <p class="text-center mb-5 mt-3">
    Découvrez les trésors cachés qui entourent nos gîtes grâce à notre page dédiée aux attractions locales. 
    Que vous soyez en quête d'aventure en plein air, de visites culturelles ou de détente au cœur de la nature, notre sélection d'activités 
    vous promet des expériences mémorables à chaque tournant. Plongez dans la richesse historique de la région, explorez ses paysages pittoresques, 
    ou laissez-vous tenter par les délices culinaires et les marchés locaux. Cette page est votre guide ultime pour tirer le meilleur parti de votre 
    séjour chez nous et découvrir tout ce que notre destination a à offrir.
    </p>

    {% set compteur = 0 %}
    {% for attractions in attractions %}
        {% if compteur % 2 == 0 %}
        
        <div class="row">
            <div class="col-md-4 d-flex justify-content-center">
                <img src="/uploads/{{ attractions.illustration }}" class="attraction-illustration" alt="{{ attractions.title }}">
            </div>
            <div class="col-md-8">
                <H5>{{ attractions.title }}</H5>
                <div class="d-flex align-items-center">
                    <img src="{{ asset('assets/img/map.png') }}" alt="Une map" class="img-fluid" style="max-width: 40px;">
                    <p class="me-5 ms-3 my-auto">{{ attractions.address }} {{ attractions.city }}</p>
                    <img src="{{ asset('assets/img/link.png') }}" alt="Lien" class="img-fluid" style="max-width: 40px;">
                    <a href="{{ attractions.link }}" target="_blank" class="ms-3">
                        {{ attractions.linkName }}
                    </a>
                </div>
                <p>{{ attractions.description|raw }}</p>
            </div>
        </div>

        <hr>

        {% set compteur = compteur + 1 %}
        {% elseif compteur % 2 != 0 %}
            
        <div class="row">
            <div class="col-md-8">
                <H5>{{ attractions.title }}</H5>
                <div class="d-flex align-items-center">
                    <img src="{{ asset('assets/img/map.png') }}" alt="Une map" class="img-fluid" style="max-width: 40px;">
                    <p class="me-5 ms-3 my-auto">{{ attractions.address }} {{ attractions.city }}</p>
                    <img src="{{ asset('assets/img/link.png') }}" alt="Lien" class="img-fluid" style="max-width: 40px;">
                    <a href="{{ attractions.link }}" class="ms-3">
                        {{ attractions.linkName }}
                    </a>
                </div>
                <p>{{ attractions.description|raw }}</p>
            </div>
            <div class="col-md-4 d-flex justify-content-center">
                <img src="/uploads/{{ attractions.illustration }}" class="img-fluid attraction-illustration" alt="{{ attractions.title }}">
            </div>
        </div>

        <hr>
        {% set compteur = compteur + 1 %}
        {% endif %}
    {% endfor %}

</div>

{% endblock %}