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

{% block carto %}
    <div id="carto-carte">
        <h1 class="title-carte">Une carte du Nord Franche-Comté</h1>
        <div class="row row-contrib">
            <div class="col-5 col-lg-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="révolte">
                    </div>
                    <div class="col-7 revolt">
                        <div>Nos révoltes</div>
                    </div>
                </div>
            </div>
            <div class="col-5 col-lg-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="rêve">
                    </div>
                    <div class="col-7 dream">
                        Nos rêves
                    </div>
                </div>
            </div>
            <div class="col-5 col-lg-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="Projet booster">
                    </div>
                    <div class="col-7 project-boost">
                        Les actions à booster
                    </div>
                </div>
            </div>
            <div class="col-5 col-lg-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="Projet inspirant">
                    </div>
                    <div class="col-7 project-insp">
                        Les actions inspirantes
                    </div>
                </div>
            </div>
        </div>
        <div class="help-legend">Cliquer sur les pictos pour découvrir les résultats de la consultation par territoire
            !
        </div>

        <div class="map">
            <img src="{{ 'assets/img/Carte-NFC.png' }}" alt="carte">

            {% for key, result in resultSortArray %}
                <div class="img-map img-{{ key }}">
                    {% set url = '<a href="'~ path('app_carto_liste', {search_list_form:{category:{'':constant('Lc\\PietroBundle\\Model\\AbstractData::CATEGORY_REVOLT')}, territory:{'':result.Territory}}}) ~'">Consulter la liste</a>' %}
                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="" data-toggle="popover"
                        tabindex="0" data-content='<span>Nombre de Révoltes : {{ result.Revolt }} </span> {{ url }}'>

                    {% set url = '<a href="'~ path('app_carto_liste', {search_list_form:{category:{'':constant('Lc\\PietroBundle\\Model\\AbstractData::CATEGORY_DREAM')}, territory:{'':result.Territory}}}) ~'">Consulter la liste</a>' %}
                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="" data-toggle="popover"
                         tabindex="0" data-content='<span>Nombre de Rêves : {{ result.Dream }} </span> {{ url }}'>

                    {% set url = '<a href="'~ path('app_carto_liste', {search_list_form:{category:{'':constant('Lc\\PietroBundle\\Model\\AbstractData::CATEGORY_PROJECTBOOST')}, territory:{'':result.Territory}}}) ~'">Consulter la liste</a>' %}
                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="" data-toggle="popover"
                         tabindex="0" data-content='<span>Nombre de projets à booster : {{ result.ProjectBoost }} </span> {{ url }}'>

                    {% set url = '<a href="'~ path('app_carto_liste', {search_list_form:{category:{'':constant('Lc\\PietroBundle\\Model\\AbstractData::CATEGORY_PROJECTINSPIRING')}, territory:{'':result.Territory}}}) ~'">Consulter la liste</a>' %}
                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="" data-toggle="popover"
                         tabindex="0" data-content='<span>Nombre de projets inspirants : {{ result.ProjectInspiring }} </span> {{ url }}'>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}