{% set pagination = this.pagination %}

<section {{ attributes.defaults({ class: 'news-summaries' }) }}>
    {% if pagination|length > 0 %}
        <div class="grid gap-8 md:grid-cols-2 xl:grid-cols-3">
            {% for item in pagination %}
                {% set image = this.primaryImage(item) %}
                {% set url = this.url(item) %}

                <article class="flex h-full flex-col overflow-hidden border border-foreground/10 bg-surface">
                    {% if image %}
                        {% set image_markup %}
                            <twig:Image
                                mapping="image"
                                class="h-64 w-full overflow-hidden"
                                picture:class="h-full w-full"
                                img:class="h-full w-full object-cover transition duration-300 hover:scale-105"
                                path="{{ image.path }}"
                                pathLandscape="{{ image.path }}"
                                ratio="3/2"
                                imageWidth="{{ image.width ?: 900 }}"
                                imageHeight="{{ image.height ?: 600 }}"
                                alt="{{ image.title ?: item.title }}"
                            />
                        {% endset %}

                        {% if url %}
                            <a href="{{ url }}" class="block overflow-hidden" aria-label="{{ item.title }}">
                                {{ image_markup }}
                            </a>
                        {% else %}
                            {{ image_markup }}
                        {% endif %}
                    {% endif %}

                    <div class="flex flex-1 flex-col gap-4 p-6">
                        <div class="flex flex-wrap items-center gap-3 text-xs uppercase text-foreground/60">
                            {% if item.eventAt %}
                                <time datetime="{{ item.eventAt|date('Y-m-d') }}">{{ item.eventAt|date('d/m/Y') }}</time>
                            {% endif %}
                            {% if item.category %}
                                <span>{{ item.category.name }}</span>
                            {% endif %}
                        </div>

                        <h2 class="font-serif text-2xl uppercase text-foreground">
                            {% if url %}
                                <a href="{{ url }}" class="transition hover:text-accent">{{ item.title }}</a>
                            {% else %}
                                {{ item.title }}
                            {% endif %}
                        </h2>

                        {% if item.title2 %}
                            <p class="!m-0 text-sm uppercase text-accent">{{ item.title2 }}</p>
                        {% endif %}

                        {% set excerpt = this.excerpt(item) %}
                        {% if excerpt %}
                            <p class="!m-0 text-sm text-foreground/75">{{ excerpt }}</p>
                        {% endif %}

                        {% if url %}
                            <div class="mt-auto pt-2">
                                <a href="{{ url }}" class="inline-flex items-center border border-foreground px-5 py-3 text-sm uppercase text-foreground transition hover:border-accent hover:text-accent">
                                    {{ 'news.summary.read_more'|trans }}
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </article>
            {% endfor %}
        </div>

        {% if pagination.pageCount > 1 %}
            <div class="mt-12 flex justify-center">
                {{ knp_pagination_render(pagination, '@components/news/_pagination.html.twig') }}
            </div>
        {% endif %}
    {% else %}
        <p class="text-center text-foreground/70">{{ 'news.summary.empty'|trans }}</p>
    {% endif %}
</section>
