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

{% block title %}PTGE Armançon - Serein | Projet Territorial pour la Gestion de l'Eau{% endblock %}

{% block body %}
    <main>
        <section class="home">
            <div class="container">
                <div class="title">
                    <h1>
                        {% set title = pageHome.title | split(' ') %}
                        {% for word in title %}
                            {% if loop.last is same as true %}
                            {% else %}
                                {{ word }}
                            {% endif %}
                        {% endfor %} <br>
                        <span class="green"> {{ title|last }} <img src="{{ asset('images/soulignement/soulignement-1.svg') }}" class="s1" alt="Trait bleu"></span>
                    </h1>
                </div>

                <div class="home__wrapper flex-row justify-between">
                    <div class="home__wrapper__ptge">
                        <div class="content">
                            <div class="title">
                                <h2>
                                    {% set discoverTitle = pageHome.discoverTitle | split(' ') %}
                                    {% for word in discoverTitle %}
                                        {% if loop.last is same as true %}
                                        {% else %}
                                            {{ word }}
                                        {% endif %}
                                    {% endfor %}
                                    <span class="blue">{{ discoverTitle|last }} <img src="{{ asset('images/soulignement/soulignement-2.svg') }}" alt="Trait vert"></span>
                                </h2>
                            </div>
                            {{ pageHome.discoverParagraph|raw }}
                        </div>
                    </div>
                    <div class="home__wrapper__ptge wam">
                        <div class="content">
                            <div class="title">
                                <h2>
                                    {% set waterTitle = pageHome.waterTitle | split(' ') %}
                                    {% for word in waterTitle %}
                                        {% if loop.last is same as true %}
                                        {% else %}
                                            {{ word }}
                                        {% endif %}
                                    {% endfor %}
                                    <span class="green">{{ waterTitle|last }} <img src="{{ asset('images/soulignement/soulignement-3.svg') }}" alt="Trait bleu"></span>
                                </h2>
                            </div>
                            {{ pageHome.waterParagraph|raw }}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="who-are-we">
            <div class="container">
                <div class="who-are-we__wrapper flex-row wrap justify-between">
                    <div class="content-text">
                        <div class="title">
                            <h2>
                                {% set whoTitle = pageHome.whoTitle | split('-') %}
                                {% if whoTitle|length is same as 2 %}
                                    {% for word in whoTitle %}
                                        {% if loop.last is same as true %}
                                        {% else %}
                                            {{ word }}-<span class="green">{{ whoTitle|last }}<img src="{{ asset('images/soulignement/trait-qui-sommes-nous.svg') }}" alt="Trait bleu"></span>
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                                {% if whoTitle|length is not same as 2 %}
                                    {% set whoTitleSplitSpace = pageHome.whoTitle | split(' ') %}
                                    {% for word in whoTitleSplitSpace %}
                                        {% if loop.last is same as true %}
                                        {% else %}
                                            {{ word }}
                                        {% endif %}
                                    {% endfor %}
                                    <span class="green">{{ whoTitle|last }}<img src="{{ asset('images/soulignement/soulignement-3.svg') }}" alt="Trait bleu"></span>
                                {% endif %}
                            </h2>
                        </div>
                        {{ pageHome.whoParagraph|raw }}
                    </div>
                    <div class="schema-smbva">
                        <figure>
                            <img src="{{ vich_uploader_asset(pageHome, 'whoImageFile') }}" alt="{{ pageHome.whoImageAlt }}">
                            <figcaption>{{ pageHome.whoImageLegend }}</figcaption>
                        </figure>
                    </div>
                </div>
            </div>
            <img src="{{ asset('images/forme-qsn.webp') }}" alt="Forme rond et rectangle - Projet Territorial pour la Gestion de l'Eau" class="shape">
        </section>

        <section class="territory">
            <div class="container">
                <div class="territory__wrapper flex-row wrap justify-between align-center">
                    <div class="map">
                        <figure>
                            <img src="{{ vich_uploader_asset(pageHome, 'territoryImageFile') }}" alt="{{ pageHome.territoryImageAlt }}">
                            <figcaption>{{ pageHome.territoryImageLegend }}</figcaption>
                        </figure>
                        <a href="https://cartes.ternum-bfc.fr/?config=/apps/epage-de-l-armancon/carte-generale-des-bassins-du-serein-et-de-l-armancon.xml" target="_blank" class="btn btn-blue">Voir la carte dynamique</a>
                    </div>
                    <div class="content-text">
                        <div class="title">
                            <h2>
                                {% set territoryTitle = pageHome.territoryTitle | split(' ') %}
                                {% for word in territoryTitle %}
                                    {% if loop.last is same as true %}
                                    {% else %}
                                        {{ word }}
                                    {% endif %}
                                {% endfor %}
                                <span class="green"> {{ territoryTitle|last }}<img src="{{ asset('images/soulignement/soulignement-territoire.svg') }}" alt="Trait bleu"></span>
                            </h2>
                        </div>
                        {{ pageHome.territoryParagraph|raw }}
                    </div>
                </div>
            </div>
        </section>

        <section class="ptge">
            <div class="container">
                <div class="title flex-row">
                    <h2>
                        {% set kezakoTitle = pageHome.kezakoTitle | split(' ') %}
                        {% for word in kezakoTitle %}
                            {% if loop.last is same as true %}
                            {% else %}
                                {{ word }}
                            {% endif %}
                        {% endfor %}
                        <span>
                            {% set kezakoTitleLast = kezakoTitle|last | split("'") %}
                            {% if kezakoTitleLast|length is same as 2 %}
                                {% for word in kezakoTitleLast %}
                                    {% if loop.last is same as true %}
                                    {% else %}
                                        {{ word }}'<span class="blue">{{ kezakoTitleLast|last }}</span><img src="{{ asset('images/soulignement/soulignement-kezakeau.svg') }}" alt="Trait vert">
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                            {% if kezakoTitleLast|length is not same as 2 %}
                                {% for word in kezakoTitleLast %}
                                    {% if loop.last is same as true %}
                                    {% else %}
                                        {{ word }}
                                    {% endif %}
                                {% endfor %}
                                <span class="blue">{{ kezakoTitleLast|last }}</span><img src="{{ asset('images/soulignement/soulignement-kezakeau.svg') }}" alt="Trait vert">
                            {% endif %}
                        </span>
                    </h2>
                    <img src="{{ asset('images/gloup/group-interrogation.svg') }}" alt="Mascotte Gloup - interrogation">
                </div>
                {{ pageHome.kezakoParagraph|raw }}
                <div class="steps">
                    <h3 class="shortstack">{{ pageHome.stepbystepTitle }}</h3>
                    <div class="steps__wrapper">
                        <div class="row">
                            <div class="col-3 flex-column">
                                <div class="steps__wrapper__step sb s1 flex-column">
                                    <div class="number shortstack"><span>1</span></div>
                                    <div class="picto">
                                        <img src="{{ vich_uploader_asset(pageHome, 'step1IconFile') }}" alt="{{ pageHome.step1IconAlt }}">
                                    </div>
                                    <h4>{{ pageHome.step1Title }}</h4>
                                    {{ pageHome.step1Paragraph|raw }}
                                    <img src="{{ asset('images/icons/fleche-bleu.svg') }}" class="arrow-bottom" alt="Flèche bleu">
                                </div>
                            </div>
                            <div class="col-3 flex-column">
                                <div class="steps__wrapper__step sg s2 flex-column">
                                    <div class="number shortstack"><span>2</span></div>
                                    <div class="picto">
                                        <img src="{{ vich_uploader_asset(pageHome, 'step2IconFile') }}" alt="{{ pageHome.step2IconAlt }}">
                                    </div>
                                    <h4>{{ pageHome.step2Title }}</h4>
                                    {{ pageHome.step2Paragraph|raw }}
                                    <img src="{{ asset('images/icons/fleche-verte.svg') }}" class="arrow-top" alt="Flèche verte">
                                </div>
                            </div>
                            <div class="col-3 flex-column">
                                <div class="steps__wrapper__step sb s3 flex-column">
                                    <div class="number shortstack"><span>3</span></div>
                                    <div class="picto">
                                        <img src="{{ vich_uploader_asset(pageHome, 'step3IconFile') }}" alt="{{ pageHome.step3IconAlt }}">
                                    </div>
                                    <h4>{{ pageHome.step3Title }}</h4>
                                    {{ pageHome.step3Paragraph|raw }}
                                    <img src="{{ asset('images/icons/fleche-bleu.svg') }}" class="arrow-bottom" alt="Flèche bleu">
                                </div>
                            </div>
                            <div class="col-3 flex-column">
                                <div class="steps__wrapper__step sg s4 flex-column">
                                    <div class="number shortstack"><span>4</span></div>
                                    <div class="picto">
                                        <img src="{{ vich_uploader_asset(pageHome, 'step4IconFile') }}" alt="{{ pageHome.step4IconAlt }}">
                                    </div>
                                    <h4>{{ pageHome.step4Title }}</h4>
                                    {{ pageHome.step4Paragraph|raw }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{ asset('images/plante-ptge.webp') }}" alt="Plante vectorielle - Protection de la faune et la flore" class="plant">
        </section>

        <section class="actions" id="actions">
            <img src="{{ asset('images/forme-action.webp') }}" alt="Forme ronde et vague - Protection des milieux aquatique" class="shape">
            <div class="container">
                <div class="title">
                    <h2>Les <span>actions <img src="{{ asset('images/soulignement/soulignement-action.svg') }}" class="s1" alt="Trait vert"></span></h2>
                </div>
                <img src="{{ asset('images/gloup/gloup-sourriant.svg') }}" class="gloup" alt="Gloup souriant">
                <div class="row justify-content-center">
                    {% for thematic in thematics %}
                        <div class="col-3">
                            <a href="{{ path('app_thematic_show', {slug: thematic.slug}) }}">
                                <div class="actions__action">
                                    {% if thematic.filename %}
                                        <img src="{{ asset('uploads/thematic/'~ thematic.filename) }}" alt="Action {{ thematic.name }}">
                                    {% else %}
                                        <img src="{{ asset('images/sensibilisation.webp') }}" alt="Action sensibilisation">
                                    {% endif %}
                                    <div class="content-text">
                                        <h3>{{ thematic.name }}</h3>
                                        <p>
                                            {{ thematic.teasing|nl2br }}
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                </div>

                <div class="actions__data">
                    <div class="actions__data__wrapper flex-row wrap justify-between">
                        <div class="actions__data__wrapper__item">
                            <img src="{{ vich_uploader_asset(pageHome, 'actionDataFile1') }}" alt="{{ pageHome.actionDataAlt }}">
                            <div class="data-number">
                                <span class="number shortstack">{{ pageHome.actionDataTitle1 }}</span>
                                {{ pageHome.actionDataParagraph1|raw }}
                            </div>
                            <img src="{{ asset('images/gloup/gloup-peur.svg') }}" alt="Gloup apeuré" class="gloup">
                        </div>
                        <div class="actions__data__wrapper__item">
                            <img src="{{ vich_uploader_asset(pageHome, 'actionDataFile2') }}" alt="{{ pageHome.actionData2Alt }}">
                            <div class="data-number blue right">
                                <span class="number shortstack">{{ pageHome.actionDataTitle2 }}</span>
                                {{ pageHome.actionDataParagraph2|raw }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="actualities">
            <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="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 wrap align-end">
                                    <p>
                                        {{ actuality.content|striptags|slice(0, 250)|raw }} ...
                                    </p>
                                    <a href="{{ path('app_actuality_show', {id: actuality.id, slug: actuality.slug}) }}" class="btn btn-green">Lire l'article</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    </main>
{% endblock %}