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

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

{% block body %}
    <main role="main">
        <section class="ptge-detail">
            <div class="container">
                <div class="title">
                    <h1>
                        {% set title = pageLePTGE.kezakoTitle | split(' ') %}
                        {% for word in title %}
                            {% if loop.last is same as true %}
                            {% else %}
                                {% if "'" in word %}
                                    {% set wordSep = word | split("'") %}
                                    <span>
                                        {% for wordSeparate in wordSep %}
                                            {% if loop.last is same as true %}
                                            {% else %}
                                                {{ wordSeparate }}'<span class="blue">{{ wordSep|last }}</span> 
                                            {% endif %}
                                        {% endfor %}
                                        <img src="{{ asset('images/soulignement/soulignement-kezakeau.svg') }}" alt="Trait bleu">
                                    </span>
                                {% else %}
                                    {% if loop.index is same as(loop.length-1) %}
                                        <span class="blue">
                                            {{ word }}
                                            <img src="{{ asset('images/soulignement/soulignement-kezakeau.svg') }}" alt="Trait bleu">
                                        </span>
                                        {% else %}
                                        {{ word }}                                  
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        {{ title|last }}
                    </h1>
                </div>
                <div class="project-ptge">
                    <div class="row">
                        <div class="col-7">
                            <h2 class="shortstack">{{ pageLePTGE.pgteSubTitle }}</h2>
                            {{ pageLePTGE.ptgeParagraph|raw }}
                        </div>
                        <div class="col-5">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageLePTGE, 'ptgeImageFile') }}" alt="{{ pageLePTGE.ptgeImageAlt }}">
                                <figcaption>{{ pageLePTGE.ptgeImageLegend }}</figcaption>
                            </figure>
                        </div>
                    </div>
                    <img src="{{ asset('images/forme-ptge.webp') }}" class="forme" alt="Forme illustration - Projet Territorial de la Gestion de l'Eau">
                </div>
                <div class="why-ptge">
                    <div class="row align-center">
                        <div class="col-5">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageLePTGE, 'whyImageFile') }}" alt="{{ pageLePTGE.whyImageAlt }}">
                                <figcaption>{{ pageLePTGE.whyImageLegend }}</figcaption>
                            </figure>
                        </div>
                        <div class="col-7">
                            <h2>{{ pageLePTGE.whyTitle }}</h2>
                            {{ pageLePTGE.whyParagraph|raw }}
                            <div class="objective flex-row justify-between wrap">
                                <div class="objective__item b">
                                    {{ pageLePTGE.whyParagraphBlue|raw }}
                                </div>
                                <div class="objective__item flex-row align-center g">
                                    {{ pageLePTGE.whyParagraphGreen|raw }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="actions-ptge">
                <div class="actions-ptge__wrapper flex-row justify-between">
                    <div class="text-action-ptge">
                        {{ pageLePTGE.actionParagraph|raw }}
                    </div>
                    <img src="{{ vich_uploader_asset(pageLePTGE, 'actionImageFile') }}" class="image" alt="{{ pageLePTGE.actionImageAlt }}">
                </div>
            </div>
            <div class="challenge-ptge">
                <img src="{{ asset('images/gloup/gloup-sourriant.svg') }}" class="gloup" alt="Gloup souriant">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-5">
                            <h2>{{ pageLePTGE.challengesTitle }}</h2>
                            {{ pageLePTGE.challengesParagraph|raw }}
                        </div>
                        <div class="col-5">
                            <h2 class="green">{{ pageLePTGE.goalsTitle }}</h2>
                            {{ pageLePTGE.goalsParagraph|raw }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="action-implemented">
                <div class="bg"></div>
                <div class="container">
                    <h2>{{ pageLePTGE.pcpActionsTitle }}</h2>
                    <div class="row">
                        <div class="col-6">
                            {{ pageLePTGE.pcpActionParagraph1|raw }}
                        </div>
                        <div class="col-6">
                            {{ pageLePTGE.pcpActionParagraph2|raw }}
                            <img src="{{ vich_uploader_asset(pageLePTGE, 'pcpActionImageFile') }}" alt="{{ pageLePTGE.pcpActionImageAlt }}">
                        </div>
                    </div>
                </div>
                <img src="{{ asset('images/plante-ptge.webp') }}" class="plant" alt="Illustration plante">
            </div>
            <div class="animation-ptge">
                <div class="container">
                    <h2>{{ pageLePTGE.animationTitle }}</h2>
                    {{ pageLePTGE.animationParagraph1|raw }}
                    <div class="row justify-content-between">
                        <div class="col-5">
                            {{ pageLePTGE.animationParagraph2|raw }}
                            <img src="{{ asset('images/gloup/gloup-sourriant-flaque.svg') }}" class="gloup" alt="Mascotte gloup souriante">
                        </div>
                        <div class="col-5">
                            <img src="{{ vich_uploader_asset(pageLePTGE, 'animationImageFile') }}" alt="{{ pageLePTGE.animationImageAlt }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="document-ptge" id="animation-ptge">
                <div class="container">
                    <div class="row">
                        <div class="col-6">
                            <h2 class="bs">{{ pageLePTGE.conditionTitle }}</h2>
                            {{ pageLePTGE.conditionParagraph|raw }}
                            <a href="{{ vich_uploader_asset(pageLePTGE, 'conditionDocumentFile') }}" class="btn btn-green">Télécharger le document</a>
                        </div>
                        <div class="col-6">
                            <h2 class="g">{{ pageLePTGE.diagnosticTitle }}</h2>
                            {{ pageLePTGE.diagnosticParagraph|raw }}
                            <a href="{{ vich_uploader_asset(pageLePTGE, 'diagnosticDocumentFile') }}" class="btn btn-blue">Télécharger le document</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}