{% extends 'front/layout.html.twig' %}

{% block content %}

{% include 'front/components/navbar.html.twig' %}

<header id="carousel" class="index carousel slide carousel-fade" data-ride="carousel" data-interval="5000" data-pause="false">

    <div class="carousel-inner">
        {% if coverPhotos|length > 0 %}
            {% for coverPhoto in coverPhotos %}
            <div class="{% if loop.first %}active {% endif %}item">
                <div class="fill" style="background-image:url({{ asset('assets/files/slider/' ~ coverPhoto.code ~ '-' ~ coverPhoto.name) }});"></div>
            </div>
            {% endfor %}
        {% endif %}
    </div>

    <div id="bookingBox">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">

                        {% include 'front/components/booking-form.html.twig' %}

                    <div id="searchBarBottom">
                        <div class="row">
                            <div class="col-sm-4 hidden-xs">
                                <span><i class="fa fa-check" aria-hidden="true"></i> {{ "booking-box.easy-booking" | trans({}, 'plaza') }}</span>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <span><i class="fa fa-star" aria-hidden="true"></i> {{ "bookingbox.best-price-guaranteed" | trans({}, 'plaza') }}</span>
                            </div>
                            <div class="col-sm-4 hidden-xs">
                                <span><i class="fa fa-heart" aria-hidden="true"></i> {{ "bookingbox.satisfied-clients" | trans({}, 'plaza') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>

<section id="advantages">
    <div class="container">
        <h2>{{ "index.advantages" | trans({}, 'plaza') }}</h2>
        <p class="subheader">{{ "index.discover.advantages" | trans({}, 'plaza') }}</p>
        <div class="row">
            <div class="col-xs-12 col-sm-4 item">
                <i class="fa fa-check" aria-hidden="true"></i>
                <h3>{{ "booking-box.easy-booking" | trans({}, 'plaza') }}</h3>
                <p>{{ "index.easy.booking.system" | trans({}, 'plaza') }}</p>
            </div>
            <div class="col-xs-12 col-sm-4 item">
                <i class="fa fa-star" aria-hidden="true"></i>
                <h3>{{ "bookingbox.best-price-guaranteed" | trans({}, 'plaza') }}</h3>
                <p>{{ "index.without.costs" | trans({}, 'plaza') }}</p>
            </div>
            <div class="col-xs-12 col-sm-4 item">
                <i class="fa fa-heart" aria-hidden="true"></i>
                <h3>{{ "bookingbox.satisfied-clients" | trans({}, 'plaza') }}</h3>
                <p>{{ "index.clients.always.recommend" | trans({}, 'plaza') }}</p>
            </div>
        </div>
    </div>
</section>

<section id="accommodation-index">
    <div class="container">
        <h2>{{ "index.our.accommodations" | trans({}, 'plaza') }}</h2>
        <p class="subheader">{{ "index.feel.like.at.home" | trans({}, 'plaza') }}</p>
        <div class="row">
            <div class="col-xs-12">
                <a href="{{ path('front_accommodation_list') }}">
                    <img class="img-responsive" src="{{ asset('assets/files/accommodation/index-accommodation-cover/' ~ indexAccommodationCover.value) }}" />
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <a role="button" class="btn btn-blue" href="{{ path('front_accommodation_list') }}">{{ "index.see.all.accommodations" | trans({}, 'plaza') }}</a>
            </div>
        </div>
    </div>
</section>

<section id="discover-index">
    <div class="container">
        <h2>{{ "index.discover.city.landmarks" | trans({}, 'plaza') }}</h2>
        <p class="subheader">{{ "index.cadiz.history" | trans({}, 'plaza') }}</p>
        <div class="row">
        {% for discoverLanguage in discoverLanguages %}

            {% set path = '' %}
            {% set code = '' %}
            {% set name = '' %}

            {% for discoverPhoto in discoverLanguage.discover.discoverPhotos %}
                {% if loop.index0 == 0 %}
                    {% set path = discoverPhoto.path %}
                    {% set code = discoverPhoto.code %}
                    {% set name = discoverPhoto.name %}
                {% endif %}
            {% endfor %}

            {% if path != '' and code != '' and name != '' %}
            <div class="col-xs-12 {% if loop.index0 == 0 %}col-sm-8{% else %}col-sm-4{% endif %} pdg-75">
                <a class="block-image-link relative" href="{{ path('front_discover_list') }}">
                    <div class="block-image" style="background-image: url('{{ asset('assets/files/discover/' ~ path ~ '/' ~ code ~ '-' ~ name) }}');"></div>
                    <div class="text-wrapper {% if loop.index0 == 0 %}large{% else %}medium{% endif %}">
                        <h3>{{ discoverLanguage.title }}</h3>
                    </div>
                </a>
            </div>
            {% endif %}

        {% endfor %}
        </div>
    </div>
</section>

<section id="blog-index">
    <div class="container">
        <h2>
            <a href="{{ path('front_blog_list') }}">{{ "index.last.news" | trans({}, 'plaza') }}</a>
        </h2>
        <p class="subheader">{{ "index.know.the.city" | trans({}, 'plaza') }}</p>
        <div class="row">
            {% for postLanguage in postLanguages %}
                <div class="col-xs-12 col-sm-4">
                    <div class="article pdg-50">
                        <h3>
                            <a href="{{ path('front_blog_home', {'postSlug': postLanguage.slug}) }}">
                                {{ postLanguage.title }}
                            </a>
                        </h3>
                        <div class="minimize">
                            {{ postLanguage.body|slice(0, 350)|striptags|raw }}<span>...</span>
                        </div>
                        <a class="pull-right" style="margin-top:10px;color:#fff;font-weight:bold;" href="{{ path('front_blog_home', {'postSlug': postLanguage.slug}) }}">
                            {{ "blog.read.more" | trans({}, 'plaza') }}
                            <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
                        </a>
                    </div>

                </div>
            {% endfor %}
        </div>
    </div>
</section>

<section id="how-to-get-index">
    <div class="container">
        <h2>{{ "index.where.we.are" | trans({}, 'plaza') }}</h2>
        <div class="row">
            <div class="col-xs-12" style="text-align:center;">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3205.997197899127!2d-6.305463684717695!3d36.530061980005016!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd0dd15f901c1e15%3A0x62a8055edee3a868!2sApartamentos+Plaza+de+la+Luz+C%C3%A1diz!5e0!3m2!1ses!2ses!4v1475610162254" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12" style="text-align:center;">
                <a role="button" class="btn btn-blue" href="{{ path('front_how_to_get') }}">{{ "menu.how.to.get" | trans({}, 'plaza') }}</a>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(document).ready(function() {

            var bg = $('#carousel');
            {#$(window).resize("resizeBackground");#}

            resizeBackground();

            function resizeBackground() {
                bg.height($(window).height());
            }
        });

    </script>
{% endblock %}