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

{% block content %}
    <div class="row">
        <div class="col-12 col-md-6 mb-2" height="100%">
            <h1 class="d-inline">
                {% include 'partials/logo.html.twig' with {style: 'height: 3rem; padding-bottom: 0.5rem'} %}
                Herzlich Willkommen
            </h1>
            <div width="100%" style="height: 300px;">
                {% include 'partials/osm.html.twig' %}
            </div>
            <div>
                <a role="button" class="btn btn-primary mr-1" href="/kontakt">Kontakt</a>
                {% include 'partials/socialmedia.html.twig' %}
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div id="home-carousel" class="carousel slide" data-ride="carousel" data-interval="4000">
                <div class="carousel-inner">
                    {% for media_item in page.media.images %}
                        {% set class_active = '' %}
                        {% if loop.first %}
                            {% set class_active = ' active' %}
                        {% endif %}
                        <div class="carousel-item{{ class_active }}">
                            <img alt="Bild der Slideshow zur Reitanlage." class="d-block" src="{{ media_item.resize(540, 400).quality(75).url }}">
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <hr class="mb-4">
    {{ page.content }}
    <hr class="mb-4">
    {% set news_page = pages.find('/news') %}
    {% if news_page and news_page.collection() and news_page.collection()|first %}
        {% set text_class = 'col-12' %}
        {% set news_latest = news_page.collection()|first %}
        <div class="row">
            <div class="col-12">
                <h3>
                    <a class="text-reset" href="{{ news_latest.url }}">{{ news_latest.title }}</a>
                </h3>
            </div>
        </div>
        <div class="row">
            {% if news_latest.media.images %}
                {% set text_class = 'col-12 col-md-9' %}
                <div class="col-12 col-md-3">
                    <img alt="Titelbild der letzten News." width="100%" src="{{ news_latest.media.images|first.quality(25).url }}">
                </div>
            {% endif %}
            <div class="{{ text_class }}">
                {{ news_latest.summary }}
            </div>
        </div>
    {% endif %}
    {% set collection = page.collection() %}
    {% for child in collection %}
        <hr class="mb-4" />
        {% if child.template == 'info' %}
            <div class="row">
                {% set text_class = 'col-12' %}
                {% if child.media.images|first %}
                    {% set text_class = 'col-12 col-md-9' %}
                    <div class="col-12 col-md-3">
                        <img width="100%" src="{{ child.media.images|first.quality(25).url }}">
                    </div>
                {% endif %}
                <div class="{{ text_class }}">
                    {{ child.content }}
                </div>
            </div>
        {% else %}
            <a href="{{ child.url }}">{{ child.title }}</a>
            <p>{{ child.summary }}</p>
        {% endif %}
    {% endfor %}
{% endblock %}