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

{% set collection = page.collection() %}
{% set gallery = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, gallery])|defined(true) %}

{% block content %}
    {{ page.content }}
    {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
        {% include 'partials/breadcrumbs.html.twig' %}
    {% endif %}
    {% for child in collection %}
        {% if loop.first %}
            <hr class="mb-4 mt-1">
        {% else %}
            <hr class="my-4">
        {% endif %}
        <a class="text-decoration-none" href="{{ child.url }}">
            <h4 class="text-body">
                {{ child.title }}
            </h4>
            <span class="text-body">
                {{ child.content }}
            </span>
            <div class="card-columns">
                {% for media_item in child.media.images[:6] %}
                    <div class="card">
                        {{ media_item.quality(25).html }}
                        {% if loop.last %}
                            <p class="p-2" style="
                                    text-align: center;
                                    background-color: #343a40;
                                    border-radius:10%;
                                    color: white;
                                    opacity: 80%;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%);">
                                Mehr anzeigen
                            </p>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </a>
    {% endfor %}
{% endblock %}