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

{% 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>{{categorie.titre}}</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="{{path('home')}}">Accueil</a></li>
                        <li><a href="{{path('home')}}">Services</a></li>
                        <li>{{categorie.titre}}</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- page-title end -->


        <!-- tours-section -->
        <section class="tours-section before-none pt_150 pb_120">
            <div class="auto-container">
                <div class="inner-container">
                    <div class="row clearfix">
                        
                        {% for tours in tours %}

                        <div class="col-lg-4 col-md-6 col-sm-12 tour-block">
                            <div class="tour-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                                <div class="inner-box">
                                    <div class="image-box">
                                        <figure class="image">
                                            <img src="{{asset('uploads/services/' ~ tours.photos[0].fileName)}}" alt="">
                                            <span>Nouveau</span>
                                            <button class="like-btn"><i class="icon-3"></i></button>
                                        </figure>
                                        {% if tours.photos | length > 1 %}
                                        <ul class="image-list clearfix">
                                            {% for photo in tours.photos %}
                                            <li><img src="{{asset('uploads/services/' ~ photo.fileName)}}" alt=""></li>
                                            {% endfor %}
                                        </ul>
                                        {% endif %}
                                    </div>
                                    <div class="lower-content">
                                        <ul class="info-list">
                                            {# <li class="time"><i class="icon-5"></i>3 days</li> #}
                                            {# <li class="rating">
                                                <i class="icon-2"></i>
                                                <i class="icon-2"></i>
                                                <i class="icon-2"></i>
                                                <i class="icon-2"></i>
                                                <i class="icon-2"></i>
                                            </li> #}
                                        </ul>
                                        <h3><a href="tour-details.html">{{tours.titre}}</a></h3>
                                        <span class="location-box gradient-color"><i class="icon-6 gradient-color"></i> {{tours.pays}}</span>
                                        <div class="lower-box">
                                            {# <h3>$150.00 <del>$250.00</del></h3> #}
                                            <a href="{{path('service_show', {'id': tours.id})}}" class="theme-btn btn-one">Découvrir</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {% else %}

                        <p>Il n'y a aucun circuit touristique en ce moment</p>
                        
                        {% endfor %}

                    </div>
                    {# <div class="pagination-wrapper centred pt_30">
                        <ul class="pagination clearfix">
                            <li><a href="tour-2.html"><i class="icon-28"></i></a></li>
                            <li><a href="tour-2.html" class="current">1</a></li>
                            <li><a href="tour-2.html">2</a></li>
                            <li><a href="tour-2.html">3</a></li>
                            <li><a href="tour-2.html">4</a></li>
                            <li><a href="tour-2.html"><i class="icon-29"></i></a></li>
                        </ul>
                    </div> #}
                </div>
            </div>
        </section>
        <!-- tours-section end -->

{% endblock %}