{% extends 'frontend/base.html.twig' %}
{% import 'frontend/macro.html.twig' as macro %}

{% block title %}Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté{% endblock %}

{% block meta %}
    <meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté"/>
    <meta name="description"
          content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !"/>
{% endblock %}

{% block body %}
    <div class="bloc-discover">
        <div class="container container-discover">
            <img class="carto-dream" src="{{ 'assets/img/Accueil-A-Propos.png' }}" alt="cartographie">
            <div class="row">
                <div class="col-12 col-md-9">
                    <h1>Partez à la découverte d’Aux Actes Citoyens !</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-4">
                    <p>Une démarche inédite de concertation pour imaginer ensemble le futur du Nord Franche-Comté !</p>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-3">
                    <a class="download-plaq" target="_blank"
                       href="https://www.aux-actes-citoyens.fr/assets/pdf/AAC-Fiche-Pratique-Aux-Actes-Citoyens.pdf"
                       title="Télécharger la plaquette">Télécharger la plaquette</a>
                </div>
            </div>
        </div>

        {% if blockStartUp %}
            <div class="container container-startup">
                <div class="row">
                    <div class="col-12 col-sm-6 col-image">
                        <img src="{{ 'assets/img/SUT-A-propos.png' }}" alt="start up">
                    </div>
                    <div class="col-12 col-sm-6">
                        <h2>{{ blockStartUp.title }}</h2>
                        <div class="description">
                            {{ blockStartUp.description|raw }}
                        </div>
                        <a class="other-startup link-slide" target="_blank" href="http://startupdeterritoire.fr"
                           title="Les autres start up">Découvrir les autres Start Up de
                            Territoires</a>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <div class="container container-manifeste">
        <div class="row">
            <div class="col-12">
                <h2>Le manifeste <span>Aux Actes Citoyens</span></h2>
                <div class="video-aac">
                    <iframe width="80%" height="400px" src="https://www.youtube.com/embed/1dC1OoIi87o"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="bloc-three-step">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Les trois étapes</h2>
                </div>
            </div>
            <div class="row row-step">
                {% if blockStep1 %}
                    <div class="col-12 col-sm-4">
                        <img src="{{ 'assets/img/Etape1-Labourage-Blanc.png' }}" alt="Etape1">
                        <h3>{{ blockStep1.title }}</h3>
                        <div class="description">
                            {{ blockStep1.description|raw }}
                        </div>
                    </div>
                {% endif %}
                {% if blockStep2 %}
                    <div class="col-12 col-sm-4">
                        <img src="{{ 'assets/img/Etape2-EvenementBlanc.png' }}" alt="Etape2">
                        <h3>{{ blockStep2.title }}</h3>
                        <div class="description">
                            {{ blockStep2.description|raw }}
                        </div>
                    </div>
                {% endif %}
                {% if blockStep3 %}
                    <div class="col-12 col-sm-4">
                        <img src="{{ 'assets/img/Etape3-Accompagnement-Blanc.png' }}" alt="Etape3">
                        <h3>{{ blockStep3.title }}</h3>
                        <div class="description">
                            {{ blockStep3.description|raw }}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% if blockLabourage %}
        <div id="labourage" class="container container-step1">
            <div class="row">
                <div class="col-12 col-sm-6">
                    <img class="logo-labourage" src="{{ 'assets/img/Labourage-Img.png' }}" alt="Labourage">
                </div>
                <div class="col-12 col-sm-6">
                    <h2>
                        <img class="picto-labourage" src="{{ 'assets/img/Picto-Labourage-Vert.png' }}" alt="Labourage">
                        {{ blockLabourage.title }}
                    </h2>
                    <div class="description">
                        {{ blockLabourage.description|raw }}
                    </div>
                    <a class="participate" href="{{ path('app_contribuate') }}" title="Participer à la concertation">Participer
                        à la concertation</a>
                </div>
            </div>
        </div>
    {% endif %}

    {% if blockRecolt %}
        <div id="recolte" class="bloc-recolte">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-7">
                        <h2>
                            <img class="picto-labourage" src="{{ 'assets/img/Picto-Evenement-Vert.png' }}"
                                 alt="Evenement vert">
                            {{ blockRecolt.title }}
                        </h2>
                        <div class="description">
                            {{ blockRecolt.description|raw }}
                        </div>
                        <div class="subscribe-event">
                            {{ macro.email_contact("S'INSCRIRE A L’ÉVÉNEMENT", "S'inscrire à l'événement (La récolte des solutions)") }}
                        </div>
                    </div>
                    <div class="col-12 col-sm-5">
                        <img class="logo-event" src="{{ 'assets/img/Evenement-Img.png' }}" alt="Evenement">
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% if blockAccompagnement %}
        <div id="accompagnement" class="container container-ressource">
            <div class="row">
                <div class="col-12 col-sm-5 col-image">
                    <img class="logo-ressource" src="{{ 'assets/img/Ressourcerie-Img.png' }}" alt="Ressourcerie">
                </div>

                <div class="col-12 col-sm-7">
                    <h2>
                        <img class="picto-ressource" src="{{ 'assets/img/Picto-Accompagnement-Vert.png' }}"
                             alt="Accompagnement vert">
                        {{ blockAccompagnement.title }}
                    </h2>
                    <div class="description">
                        {{ blockAccompagnement.description|raw }}
                    </div>
                    <div class="contribuate">
                        {{ macro.email_contact("CONTRIBUER A LA RESSOURCERIE", "Contribuer à la ressourcerie") }}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="bloc-coop-cit">
        {% if blockDemarche %}
            <div class="container container-coop">
                <div class="row justify-content-center">
                    <div class="col-12 col-sm-7">
                        <h2>{{ blockDemarche.title }}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-8">
                        <img class="logo-coop" src="{{ 'assets/img/LaCoop-Img.png' }}" alt="Coopérative des Citoyens">
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="description">
                            {{ blockDemarche.description|raw }}
                        </div>
                        <a class="more" target="_blank" href="https://www.lacooperativedescitoyens.fr "
                           title="En savoir plus">En savoir plus sur la Coop</a>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if blockCoeur %}
            <div id="team-coeur" class="container container-coeur">
                <div class="row justify-content-center">
                    <div class="col-12 col-sm-10">
                        <h2>{{ blockCoeur.title }}</h2>
                    </div>
                    <div class="col-12 col-sm-5">
                        <div class="description">
                            {{ blockCoeur.description|raw }}
                        </div>
                        <div class="join-coeur">
                            {{ macro.email_contact("REJOINDRE L’ÉQUIPE CŒUR", "Rejoindre l'équipe coeur") }}
                        </div>
                    </div>
                    <div class="col-12 col-sm-5">
                        <img class="logo-coeur" src="{{ 'assets/img/Equipe-Coeur-Img.png' }}" alt="coeur">
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <div class="container container-funded">
        <h2>Financé par :</h2>
        <div class="row">
            <div class="col">
                <img src="{{ 'assets/img/Bourgogne-Franche-Comté_2016.png' }}" alt="bourgogne franche comté">
            </div>
            <div class="col">
                <img src="{{ 'assets/img/pma-pays-de-montbeliard-agg.jpg' }}" alt="pays de montbéliard">
            </div>
            <div class="col">
                <img class="logo-hericourt" src="{{ 'assets/img/Logo_Héricourt_70.png' }}" alt="héricourt">
            </div>
        </div>
    </div>
{% endblock %}