{% 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.all_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_titles|get_item:m }}
                    </button>
                </li>
            {% endfor %}
        </ul>
        {% for m in params.all_meshes %}
            <div id="tabpanel-{{ m }}-panel" class="fr-tabs__panel tdbmbd-tabpanel-panel {% if m == params.territory_mesh %}fr-tabs__panel--selected{% endif %}" role="tabpanel" aria-labelledby="tabpanel-{{ m }}" tabindex="0" style="transition: none;">
                <h2>
                    {{ params.meshes_titles|get_item:m }}
                </h2>
                <div class="fr-input-group autocomplete-input">
                    <label id="territories-label-{{ m }}" class="fr-label" for="search-territories-{{ m }}">Sélectionner un territoire</label>
                    <div class="fr-input-wrap fr-input-wrap--addon">
                        <input
                            data-mesh="{{ m }}"
                            id="search-territories-{{ m }}" class="fr-input search-territory-input" aria-autocomplete="list" aria-controls="territories-menu-{{ m }}" aria-expanded="false" aria-labelledby="territories-label-{{ m }}" autocomplete="off" role="combobox" type="text"
                            ></input>
                        <button class="fr-btn fr-icon-arrow-down-s-line autocomplete-btn" aria-controls="territories-menu-{{ m }}" aria-expanded="false" tabindex="-1" title="Sélectionner un territoire">
                        </button>
                    </div>
                </div>
                <ul id="territories-menu-{{ m }}" data-mesh="{{ m }}" class="tdbmd-combobox-suggestions" role="listbox">
                    <li data-type="load"><button onclick="loadMoreTerritories(this)" data-mesh="{{ m }}" class="fr-btn fr-btn--secondary fr-btn--sm">Charger plus de résultats</button></li>
                </ul>
                <input id="selected-territory-id-{{ m }}" type="hidden">
                <input id="selected-territory-mesh-{{ m }}" type="hidden">
                <input id="selected-territory-raw-name-{{ m }}" type="hidden">
                <button
                    id="selected-territory-validate-{{ m }}"
                    data-mesh="{{ m }}"
                    disabled
                    class="fr-btn validate-territory-btn"
                    onclick="validateTerritory(this)"
                >
                    Valider
                </button>
                <em id="selected-territory-name-{{ m }}"></em>
            </div>
        {% 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 %}
