{% extends '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>

</div>

{% endblock %}