{% extends '/web/pages/page_base.html.twig' %}
{% block content %}

    <div class="container mt-0">
        <h1>{{title}}</h1>

        <div class="blog-article-cards mt-big">

        {% for blogArticle in pagination %}

            <article class="blog-article-card">
                <a href="{{ path('web_blog_detail', {'slug': blogArticle.slug}) }}"  rel="bookmark" class="blog-article-card__link">
                    {% if blogArticle.CategoryUploadGroups|length > 0 and blogArticle.CategoryUploadGroups[0].UploadGroup.upload|length > 0 %}
                    <div class="blog-article-card__image-wrap">
                        <img src="/uploads/images/{{ blogArticle.CategoryUploadGroups[0].UploadGroup.upload[0].name ~ '_bg.' ~ blogArticle.CategoryUploadGroups[0].UploadGroup.upload[0].extension }}" alt="{{ blogArticle.name }}" class="blog-article-card__image">
                    </div>
                    {% else %}
                    <div class="blog-article-card__image-wrap">
                        <img class="blog-article-card__image" src="{{ asset('/build/img/thumbnail.jpg')}}">
                    </div>
                    {% endif %}
                    {% set publish_date = blogArticle.publishedAt %}

                    {% if publish_date %}
                        <time class="blog-article-card__date" datetime="{{ publish_date|date("d.m.Y") }}">{{ publish_date|date("d.m.Y") }}</time>
                    {% endif %}

                    <strong class="blog-article-card__title">
                        {{ blogArticle.name }}
                    </strong>
                    <p>{{ blogArticle.description }}</p>
                </a>
            </article>
        {% endfor %}
        </div>
        {{ knp_pagination_render(pagination) }}
    </div>
{% endblock %}