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

{% block title %}{{articleBlog.translations[app.request.locale].getName|default('')}}{% endblock %}

{% block body %}
<article id="article" class="blog-detail">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 blog-article">
                <div class="section-title">
                    <span>{{articleBlog.categorieBlog.getName}}</span>
                    <h1>{{articleBlog.translations[app.request.locale].getName|default('')}}</h1>
                </div>
                <div class="blog-info left flex-spaceB">
                    <div>
                        <i class="fas fa-calendar-days"></i>
                        Article créer le: {{ articleBlog.getCreatedAt|date('d M Y') }}
                    </div>
                    {% include 'pages/blog/buttonsReseaux.html.twig' %}
                </div>
                <hr>
                <div class="blog-resume">
                    {{articleBlog.translations[app.request.locale].getShortContent|default('') | raw}}
                </div>

                <div class="blog-image">
                    {% if articleBlog.image != null %}
                    <img src="{{ asset(articleBlog_images ~ articleBlog.getImage) }}"
                        class="img-fluid" alt="" type="image/webp">
                    {% else %}
                    <img src="{{ asset(articleBlog_images ~ articleBlog.getImage) }}" class="img-fluid"
                        alt="" type="image/webp">
                    {% endif %}
                </div>

                <div class="blog-content">
                    {{articleBlog.translations[app.request.locale].getContent|default('') | raw}}
                </div>

                <div class="center mt-1 mb-3">
                    <a href="{{ path('app_blog') }}" class='btn btn-outline-dark btn-sm'>Retour aux blog</a>
                </div>
            </div>
            <div class="col-lg-3 hidden-xs">
                {% include 'pages/blog/blogsListeRecent.html.twig' %}
                <div class="flex-c">
                    {{ knp_pagination_render(articlesBlog) }}
                </div>
            </div>
        </div>
    </div>
</article>
{% endblock %}