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

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

{% block body %}
    <main role="main">
        <section class="about">
            <div class="container">
                <div class="title">
                    <h1>
                        {% set whoTitle = pageAbout.title | split('-') %}
                        {% if whoTitle|length is same as 2 %}    
                            {% for word in whoTitle %}
                                {% if loop.last is same as true %}
                                {% else %}
                                    {{ word }}-<span class="green">{% set whoTitleLast = whoTitle|last | split(' ') %}{% for wordLast in whoTitleLast %}{% if loop.last is same as true %}{% else %}{{ wordLast }}{% endif %}{% endfor %}
                                        <img src="{{ asset('images/soulignement/soulignement-territoire.svg') }}" alt="Trait bleu"></span> {{ whoTitleLast|last }}
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                        {% if whoTitle|length is not same as 2 %}    
                            {% set whoTitleSplitSpace = pageAbout.title | 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-territoire.svg') }}" alt="Trait bleu"></span>
                        {% endif %}
                    </h1>
                </div>
                <div class="actors-ptge">
                    <h2 class="shortstack">{{ pageAbout.actorTitle }}</h2>
                    {{ pageAbout.actorParagraph|raw }}
                    <div class="actors-ptge__major">
                        <h3>{{ pageAbout.actorImpliedTitle }}</h3>
                        <div class="actors-ptge__major__wrapper flex-row wrap justify-between">
                            <div class="actors-ptge__major__wrapper__item">
                                <div class="title-actor flex-row wrap align-center bp">
                                    <div class="circle"></div>
                                    <h4>{{ pageAbout.communityTitle }}</h4>
                                </div>
                                {{ pageAbout.communityParagraph|raw }}
                            </div>
                            <div class="actors-ptge__major__wrapper__item">
                                <div class="title-actor flex-row wrap align-center gs">
                                    <div class="circle"></div>
                                    <h4>{{ pageAbout.servicesTitle }}</h4>
                                </div>
                                {{ pageAbout.servicesParagraph|raw }}
                            </div>
                            <div class="actors-ptge__major__wrapper__item">
                                <div class="title-actor flex-row wrap align-center bs">
                                    <div class="circle"></div>
                                    <h4>{{ pageAbout.unionTitle }}</h4>
                                </div>
                                {{ pageAbout.unionParagraph|raw }}
                            </div>
                            <div class="actors-ptge__major__wrapper__item">
                                <div class="title-actor flex-row wrap align-center gp">
                                    <div class="circle"></div>
                                    <h4>{{ pageAbout.actorSocioTitle }}</h4>
                                </div>
                                {{ pageAbout.actorSocioParagraph|raw }}
                            </div>

                            <div class="actors-ptge__major__wrapper__item last">
                                <div class="title-actor flex-row wrap align-center bp">
                                    <div class="circle"></div>
                                    <h4>{{ pageAbout.citizenTitle }}</h4>
                                </div>
                                {{ pageAbout.citizenParagraph|raw }}
                            </div>
                        </div>
                    </div>

                    <div class="actor-diversity">
                        <img src="{{ asset('images/plant-actor-ptge.webp') }}" class="plant" alt="Illustration plante aquatique">
                        <h3>{{ pageAbout.varietyTitle }}</h3>
                        <div class="actor-diversity__wrapper flex-row justify-between wrap">
                            <div class="actor-diversity__wrapper__item bg-b flex-column justify-center">
                                <h4>{{ pageAbout.complementTitle }}</h4>
                                {{ pageAbout.complementParagraph|raw }}
                                <img src="{{ asset('images/trait-diversite-vert.svg') }}" class="dash" alt="Trait vert">
                            </div>
                            <div class="actor-diversity__wrapper__item bg-g flex-column justify-center">
                                <h4>{{ pageAbout.sharesTitle }}</h4>
                                {{ pageAbout.sharesParagraph|raw }}
                                <img src="{{ asset('images/trait-diversite-bleu.svg') }}" class="dash" alt="Trait bleu">
                            </div>
                            <div class="actor-diversity__wrapper__item bg-b flex-column justify-center">
                                <h4>{{ pageAbout.legitimityTitle }}</h4>
                                {{ pageAbout.legitimityParagraph|raw }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="role-ptge">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-7">
                            <h2 class="shortstack">
                                {{ pageAbout.roleTitle }}
                            </h2>
                            {{ pageAbout.roleParagraph|raw }}
                        </div>
                        <div class="col-4">
                            <figure>
                                <img src="{{ vich_uploader_asset(pageAbout, 'roleImageFile') }}" alt="{{ pageAbout.roleImageAlt }}">
                                <figcaption>{{ pageAbout.roleImageLegend }}</figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>

            <div class="missions">
                <div class="bg">
                    <img src="{{ asset('images/plante_about.webp') }}" class="plant" alt="Plante illustration">
                </div>
                <img src="{{ asset('images/vague.svg') }}" alt="Vecteur vague" class="vague">
                <div class="container">
                    <div class="missions__wrapper flex-row justify-between">
                        <div class="missions__wrapper__item">
                            <img src="{{ vich_uploader_asset(pageAbout, 'animationIconFile') }}" class="picto mb-1" alt="{{ pageAbout.animationIconeAlt }}">
                            <h3>{{ pageAbout.animationTitle }}</h3>
                            {{ pageAbout.animationParagraph|raw }}
                        </div>
                        <div class="missions__wrapper__item">
                            <img src="{{ vich_uploader_asset(pageAbout, 'decisionIconFile') }}" class="picto mb-1" alt="{{ pageAbout.decisionIconAlt }}">
                            <h3>{{ pageAbout.decisionTitle }}</h3>
                            {{ pageAbout.decisionParagraph|raw }}
                        </div>
                        <div class="missions__wrapper__item">
                            <img src="{{ vich_uploader_asset(pageAbout, 'followIconFile') }}" class="picto mb-1" alt="{{ pageAbout.followIconAlt }}">
                            <h3>{{ pageAbout.followTitle }}</h3>
                            {{ pageAbout.followParagraph|raw }}
                        </div>
                    </div>
                    <div class="missions__wrapper flex-row justify-center">
                        <div class="missions__wrapper__item">
                            <img src="{{ vich_uploader_asset(pageAbout, 'communicationIconFile') }}" class="picto mb-1" alt="{{ pageAbout.communicationIconAlt }}">
                            <h3>{{ pageAbout.communicationTitle }}</h3>
                            {{ pageAbout.communicationParagraph|raw }}
                        </div>
                        <div class="missions__wrapper__item">
                            <img src="{{ vich_uploader_asset(pageAbout, 'representationIconFile') }}" class="picto mb-1" alt="{{ pageAbout.representationIconAlt }}">
                            <h3>{{ pageAbout.representationTitle }}</h3>
                            {{ pageAbout.representationParagraph|raw }}
                        </div>
                    </div>
                </div>
                <img src="{{ asset('images/gloup/group-interrogation.svg') }}" class="gloup" alt="Mascotte gloup qui s'intérroge">
            </div>
        </section>
    </main>
{% endblock %}