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

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

{% block body %}

<div class="article-title p-5 text-center" style="background-image: url('/uploads/{{ article.coverImage }}')">
    <div class="container">
        <h1>{{ article.titre }}</h1>
    </div>
</div>

<div class="container">
    <div class="row-5 my-5">
        <p class="text-primary">{{ article.introduction | raw }}</p>
    </div>
    <div class="row my-5">
        {% if article.image1 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image1 }}">
        </div>
        {% endif %}
        {% if article.paragraphe1 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe1 | raw }}</p>
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.paragraphe2 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe2 | raw }}</p>
        </div>
        {% endif %}
        {% if article.image2 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image2 }}">
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.image3 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image3 }}">
        </div>
        {% endif %}
        {% if article.paragraphe3 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe3 | raw }}</p>
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.paragraphe4 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe4 | raw }}</p>
        </div>
        {% endif %}
        {% if article.image4 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image4 }}">
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.image5 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image5 }}">
        </div>
        {% endif %}
        {% if article.paragraphe5 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe5 | raw }}</p>
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.paragraphe6 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe6 | raw }}</p>
        </div>
        {% endif %}
        {% if article.image6 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image6 }}">
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.image7 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image7 }}">
        </div>
        {% endif %}
        {% if article.paragraphe7 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe7 | raw }}</p>
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.paragraphe8 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe8 | raw }}</p>
        </div>
        {% endif %}
        {% if article.image8 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image8 }}">
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.image9 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image9 }}">
        </div>
        {% endif %}
        {% if article.paragraphe9 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe9 | raw }}</p>
        </div>
        {% endif %}
    </div>
    <div class="row my-5">
        {% if article.paragraphe10 %}
        <div class="col my-auto">
            <p class="text-primary">{{ article.paragraphe10 | raw }}</p>
        </div>
        {% endif %}
        {% if article.image10 %}
        <div class="col my-auto">
            <img class="img-fluid" style="width:550px" src="/uploads/{{ article.image10 }}">
        </div>
        {% endif %}
    </div>

    <hr>

    <br><br>

    {% if article.commentaires | length > 0 %}
    <h2 class="mb-3">Commentaires de nos visiteurs :</h2>
    {% for commentaire in article.commentaires %}
    <div class="bg-light rounded mb-3 py-3 px-3">
        <span style="font-weight: bold">
            <strong>{{ commentaire.nom }}</strong> a dit <em>le {{ commentaire.createdAt | date('d/m/y') }} à
                {{ commentaire.createdAt | date('H:i') }}</em> :
        </span>
        <br><br>
        <blockquote>
            {{ commentaire.contenu | raw }}
        </blockquote>
    </div>
    {% endfor %}
    {% else %}
    <h4 class="mb-3">Cet article n'a pas encore reçu de commentaires</h4>
    {% endif %}

</div>

{% endblock %}