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

{% block title %}{% endblock %}

{% block body %}
    <main>
        <section class="thematic">
            <img src="{{ asset('images/forme-nosactions.webp') }}" alt="Forme ronde - Actions pour la gestion de l'eau dans l'agriculture" class="shape">
            <div class="container">
                <div class="thematic__wrapper flex-row wrap justify-between">
                    <div class="content-text">
                        <div class="title">
                            <h1><span>Nos actions <img src="{{ asset('images/soulignement/soulignement-nosactions.svg') }}" alt="Trait bleu"></span> - {{ thematic.name }}</h1>
                        </div>
                        <p>
                            {{ thematic.description|nl2br }}
                        </p>
                    </div>
                    <div class="thematic__wrapper__image" data-controller="swiper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide slide">
                                    {% if thematic.filename %}
                                        <img src="{{ asset('uploads/thematic/'~ thematic.filename) }}" alt="{{ thematic.name }}">
                                    {% endif %}
                                </div>
                                {% for picture in thematic.pictureThematiques %}
                                    <div class="swiper-slide slide">
                                        <img src="{{ asset('uploads/thematic/'~ picture.filename) }}" alt="{{ thematic.name }}">
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="thematic__actions green">
                    {% if priorityAction %}
                        <div class="thematic__actions__wrapper flex-row wrap">
                            <div class="priority-action">
                                <a href="{{ path('app_action_show', {slug: priorityAction.slug}) }}" target="_top">
                                    {% if priorityAction.filename %}
                                        <img src="{{ asset('uploads/action/'~ priorityAction.filename) }}" alt="{{ priorityAction.name }}">
                                    {% endif %}
                                    <div class="content">
                                        <div class="tags flex-row wrap">
                                            <span class="tag">Action prioritaire</span>
                                            {% for tag in priorityAction.tags %}
                                                <span class="tag">{{ tag.name }}</span>
                                            {% endfor %}
                                        </div>
                                        <h2>{{ priorityAction.name }}</h2>
                                        <p>
                                            {{ priorityAction.teasing|nl2br }}
                                        </p>
                                    </div>
                                </a>
                            </div>
                            <div class="row">
                                {% for action in thematic.sMBVAActions|slice(0, 7)|sort((a, b) => a.position <=> b.position) %}
                                    {% if not action.priority %}
                                        <div class="col-4 flex-column">
                                            <a href="{{ path('app_action_show', {slug: action.slug}) }}" target="_top" class="a-action">
                                                <div class="thematic__actions__wrapper__action">
                                                    {% if action.filename %}
                                                        <img src="{{ asset('uploads/action/'~ action.filename) }}" alt="{{ action.name }}">
                                                    {% endif %}
                                                    <div class="content">
                                                        <h2>{{ action.name }}</h2>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="row second-row">
                            {% for action in thematic.sMBVAActions|slice(7)|sort((a, b) => a.position <=> b.position) %}
                                <div class="col-3 flex-column">
                                    <a href="{{ path('app_action_show', {slug: action.slug}) }}" target="_top" class="a-action">
                                        <div class="thematic__actions__wrapper__action">
                                            {% if action.filename %}
                                                <img src="{{ asset('uploads/action/'~ action.filename) }}" alt="{{ action.name }}">
                                            {% endif %}
                                            <div class="content">
                                                <h2>{{ action.name }}</h2>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="row">
                            {% for action in thematic.sMBVAActions %}
                                <div class="col-3 flex-column">
                                    <a href="{{ path('app_action_show', {slug: action.slug}) }}" target="_top" class="a-action">
                                        <div class="thematic__actions__wrapper__action">
                                            {% if action.filename %}
                                                <img src="{{ asset('uploads/action/'~ action.filename) }}" alt="{{ action.name }}">
                                            {% endif %}
                                            <div class="content">
                                                <h2>{{ action.name }}</h2>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </section>
    </main>
{% endblock %}