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

{% block stylesheets %} 

{% endblock %}

{% block body %}

<!-- page-title -->
        <section class="page-title centred">
            <div class="bg-layer" style="background-image: url({{asset('assets/assets/images/background/page-title.jpg')}});"></div>
            <div class="auto-container">
                <div class="content-box">
                    <h1>Liste des destinations</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="{{path('home')}}">Accueil</a></li>
                        <li>Liste des destinations</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- page-title end -->


        <!-- destination-page-section -->
        <section class="destination-page-section pt_150 pb_150 centred">
            <div class="outer-container clearfix">
                
                {% for destination in destinations %} 
                <div class="destination-block {{ loop.index is odd ? 'big-column' : 'small-column' }}"> 
                    <div class="destination-block-one"> <div class="inner-box"> 
                        <figure class="image-box">
                                <img src="{{ asset('uploads/destinations/' ~ destination.image1) }}" alt="" style="width:1068px; height:600px;">
                            </figure> 
                        <div class="content-box"> 
                            <span class="rating">
                                <i class="icon-2"></i>4.5</span> 
                                <div class="text-box centred"> 
                                    <h2><a href="{{ path('destination_home', {'id': destination.id}) }}">{{ destination.pays }}, {{ destination.ville }}</a>
                                    </h2> 
                                    <h3>${{ destination.montant }}</h3> 
                                    <div class="link"> <a href="{{ path('destination_home', {'id': destination.id}) }}" class="theme-btn btn-two">Decouvrir</a> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
                {% endfor %}
                <br>
            <div class="pagination-wrapper centred pt_30">
                <ul class="pagination clearfix">
                    {% if currentPage > 1 %}
                        <li><a href="{{ path('destination_toutes', {'page': currentPage - 1}) }}"><i class="icon-28"></i></a></li>
                    {% endif %}

                    {% for i in 1..pages %}
                        <li>
                            <a href="{{ path('destination_toutes', {'page': i}) }}" 
                            class="{{ i == currentPage ? 'current' : '' }}">
                            {{ i }}
                            </a>
                        </li>
                    {% endfor %}

                    {% if currentPage < pages %}
                        <li><a href="{{ path('destination_toutes', {'page': currentPage + 1}) }}"><i class="icon-29"></i></a></li>
                    {% endif %}
                </ul>
            </div>
            
        </section>
        <!-- destination-page-section end -->
      
{% endblock %}