{% extends 'base.html.twig' %}
{% block title %}{{ cottage.title }}{% endblock %}
{% block meta %}
    <meta name="robots" content="index,follow">
    <meta name="description" lang="{{ app.request.locale }}"
          content="{{ cottage.description }}">
    <meta property="og:site_name" content="{% trans from 'meta' %}company_name{% endtrans %} - {{ cottage.title }}">
    <meta property="og:title" content="{% trans from 'meta' %}company_name{% endtrans %} - {{ cottage.title }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ app.request.uri }}">
    <meta property="og:image" content="{{ absolute_url('bundles/cpcreationtheme1/images/logo.jpg') }}">
    <meta property="og:locale" content="{{ app.request.locale }}">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="450">
    <meta property="og:description"
          content="{{ cottage.description }}">
{% endblock meta %}
    {% block submenu %}
        {% if cottage.rooms | length < 3 %}
            <ul class="sub-menu">
                <li><a href="#descriptive">{% trans %}cottage.descriptive{% endtrans %}</a></li>
                {% for room in cottage.rooms %}
                    <li><a href="#{{ room.slug }}">{{ room.header }} {{ room.title }}</a></li>
                {% endfor %}
                <li><a href="#booking">{% trans %}cottage.booking{% endtrans %}</a></li>
            </ul>
        {% else %}
            <div class="swiper-container swiper-sub-menu-cottage">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="#descriptive">{% trans %}cottage.descriptive{% endtrans %}</a>
                    </div>
                    {% for room in cottage.rooms %}
                        <div class="swiper-slide"><a href="#{{ room.slug }}">{{ room.header }} {{ room.title }}</a>
                        </div>
                    {% endfor %}
                    <div class="swiper-slide"><a href="#booking">{% trans %}cottage.booking{% endtrans %}</a></div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        {% endif %}
    {% endblock %}
{% block header_bottom %}
    <div class="butFrame">
        <div class="butText">
            <h1>{{ cottage.title }}</h1>
            <p>{{ cottage.subtitle }}</p>
        </div>
        <div class="swiper-container swiper-header">
            <div class="swiper-wrapper">
                {% for slide in cottage.images %}
                    <div class="swiper-slide"><img src="{{ asset(slide.image.path)| image_path }}"></div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    {% set index = 1 %}
    <section id="cottage">
        <article id="descriptive" data-index="0">
            <div class="grid-container">
                <h2>{% trans %}cottage.descriptive{% endtrans %}</h2>
                <div class="descriptive">
                    {{ cottage.description | raw }}
                </div>
            </div>
        </article>
        <div class="rooms">
            <div class="grid-container">
                {% for room in cottage.rooms %}
                    <article id="{{ room.slug }}" data-index="{{ loop.index }}">
                        <div class="grid-x grid-margin-y grid-margin-x room">
                            <div class="cell small-12 large-8 content-left-room">
                                <h2>{{ room.header }}</h2>
                                <h2>{{ room.title }}</h2>
                                <div class="content-room">
                                    {{ room.description |raw }}
                                </div>
                                <div class="content-line align-bottom"></div>
                            </div>
                            <div class="cell small-12 large-4 text-center">
                                {% if room.images | length > 1 %}
                                    <div class="swiper-container swiper-room">
                                        <div class="swiper-wrapper">
                                            {% for slide in room.images %}
                                                <div class="swiper-slide"><img
                                                            src="{{ asset(slide.image.path)| imagine_filter('thumbnail_400_filter') }}"></div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% else %}
                                    <img src="{{ room.images[0].image.path | imagine_filter('thumbnail_400_filter') }}"
                                         alt="{{ room.title }}">
                                {% endif %}
                            </div>
                        </div>
                    </article>
                    {% set index = loop.index %}
                {% endfor %}
            </div>
        </div>
        <article id="booking" data-index="{{ index + 1 }}">
            <div class="grid-container">
                <div class="grid-x grid-margin-x">
                    <div class="cell small-12 large-5 text-center">
                        <img src="{{ asset('reservation-demo.png') | image_path }}">
                    </div>
                    <div class="cell small-12 large-7 content-price">
                        <div class="content-price-header">
                            <h2>{% trans %}cottage.booking{% endtrans %}</h2>
                            <img src="{{ asset(cottage.image.path) | image_path }}" alt="Picto label">
                        </div>
                        {{ cottage.price | raw }}
                        <a href="{{ path('contact') }}" class="btn-contact">{% trans %}contact.title{% endtrans %}</a>
                    </div>
                </div>
            </div>
        </article>
    </section>
{% endblock %}
