{% extends "./side_panel.html" %}

{% load other_filters %}

{% block "type" %}geo{% endblock %}

{% block "aria-label" %}Menu pour le choix du territoire{% endblock %}

{% block "content" %}
<h1 class="fr-sr-only">Choix du territoire</h1>
<div id="geo_side_panel" class="tdbmd-territory-tabs" style="margin-top: 32px;">
    <div class="fr-tabs fr-transition-none">
        <ul class="fr-tabs__list" role="tablist">
            {% for m in params.ordered_meshes %}
                <li role="presentation">
                    <button
                        id="tabpanel-{{ m }}"
                        class="fr-tabs__tab fr-tabs__tab--icon-left"
                        {% if m == params.territory_mesh %}
                            tabindex="0"
                            aria-selected="true"
                        {% else %}
                            tabindex="-1"
                            aria-selected="false"
                        {% endif %}
                        role="tab"
                        aria-controls="tabpanel-{{ m }}-panel">
                        {{ params.meshes_short_titles|get_item:m }}
                    </button>
                </li>
            {% endfor %}
        </ul>
        {% for m in params.ordered_meshes %}
            {% if m == params.territory_mesh %}
                {% include "./select_territory.html" with selected=True key=m  title=params.meshes_long_titles|get_item:m%}
            {% else %}
                {% include "./select_territory.html" with selected=False key=m  title=params.meshes_long_titles|get_item:m%}
            {% endif %}
        {% endfor %}
    </div>
    <div class="side-panel-last-close-button-container">
        <button
            class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm"
            data-side-panel-close="true"
            >
            Fermer la sélection du territoire
        </button>
    </div>
    <script>
        {% include "./side_panel_geo.js" %}
    </script>
</div>
{% endblock %}