{% 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>{{service.titre}}</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="{{path('home')}}">Accueil</a></li>
                        <li><a href="{{path('home')}}">Services</a></li>
                        <li><a href="{{path('home')}}">{{service.type}}</a></li>
                        <li>{{service.titre}}</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/services/' ~ service.photos[0].fileName)}}" alt="" style="width:856px; height:450px;"></figure>
                            <div class="content-box">
                                <ul class="location-box">
                                    <li><i class="icon-6"></i>{{ service.pays }} </li>
                                </ul>
                                <h2>{{ service.titre }}</h2>
                                <ul class="info-list" style="border-bottom: 1px solid #E5E5E5; margin-bottom: 30px; padding-bottom: 30px;">
                                    <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>
                                        {# <i class="icon-2 light"></i> #}
                                    </li>
                                </ul>
                                <p>
                                  {{ service.contenu | raw }}
                                </p>
                                
                                {% if service.sections is defined and service.sections is not null %}
                                <h2>Détails</h2>

                                <ul class="accordion-box">
                                    {% for section in service.sections %}
                                    <li class="accordion block {% if loop.index == 1 %} active-block {% endif %}">
                                        <div class="acc-btn {% if loop.index == 1 %} active {% endif %}" style="padding-bottom: 0px;">
                                            <div class="icon-box"></div>
                                            <h3 style="margin-bottom: 0px;"><span>{{loop.index}}</span><div  style="position:relative; top:-10px;">{{section.titre}}</div></h3>
                                        </div>
                                        <div class="acc-content current">
                                            <div class="text">
                                                {{section.contenu | raw}}
                                            </div>
                                        </div>
                                    </li>
                                    {% endfor %}
                                </ul>

                                {% endif %}

                                <div class="btn-box centred mt_40">
                                    <button type="submit" class="theme-btn btn-one">Réserver en cliquant ici</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-12 col-sm-12 sidebar-side">
                        <div class="tour-sidebar ml_30">
                            
                            {# Galerry #}
                            {% if service.photos | length > 1 %}
                            <div class="sidebar-widget gallery-widget mb_40">
                                <div class="widget-title">
                                    <h3>Galerie Photos</h3>
                                </div>
                                <div class="widget-content">
                                    <ul class="image-list clearfix">
                                        {% for photo in service.photos %}
                                        <li>
                                            <figure class="image"><a href="{{asset('uploads/services/' ~ photo.fileName)}}" class="lightbox-image" data-fancybox="gallery"><img src="{{asset('uploads/services/' ~ photo.fileName)}}" alt=""></a></figure>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            {% endif %}

                            {# Action Buttons #}
                             <div class="sidebar-widget tour-information mb_40">
                                <div class="widget-title">
                                    <h3>Prêts à vous lancer ?</h3>
                                </div>
                                <div class="widget-content">

                                    <div class="btn-box centred">
                                        <button type="submit" class="theme-btn btn-one">Réserver Maintenant</button>
                                    </div>
                                    
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- destination-details end -->

{% endblock %}