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

{% 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 %}
    {% if blockContrib %}
        <div class="bloc-revolt-dream">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-6">
                        <h1>Nos révoltes et nos rêves pour notre territoire</h1>
                        <h2>{{ blockContrib.title }}</h2>
                        <div class="description">{{ blockContrib.description|raw }}</div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <img class="carto-dream" src="{{ 'assets/img/Cartographie-Reve.png' }}" alt="cartographie">
                        <div class="bloc-contrib">
                            <div class="you-are">
                                Vous êtes le :
                            </div>
                            <div class="nb-contrib">
                                {{ nbContrib }}
                            </div>
                            <div class="contrib">
                                contributeurs
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="container bloc-form">
        <div class="row">
            <div class="col-12">
                <h1 class="title-form">Formulaire de contribution individuel</h1>
                {{ form_start(form) }}
                {% form_theme form '@LcSov/adminlte/crud/form_theme.html.twig' %}

                <div class="row">
                    <div class="col-12">
                        {{ form_label(form.territory, null, {'label_attr': {'class': 'label'}}) }}
                    </div>
                    <div class="col-12">
                        <ul class="list-territory">
                            {% for field in form.territory.children %}
                                <li>
                                    {{ form_widget(field) }}
                                    {{ form_label(field) }}
                                    {{ form_errors(field) }}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>

                <div class="row row-revolt">
                    <div class="col-12">
                        <h2>
                            <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="révolte">
                            Nos révoltes
                        </h2>
                        {{ form_label(form.revolt, null, {'label_attr': {'class': 'label'}}) }}
                    </div>
                    <div class="col-12">
                        <ul class="revolt" data-index="0"
                            data-prototype="{{ form_widget(form.revolt.vars.prototype)|e('html_attr') }}"></ul>
                        <button type="button" class="add_item_link button-green" data-collection-holder-class="revolt">
                            Ajouter une
                            révolte
                        </button>
                    </div>
                </div>

                <div class="row row-dream">
                    <div class="col-12">
                        <h2>
                            <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="rêve">
                            Nos rêves
                        </h2>
                        {{ form_label(form.dream, null, {'label_attr': {'class': 'label'}}) }}
                    </div>
                    <div class="col-12">
                        <ul class="dream" data-index="0"
                            data-prototype="{{ form_widget(form.dream.vars.prototype)|e('html_attr') }}"></ul>
                        <button type="button" class="add_item_link button-green" data-collection-holder-class="dream">
                            Ajouter un rêve
                        </button>
                    </div>
                </div>

                <div class="row row-project-boost">
                    <div class="col-12">
                        <h2>
                            <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="Projet booster">
                            Les actions à booster
                        </h2>
                        {{ form_label(form.projectBoost, null, {'label_attr': {'class': 'label'}}) }}
                    </div>
                    <div class="col-12">
                        <ul class="projectBoost" data-index="0"
                            data-prototype="{{ form_widget(form.projectBoost.vars.prototype)|e('html_attr') }}"></ul>
                        <button type="button" class="add_item_link button-green"
                                data-collection-holder-class="projectBoost">Ajouter
                            une action
                        </button>
                    </div>
                </div>

                <div class="row row-project-insp">
                    <div class="col-12">
                        <h2>
                            <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="Projet inspirant">
                            Les actions inspirantes
                        </h2>
                        {{ form_label(form.projectInspiring, null, {'label_attr': {'class': 'label'}}) }}
                    </div>
                    <div class="col-12">
                        <ul class="projectInspiring" data-index="0"
                            data-prototype="{{ form_widget(form.projectInspiring.vars.prototype)|e('html_attr') }}"></ul>
                        <button type="button" class="add_item_link button-green"
                                data-collection-holder-class="projectInspiring">
                            Ajouter une action
                        </button>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 text-center">
                        {{ form_widget(form.save) }}
                    </div>
                </div>

                {% do form.revolt.setRendered %}
                {% do form.dream.setRendered %}
                {% do form.projectBoost.setRendered %}
                {% do form.projectInspiring.setRendered %}
                {{ form_end(form) }}
            </div>
        </div>
    </div>

{% endblock %}