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

{% import 'macros/breadcrumbs.html.twig' as breadcrumbs %}
{% set crumbs = [
    { 'title': 'Accueil'|trans, 'url': path('home_index') },
    { 'title': 'Nos actualités'|trans, 'url': path('@Blog_index') },
    { 'title': article.title, 'url': null }
] %}

{% block title %}{{ article.title|raw }}{% endblock %}

{% block body %}
    <section class="container">
        {{ breadcrumbs.breadcrumb(crumbs) }}
        <section class="article-section">
            <div class="article-section-full">
                <div class="article-container">
                    <h1 class="card-title">{{ article.title }} {{ article.subtitle }}</h1>
                    <article class="card blog-post">
                        <div class="card-body">
                            <div class="flex-between-center">
                                <small class="mb-3 font-normal text-secondary">
                                    {{ article.publishedAt|date('d/m/Y') }}
                                </small>
                            </div>
                            <div class="flex-between-center">
                                <div>
                                    <p class="blog-post-meta">
                                        {% for tag in article.tags %}
                                            {{ include('admin/ui/_badge.html.twig', {badge_class:'bg-secondary text-white', badge_label : tag.name}) }}
                                        {% endfor %}
                                    </p>
                                    {{ include('@CMS/common/editorjs/_block.html.twig', {blocks:article.content|cmsBlocks}) }}
                                </div>
                                {% if article.image %}
                                    <div>
                                        <img src="{{ vich_uploader_asset(article, 'imageFile', '\\App\\BlogBundle\\Entity\\Article') | mediaCache('thumb_square') }}"
                                             alt="{{ article.title }}"/>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>
    </section>
{% endblock %}