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

 {% block stylesheets %}
     {{ encore_entry_link_tags('tourspage') }}
 {% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('tourspage') }}
{% endblock %}

{% block content %}
    <style>
        .slidetours{
                                                        background-image: url('/images/imagesslidetours');
            background-size: cover;
            background-position: center;
            box-shadow: 0px 0px 15px -1px black;
        }

        .toursdetails span{
            font-weight: bold;
            border-right: 1px #c8c8c8 solid;
            display: inline-block;
            padding-top: 7px;
            padding-bottom: 7px;
            width: 65px;
            text-align: center;
            font-size: 18px;
        }
        .toursdetails span:last-of-type{
            border-right: none;
        }

        .card{
            border-radius: 0px;
            display: inline-block;
            border: none;
        }

        .btn-link, .btn-link:hover{
            color: #004085;
            text-decoration: none;
            font-weight: bold;
            font-family: 'Montserrat', sans-serif;
        }
        .card-header{
            padding: 3px 5px;
            margin: 3px;
            background-color: #e9e9e9;
            border-bottom: none;
            border-radius: 3px;
        }
        .card-header:first-child{
            border-radius: 0px;
        }
        .card-body{
            background-color: #e9e9e9;
        }
        .collapse.show {
            margin: 3px;
        }
        .btn-link.collapsed .titledays{
            display: none;
        }
        .titledays {
            color: #bd0000;
            margin-left: 15px;
        }

        .card .btn {
            width: 100%;
            text-align: left;
        }

        .tourimage{
            background: #3e3e3e;
            background-image: url('/images/imagesslidetours');
            background-size: cover;
            position: relative;
            box-shadow: 0px 0px 13px -2px black;

        }
        .imageinfo {
            padding-left: 15px;
            color: #fff!important;
            text-shadow: 0 0 5px #000;
            width: 100%;
            background-color: rgba(43,43,43,.62);
            position: absolute;
            bottom: 0px;
            left: 0;
            margin-bottom: 15px;
            padding-bottom: 10px;
            padding-top: 4px;
        }

        @media (max-width: 992px) {
            .tpfirst {
                padding-bottom: 1.5rem!important;
                padding-top: 1.5rem!important;
            }

            .toursdetails span{
                width: auto;
                padding-left: 10px;
                padding-right: 10px;
                font-size: 15px;
            }

            .tourimage{
                min-height: 225px;
            }
        }
     </style>
    <div class="col-md-12 slidetours minheight300 slidetopbottom p-0">
        <div class="divOuterCentro"></div>
        <div class="row text-center pt-5 pb-5 m-0">
            <div class="col-md-7 slidediv m-auto text-left">

                {% if toursForm is defined %}
                    <div class="form{{ app.request.locale }} armenian_tours">
                        {% include 'form/form_helper.html.twig' with {'form': toursForm} %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="imageblock">
        <div class="row m-0 section">
            <div class="col-md-12 mb-5">
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6 title pt-3 pb-3 screenorange">
                        <h3><i class="fas fa-hiking"></i> Randonnées historiques</h3>
                    </div>
                    <div class="col-md-6"></div>
                    <div class="title col-md-6 muted toursdetails m-0">
                        <span><i class="fas fa-sun"></i> 7</span>
                        <span><i class="fa fa-users"></i> 15</span>
                        <span><i class="fas fa-user-tie"></i></span>
                        <span><i class="fas fa-language"></i> 3</span>
                        <span><i class="fas fa-binoculars"></i></span>
                        <span><i class="fas fa-horse"></i></span>
                        <span><i class="fas fa-plane-arrival"></i></span>
                        <span><i class="fas fa-bed"></i></span>
                    </div>
                    <div class="col-md-6 row m-0 minheight700">
                            <div class="col-md-6 row m-0 tpfirst">
                                <div class="col-md-12 tourimage">
                                    <a href="#" class="imageinfo">
                                        <h3>Garni Gexard</h3>
                                        <span></span>
                                    </a>
                                </div>

                            </div>
                            <div class="col-md-6 row m-0 pr-0">
                                <div class="col-md-12 row pb-3 pr-0">
                                    <div class="col-md-12 tourimage">
                                        <a href="#" class="imageinfo">
                                            <h3>Garni Gexard</h3>
                                            <span></span>
                                        </a>
                                    </div>
                                </div>

                                <div class="col-md-12 row pt-3 pr-0">
                                    <div class="col-md-12 tourimage">
                                        <a href="#" class="imageinfo">
                                            <h3>Garni Gexard</h3>
                                            <span></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 row m-0 pt-4">
                                <div class="col-md-12 tourimage">
                                    <a href="#" class="imageinfo">
                                        <h3>Garni Gexard</h3>
                                        <span></span>
                                    </a>
                                </div>
                            </div>
                    </div>
                    <article id="accordion" class="col-md-6 p-0 mt-3">
                        <div class="card">
                            <div class="card-header" id="headingInfo">
                                <h5 class="mb-0">
                                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseInfo" aria-expanded="true" aria-controls="collapseInfo">
                                        <i class="fas fa-info"></i> <span class="titledays">Info</span>
                                    </button>
                                </h5>
                            </div>

                            <div id="collapseInfo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <tbody>
                                            <tr>
                                                <th scope="row"><i class="fas fa-sun" /></th>
                                                <td>Duration of the tour 7 days</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><i class="fa fa-users">
                                                <td>Can a group up to 15 people</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><i class="fas fa-user-tie"></i></th>
                                                <td>Guide that accompanies you in multilingual</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><i class="fas fa-language"></i></th>
                                                <td>This tour is accompanied in multilingual. English, Russian, German, Spain</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><i class="fas fa-binoculars"></i></th>
                                                <td>This tower contains point a views</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><i class="fas fa-horse"></i></th>
                                                <td>You can also use horse</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><i class="fas fa-plane-arrival"></i></th>
                                                <td>For coming from abroad, our team will welcome you and organize your service at the hotel</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><i class="fas fa-bed"></i></th>
                                                <td>In this trip you have the points to stay in Hotels during your tourFor coming from abroad, our team will welcome you and organize your service at the hotel</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card"><div class="card-header" id="headingOne"><h5 class="mb-0"><button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                        Day 1 <span class="titledays">Garni Gexard</span></button></h5></div><div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion" style=""><div class="card-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div></div></div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                       Day 2 <span class="titledays">Noravank</span>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                                <div class="card-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Day 3 <span class="titledays">Erablur</span>
                                    </button>
                                </h5>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                <div class="card-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                    </article>


                    <div class="col-md-12 row pl-0 bg-transparent d-inline-block pr-0 pt-2 mt-4">
                        <button class="button bg-rouge bg-shadow float-right">Make order this tour</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

    </script>
{% endblock %}