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


        <!-- destination-details -->
        <section class="destination-details pt_150 pb_60">
            <div class="auto-container">
                <div class="row clearfix">

                    <div class="col-lg-8 col-md-12 col-sm-12 content-side">
                        <div class="tour-details-content">
                            <figure class="upper-image"><img src="{{asset('uploads/destinations/' ~ destination.image1)}}" alt="" style="width:856px; height:450px;"></figure>
                            <div class="content-box">
                                <ul class="location-box">
                                    <li><i class="icon-6"></i>{{ destination.pays }} </li>
                                    <li><button type="button"><i class="icon-3"></i>{{ destination.ville }}</button></li>
                                </ul>
                                <h2>{{ destination.site }}</h2>
                                <ul class="info-list">
                                    <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 light"></i>
                                        {{ destination.montant }}

                                    </li>
                                </ul>
                                <p>
                                  {{ destination.desciption }}
                                </p>
                                
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-12 col-sm-12 sidebar-side">
                        <div class="tour-sidebar ml_30">
                            
                            <div class="sidebar-widget search-widget mb_40">
                                <div class="search-form">
                                    <form method="post" action="#">
                                        <div class="form-group">
                                            <input type="search" name="search-field" placeholder="Search..." required>
                                            <button type="submit"><i class="icon-30"></i></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            
                            <div class="sidebar-widget filter-widget mb_40">
                                <div class="widget-title">
                                    <h3>Pricing</h3>
                                </div>
                                <div class="range-slider">
                                    <div class="price-range-slider"></div>
                                    <div class="range-box">
                                        <div class="price-range mt_10">
                                            <div class="input p_relative d_iblock"><input type="text" class="property-amount" name="field-name" readonly=""></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="sidebar-widget tour-information mb_40">
                                <div class="widget-title">
                                    <h3>Information sur la destination</h3>
                                </div>
                                <div class="widget-content">
                                    <div class="select-box">
                                        <h5>Site </h5>
                                        <select class="wide">
                                           <option data-display="{{destination.site}}">{{destination.site}}</option>
                                        </select>
                                    </div>
                                    <div class="select-box">
                                        <h5>Durée conseillée</h5>
                                        <select class="wide">
                                           <option data-display="{{destination.dureeConseillee}}">{{destination.dureeConseillee}}</option>
                                        </select>
                                    </div>
                                    <div class="select-box">
                                        <h5>Tour Location</h5>
                                        <select class="wide">
                                           <option data-display="{{destination.circuit}}">{{destination.circuit}}</option>
                                        </select>
                                    </div>
                                    <div class="select-box">
                                        <h5>Langue</h5>
                                        <select class="wide">
                                           <option data-display="{{destination.langue}}">{{destination.langue}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="sidebar-widget rating-widget">
                                <div class="widget-title">
                                    <h3>Notation</h3>
                                </div>
                                <div class="widget-content">
                                    <ul class="rating-list clearfix">
                                        <li>
                                            <div class="check-box">
                                                <input class="check" type="checkbox" id="checkbox4">
                                                <label for="checkbox4"><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><span>(3 k Review's)</span></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-box">
                                                <input class="check" type="checkbox" id="checkbox5">
                                                <label for="checkbox5"><i class="icon-2"></i><i class="icon-2"></i><i class="icon-2"></i><i class="icon-2"></i><i class="icon-2 light"></i><span>(1.5 k Review's)</span></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-box">
                                                <input class="check" type="checkbox" id="checkbox6">
                                                <label for="checkbox6"><i class="icon-2"></i><i class="icon-2"></i><i class="icon-2"></i><i class="icon-2 light"></i><i class="icon-2 light"></i><span>(150 Review's)</span></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-box">
                                                <input class="check" type="checkbox" id="checkbox7">
                                                <label for="checkbox7"><i class="icon-2"></i><i class="icon-2"></i><i class="icon-2 light"></i><i class="icon-2 light"></i><i class="icon-2 light"></i><span>(25 Review's)</span></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-box">
                                                <input class="check" type="checkbox" id="checkbox8">
                                                <label for="checkbox8"><i class="icon-2"></i><i class="icon-2 light"></i><i class="icon-2 light"></i><i class="icon-2 light"></i><i class="icon-2 light"></i><span>(08 Review's)</span></label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- destination-details end -->


        <!-- tours-section -->
        <section class="tours-section alternat-2 pb_30">
            <div class="auto-container">
                <div class="sec-title mb_60">
                    <h2>Les circuits populaires</h2>
                </div>
                <div class="inner-container">
                    <div class="row clearfix">
                        {% for circuit in circuits %}
                        <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/circuits/' ~ circuit.image1) }}" alt="" style="width:417px; height:309px;">
                                            <span>Popular</span>
                                        </figure>
                                    </div>
                                    <div class="lower-content">
                                        <span class="location-box"><i class="icon-6"></i> {{circuit.pays}}, {{circuit.ville}}</span>
                                        <h3><a href="{{path('circuit_home')}}">{{circuit.libelle}} </a></h3>
                                        <ul class="info-list">
                                            <li class="time"><i class="icon-5"></i>{{circuit.jour}}</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 light"></i>
                                                
                                            </li>
                                        </ul>
                                        <div class="lower-box">
                                            <h3>{{circuit.montant}}</h3>
                                            <a href="{{path('circuit_home')}}" class="link"><span>Lire plus</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </section>
        <!-- tours-section end -->


        <!-- adventure-section -->
        <section class="adventure-section centred pb_120">
            <div class="auto-container">
                <div class="sec-title mb_60 align-1">
                    <h2>Activité tendance</h2>
                    <!--a href="destination-details.html" class="theme-btn btn-two">View All</-->
                </div>
                <div class="row clearfix">
                    {% for activite in activites %}
                    <div class="col-lg-3 col-md-6 col-sm-12 adventure-block">
                        <div class="adventure-block-one">
                            <div class="inner-box">
                                <figure class="image-box"><img src="{{ asset('uploads/activites/' ~ activite.image) }}" alt="" style="width:306px; height:400px;"></figure>
                                <div class="content-box">
                                    <a href="#">{{ activite.libelle }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    
                </div>
            </div>
        </section>
        <!-- adventure-section end -->

{% endblock %}