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

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

{% block body %}
    <div class="container article-show">
        <h1 class="title-h1">{{article.title}}</h1>
        {% if article.imgName %}
        <div class="article-bloc-image">
            <img src="{{ asset('images/avion.svg') }}" class="plane" alt="Image décoration avion">    
            <img src="{{ asset('images/' ~ article.imgName) }}" class="article-image" alt="Image de l'article">
            <img src="{{ asset('images/star-decorations.svg') }}" class="star-decoration" alt="Image décoration étoile et formes">
        </div>
        {% endif %}
        <p class="article-date">
            Écrit le : {{ article.CreatedAt|format_datetime('long', 'none', locale:'fr') }}
            {% if article.UpdatedAt|date == article.CreatedAt|date %}
                - Mis à jour le : {{ article.UpdatedAt|format_datetime('long', 'none', locale:'fr') }}
            {% endif %}
        </p>
        <p class="article-author">Par :{{article.author}}</p>
        <p class="article-text">{{article.text|nl2br}}</p>
        {% if article.images %}
            <div class="div-title-article flex-row align-center">
                <img src="{{ asset('images/rond-violet.svg') }}" class="title-decoration" alt="rond décoratif du titre">
                <h2 class="title title-h2">Galerie <span class="accent">photo</span></h2>
                <img src="{{ asset('images/rond-bleu.svg') }}" class="title-decoration" alt="rond décoratif du titre">
            </div>
            <div class="article-gallery flex-row align-center">
                {% for image in article.images %}
                    <img src="{{ asset('images/' ~ image.imageName) }}" alt="Image de la galerie">
                {% endfor %}
            </div>
        {% endif %}
    </div>
{% endblock %}