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

{% block title %}Actualités ACLM{% endblock %}

{% block body %}
    <section class="section-page-actualites">
        <div class="container">
            <div class="div-title 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">Actualités</h2>
                <img src="{{ asset('images/rond-bleu.svg') }}" class="title-decoration" alt="rond décoratif du titre">
            </div>
            <img src="{{ asset('images/avion.svg') }}" class="avion" alt="avion décoratif">
            <div class="actu-article-grid">
                <div class="actu-article actu-article-last">
                    {% if articles.0.imgName %}
                        <img src="{{asset('images/' ~ articles.0.imgName )}}" class="actu-article-last-img" alt="Image de l'article">
                    {% endif %}
                    <div class="actu-article-content">
                        <h3>{{articles.0.title}}</h3>
                        {% if articles.0.text|length > 300 %}
                            <p>{{articles.0.text|striptags|slice(0, 300)|raw}}...</p>
                        {% else %}
                            {{articles.0.text|raw}}
                        {% endif %}
                        <a href="{{ path('app_show_actu', {'slug': articles.0.slug}) }}" class="btn-more-info">Voir la publication <img src="{{ asset('images/btn-arrow.svg') }}" alt=""></a>
                    </div>
                </div>
                <div class="actu-article actu-article-before-last">
                    {% if articles.1.imgName %}
                            <img src="{{asset('images/' ~ articles.1.imgName )}}" class="actu-article-before-last-img" alt="Image de l'article">
                    {% endif %}
                    <div class="actu-article-content">
                        <h3>{{articles.1.title}}</h3>
                        {% if articles.1.text|length > 180 %}
                            <p>{{articles.1.text|striptags|slice(0, 180)|raw}}...</p>
                        {% else %}
                            {{articles.1.text|raw}}
                        {% endif %}
                        <br>
                        <a href="{{ path('app_show_actu', {'slug': articles.1.slug}) }}" class="btn-more-info">Voir la publication <img src="{{ asset('images/btn-arrow.svg') }}" alt=""></a>
                    </div>
                </div>
                <div class="actu-article actu-article-before-last">
                    {% if articles.2.imgName %}
                            <img src="{{asset('images/' ~ articles.2.imgName )}}" class="actu-article-before-last-img" alt="Image de l'article">
                    {% endif %}
                    <div class="actu-article-content">
                        <h3>{{articles.2.title}}</h3>
                        {% if articles.2.text|length > 180 %}
                            <p>{{articles.2.text|striptags|slice(0, 180)|raw}}...</p>
                        {% else %}
                            {{articles.2.text|raw}}
                        {% endif %}
                        <br>
                        <a href="{{ path('app_show_actu', {'slug': articles.2.slug}) }}" class="btn-more-info">Voir la publication <img src="{{ asset('images/btn-arrow.svg') }}" alt=""></a>
                    </div>
                </div>
                <img src="{{ asset('images/gros-rond-jaune.svg') }}" class="gros-rond-absolute-jaune" alt="Rond décoratif jaune">
                {% for article in articles[3:] %}
                    <div class="actu-article">
                        {% if article.imgName %}
                            <img src="{{asset('images/' ~ article.imgName )}}" class="actu-article-img" alt="Image de l'article">
                        {% endif %}
                        <div class="actu-article-content">
                            <h3>{{article.title}}</h3>
                            <a href="{{ path('app_show_actu', {'slug': article.slug}) }}" class="btn-more-info">Voir la publication <img src="{{ asset('images/btn-arrow.svg') }}" alt=""></a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
{% endblock %}