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

{% block title %}Le territoire - PTGE{% endblock %}

{% block body %}
    <main role="main">
        <section class="territory-page">
            <div class="container">
                <div class="title">
                    <h1>
                        {% set title = pageTerritory.title | split(' ') %}
                        {% for word in title %}
                            {% if loop.last is same as true %}
                            {% else %}
                                {{ word }}
                            {% endif %}
                        {% endfor %}
                        <span class="green">{{ title|last }} <img src="{{ asset('images/soulignement/soulignement-territoire.svg') }}" alt="Trait bleu"></span>
                    </h1>
                </div>
                <div class="basement">
                    <div class="basement__wrapper flex-row wrap align-center justify-between">
                        <div class="basement__wrapper__text">
                            {{ pageTerritory.historyParagraph|raw }}
                        </div>
                        <div class="basement__wrapper__image flex-row align-end">
                            <img src="{{ asset('images/gloup/gloup-peur-rotate.svg') }}" class="gloup" alt="Gloup peur">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageTerritory, 'historyImageFile') }}" alt="{{ pageTerritory.historyImageAlt }}">
                                <figcaption>{{ pageTerritory.historyImageSource }}</figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>

            <div class="water">
                <img src="{{ asset('images/plante-sous-sol.svg') }}" alt="Illustration de plante" class="plant">
                <div class="container">
                    {{ pageTerritory.waterParagraph|raw }}
                    <div class="img-gloup flex-row align-center">
                        <figure class="photo">
                            <img src="{{ vich_uploader_asset(pageTerritory, 'waterImageFile') }}" alt="{{ pageTerritory.waterImageAlt }}">
                            <figcaption>{{ pageTerritory.waterImageLegend }}</figcaption>
                        </figure>
                        <img src="{{ asset('images/gloup/gloup-interrogation-flaque.svg') }}" alt="Gloup interrogation">
                    </div>
                </div>
                <img src="{{ asset('images/forme-bloc-eau.webp') }}" alt="Forme rond et rectangulaire - PTGE" class="shape">
            </div>

            <div class="serein-armancon">
                <div class="container">
                    <h2 class="shortstack">{{ pageTerritory.neighbourTitle }}</h2>
                    <div class="serein-armancon__wrapper flex-row wrap justify-between">
                        <figure>
                            <img src="{{ vich_uploader_asset(pageTerritory, 'neighbourImageFile') }}" alt="{{ pageTerritory.neighbourImageAlt }}">
                            <figcaption>{{ pageTerritory.neighbourImageLegend }}</figcaption>
                        </figure>
                        <div class="text-img">
                            {{ pageTerritory.neighbourParagraph|raw }}
                            <div class="flex-row wrap justify-between">
                                <figure>
                                    <img src="{{ vich_uploader_asset(pageTerritory, 'neighbourImage2File') }}" alt="{{ pageTerritory.neighbourImage2Alt }}">
                                    <figcaption>{{ pageTerritory.neighbourImage2Legend }}</figcaption>
                                </figure>
                                {{ pageTerritory.neighbourParagraph2|raw }}
                            </div>
                        </div>
                    </div>
                </div>
                <img src="{{ asset('images/plante-serein-armancon.svg') }}" class="plant" alt="Illustration de plante">
            </div>

            <div class="water-and-use">
                <div class="container">
                    <h2 class="shortstack">{{ pageTerritory.usageTitle }}</h2>

                    <div class="row">
                        <div class="col-4">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageTerritory, 'usage1ImageFile') }}" alt="{{ pageTerritory.usage1ImageAlt }}">
                                <figcaption>{{ pageTerritory.usage1ImageLegend }}</figcaption>
                            </figure>
                            <h3>{{ pageTerritory.usage1Title }}</h3>
                            {{ pageTerritory.usage1Paragraph|raw }}
                        </div>
                        <div class="col-4">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageTerritory, 'usage2ImageFile') }}" alt="{{ pageTerritory.usage2ImageAlt }}">
                                <figcaption>{{ pageTerritory.usage2ImageLegend }}</figcaption>
                            </figure>
                            <h3>{{ pageTerritory.usage2Title }}</h3>
                            {{ pageTerritory.usage2Paragraph|raw }}
                        </div>
                        <div class="col-4">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageTerritory, 'usage3ImageFile') }}" alt="{{ pageTerritory.usage3ImageAlt }}">
                                <figcaption>{{ pageTerritory.usage3ImageLegend }}</figcaption>
                            </figure>
                            <h3>{{ pageTerritory.usage3Title }}</h3>
                            {{ pageTerritory.usage3Paragraph|raw }}
                        </div>
                    </div>
                </div>
                <img src="{{ asset('images/plante-eau-usage.webp') }}" class="plant" alt="Illustration plante">
            </div>

            <div class="water-cycle">
                <div class="container">
                    <h2 class="shortstack">{{ pageTerritory.cycleTitle }}</h2>
                    <div class="water-cycle__wrapper flex-row wrap justify-between">
                        <div class="water-cycle__wrapper__left">
                            {{ pageTerritory.cycleParagraph|raw }}
                        </div>
                        <div class="water-cycle__wrapper__right">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageTerritory, 'cycleImageFile') }}" alt="{{ pageTerritory.cycleImageAlt }}">
                                <figcaption>{{ pageTerritory.cycleImageLegend }}</figcaption>
                            </figure>
                            <h2 class="shortstack">{{ pageTerritory.originTitle }}</h2>
                            {{ pageTerritory.originParagraph|raw }}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}