{% 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-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Revoltes.png' }}" title="">
                    </div>
                    <div class="col-7 revolt">
                        <div>Nos révoltes</div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Reve.png' }}" title="">
                    </div>
                    <div class="col-7 dream">
                        Nos rêves
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" title="">
                    </div>
                    <div class="col-7 project-boost">
                        Les actions à booster
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="row">
                    <div class="col-5">
                        <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" title="">
                    </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">

            <div class="img-map img-vosges">
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
                </a>
            </div>

            <div class="img-map img-belfort">
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
                </a>
            </div>

            <div class="img-map img-hericourt">
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
                </a>
            </div>

            <div class="img-map img-montbeliard">
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
                </a>
            </div>

            <div class="img-map img-montbeliard">
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
                </a>
            </div>

            <div class="img-map img-sud">
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Revoltes.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Reve.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Booster.png' }}" alt="">
                </a>
                <a href="" title="">
                    <img src="{{ 'assets/img/Picto-Actions-Inspirantes.png' }}" alt="">
                </a>
            </div>
        </div>
    </div>
{% endblock %}