{% for articleBlog in articlesBlog %}
{% if articleBlog.valid %}
<div class="iso-item filter-item filter-{{ articleBlog.categorieBlog.getName|lower|replace({' ': ''}) }}">
    <div class="row">
        <div class="col-lg-4 center">
            {% if articleBlog.image != null %}
            <img src="{{ asset(articleBlog_images ~ articleBlog.imageName) }}"
                class="img-fluid" alt="" type="image/webp">
            {% else %}
            <img src="{{ asset(articleBlog_images ~ articleBlog.imageName) }}" class="img-fluid" alt=""
                type="image/webp">
            {% endif %}
        </div>
        <div class="col-lg-8">
            <h3 class="blog-titre">
                {{articleBlog.translations[app.request.locale].getName|default('')}}
            </h3>
            <div class="blog-info">
                <i class="fas fa-calendar-days"></i>
                {{ articleBlog.getCreatedAt|date('d M Y') }} /
                <span style="color:{{ articleBlog.categorieBlog.couleur }};">
                    <i class="fas fa-folder-open"></i>

                    <a href="{{ path('app_blog_cat', {'slug': articleBlog.categorieBlog.translations[app.request.locale].getSlug,'id': articleBlog.categorieBlog.getId}) }}"
                        class="" style="color:{{ articleBlog.categorieBlog.couleur }};">
                        {{ articleBlog.categorieBlog.translations[app.request.locale].getName|default('') }}
                    </a>
                </span>
            </div>
            <div class="blog-resume">
                {{articleBlog.translations[app.request.locale].getShortContent|default('')|raw}}
            </div>
            <a href="{{ path('app_blog_id', {'slug': articleBlog.categorieBlog.translations[app.request.locale].getSlug ,'id': articleBlog.id , 'name': articleBlog.translations[app.request.locale].getName|lower|replace({':':''})|replace({' ': '-'})}) }}"
                class="btn btn-secondary">
                Lire la suite <i class="fas fa-hand-pointer"></i>
            </a>
        </div>
    </div>
    <hr>
</div>
{% endif %}
{% endfor %}