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

{% block body %}
    {% include './partials/call.html.twig' %}

    {% if page.slider %}
    <div class="slider owl-theme">
        <div class="owl-carousel" id="owl-first">
            {% for photo in page.slider %}
                <div style="background-image: url('{{ asset('uploads/photos/' ~ photo.files.slider.filename) }}')"></div>
            {% endfor %}
        </div>
        <div class="slogan">
            <div class="wrapepr">
                {{ page.sliderText }}
            </div>
        </div>
        <a href='{{ path('prod_configurator')}}' class="btn">CREATE YOUR OWN CUSTOM TOUR</a>
    </div>
    {% endif %}

    <div class="about">
        <div class="header">
            <h1 class="title">{{ page.title }}</h1>
            <div class="ui-line orange"></div>
        </div>
        <div class="galery first">
            <img src="{{ asset('uploads/photos/' ~ page.firstPhoto.files.large.filename) }}" class="full-size" alt="">
            <div class="wrap">
                {% for photo in page.allOtherPhotos %}
                    <img class="small-size" src="{{ asset('uploads/photos/' ~ photo.files['single-page-small'].filename) }}" alt="">
                {% endfor %}
            </div>
{#            <img src="{{ asset('uploads/photos/' ~ page.firstPhoto.files.large.filename) }}" class="full-size" alt="">#}
        </div>
        <div class="wrapper">
            <div class="info">
                <div class="content">
                    {{  page.content | markdown }}
                </div>
            </div>
{#            <div class="galery-2">#}
{#                {% for photo in page.allOtherPhotos %}#}
{#                <img src="{{ asset('uploads/photos/' ~ photo.files['single-page-small'].filename) }}" alt="">#}
{#                {% endfor %}#}
{#            </div>#}
        </div>
        <div class="galery second">
            <div class="wrap">
                {% for photo in page.allOtherPhotos %}
                    <img class="small-size" src="{{ asset('uploads/photos/' ~ photo.files['single-page-small'].filename) }}" alt="">
                {% endfor %}
            </div>
            {#            <img src="{{ asset('uploads/photos/' ~ page.firstPhoto.files.large.filename) }}" class="full-size" alt="">#}
        </div>
    </div>
{% endblock %}

{% block title %}{{ page.title }}{% endblock %}
{% block footer %}


    <section class="contacts" id="contact">
        <div class="wrapper">
            <div class="form-wrap">
                <div class="title">
                    contaсt us
                    <div class="ui-line white"></div>
                </div>
                <form action="" class="home-contacts-form">
                    <input type="text" placeholder="Name" id="name" required>
                    <input type="number" placeholder="Phone" id="phone" required>
                    <input type="email" placeholder="E-mail" id="email" required>
                    <input type="text" placeholder="Your Message:" id="question" required>

                    <button type="submit" class="btn white">send</button>
                </form>
            </div>

            <div class="info">
                <div class="item">Tel: {{ dashboard.setting('phone') }}</div>
                <div class="item">E-mail: {{ dashboard.setting('email') }}</div>
                <div class="item">{{ dashboard.setting('address') | nl2br }}</div>
                <div class="soc">
                    <a href="{{ dashboard.setting('whatsAppLink') }}" target="_blank"><img src="{{ asset('/assets/image/whatsapp-footer.png') }}" alt=""></a>
                    <a href="{{ dashboard.setting('instagramLink') }}" target="_blank"><img src="{{ asset('/assets/image/Instagram.png') }}" alt=""></a>
                    <a href="{{ dashboard.setting('fbLink') }}" target="_blank"><img src="{{ asset('/assets/image/facebook.png') }}" alt=""></a>
                </div>
            </div>
        </div>
    </section>
{% endblock %}