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

{% block title %}Notre actualité{% endblock %}

{% block body %}
    <main>
        <section class="actualities page-list">
            <img src="{{ asset('images/fond-plante-actu.svg') }}" class="fond" alt="Forme bleu avec des plantes">
            <img src="{{ asset('images/forme-actu.webp') }}" class="forme" alt="Forme abstraite">
            <div class="container">
                <div class="title">
                    <h2>Notre <span>actualité <img src="{{ asset('images/soulignement/soulignement-actualite.svg') }}" alt="Trait vert"></span></h2>
                </div>

                <div class="filter">
                    {{ form_start(form) }}
                        <div class="flex-row align-center">
                            <div class="group-form">
                                {{ form_row(form.category) }}
                            </div>
                            <div class="group-form">
                                {{ form_row(form.town) }}
                            </div>
                            <button type="submit" class="btn btn-blue">Filtrer</button>
                        </div>
                    {{ form_end(form) }}
                </div>

                <div class="row">
                    {% for actuality in actualities %}
                        <div class="col-4 actualities__actu flex-column">
                            <img src="{{ asset('images/boucle-actu.svg') }}" class="loop" alt="Boucle verte - PTGE Projet Territorial pour la Gestion de l'eau - Serein Armançon">
                            <img src="{{ asset('uploads/actuality/'~ actuality.filename) }}" alt="{{ actuality.title }}">
                            <div class="content">
                                <h3>{{ actuality.title }}</h3>
                                <div class="flex-row align-end">
                                    <p>
                                        {{ actuality.content|striptags|slice(0, 250)|raw }} ...
                                    </p>
                                    <a href="" class="btn btn-green">Lire l'article</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    </main>
{% endblock %}