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

{% block title %}Et l'eau dans tout ça - PTGE{% endblock %}

{% block body %}
    <main role="main">
        <section class="water-use">
            <div class="container">
                <div class="title">
                    <h1>
                        {% set title = pageWaterUse.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="row align-center">
                    <div class="col-4">
                        <img src="{{ vich_uploader_asset(pageWaterUse, 'navigationPhotoFile') }}" alt="{{ pageWaterUse.navigationPhotoFileAlt }}">
                    </div>
                    <div class="col-8">
                        <h2>{{ pageWaterUse.navigationTitle }}</h2>
                        {{ pageWaterUse.navigationParagraph|raw }}
                    </div>
                </div>
                <div class="row align-center agriculture">
                    <div class="col-8">
                        <h2>{{ pageWaterUse.agriTitle }}</h2>
                        {{ pageWaterUse.agriParagraph|raw }}
                    </div>
                    <div class="col-4">
                        <img src="{{ vich_uploader_asset(pageWaterUse, 'agriPhotoFile') }}" alt="{{ pageWaterUse.agriPhotoFileAlt }}">
                    </div>
                </div>
            </div>
            <div class="alimentation-water">
                <img src="{{ asset('images/plante-serein-armancon.svg') }}" class="plant" alt="Illustration de plante">
                <div class="container">
                    <div class="row">
                        <div class="col-4">
                            <img src="{{ vich_uploader_asset(pageWaterUse, 'waterAlimPhotoFile') }}" alt="{{ pageWaterUse.waterAlimPhotoFileAlt }}">
                        </div>
                        <div class="col-8">
                            <h2>{{ pageWaterUse.waterAlimTitle }}</h2>
                            {{ pageWaterUse.waterAlimParagraph|raw }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="industry-no-consummer">
                <div class="bg"></div>
                <div class="container">
                    <div class="industry-no-consummer__wrapper flex-row wrap justify-between">
                        <div class="industry-no-consummer__wrapper__item industry">
                            <img src="{{ vich_uploader_asset(pageWaterUse, 'induPhotoFile') }}" alt="{{ pageWaterUse.induPhotoFileAlt }}">
                            <h2>{{ pageWaterUse.induTitle }}</h2>
                            {{ pageWaterUse.induParagraph|raw }}
                            <div class="industry-graphic flex-row justify-around">
                                <img src="{{ vich_uploader_asset(pageWaterUse, 'consoSereinImageFile') }}" class="graphic-serein" alt="{{ pageWaterUse.consoSereinImageFileAlt }}">
                                <img src="{{ vich_uploader_asset(pageWaterUse, 'consoArmanconImageFile') }}" class="graphic-armancon" alt="{{ pageWaterUse.consoArmanconImageFileAlt }}">
                            </div>
                        </div>
                        <div class="industry-no-consummer__wrapper__item no-consummer">
                            <img src="{{ vich_uploader_asset(pageWaterUse, 'usagePhotoFile') }}" alt="{{ pageWaterUse.usagePhotoFileAlt }}">
                            <h2>{{ pageWaterUse.usageTitle }}</h2>
                            {{ pageWaterUse.usageParagraph|raw }}
                            <img src="{{ asset('images/gloup/gloup-sourriant-flaque.svg') }}" class="gloup" alt="Gloup">
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}