{% load other_filters %}

<div class="tdbmd-thematics__btns">
    <div class="tdbmd-territory">
        <button
          class="fr-btn fr-btn--tertiary fr-icon-pencil-line fr-btn--icon-right tdbmd-territory__btn"
          aria-description="Modifier mon territoire dans la barre latérale"
          aria-controls="slide-panel-geo"
          data-comparison="false"
        >
          <span class="tdbmd-territory__btn-title fr-text--xs">
            Territoire sélectionné
          </span>
          <span class="tdbmd-territory__btn-mesh">
            {{ params.territory_name }}
          </span>
        </button>
    </div>
    {% if comparison %}
      <div class="tdbmd-territory">
        <button
          class="fr-btn fr-btn--tertiary fr-icon-pencil-line fr-btn--icon-right tdbmd-territory__btn"
          aria-description="Modifier mon territoire de comparaison dans la barre latérale"
          aria-controls="slide-panel-geo"
          data-comparison="true"
        >
          <span class="tdbmd-territory__btn-title fr-text--xs">
            Territoire de comparaison
          </span>
          <span class="tdbmd-territory__btn-mesh">
            {{ params.cmp_territory_name }}
          </span>
        </button>
      </div>
    {% endif %}
    <div class="tdbmd-mesh">
        <button
          aria-expanded="false"
          aria-controls="tdbmd-mesh-list"
          class="tdbmd-mesh__btn fr-btn fr-btn--tertiary fr-icon-arrow-down-s-line fr-btn--icon-right tdbmd-mesh__btn"
          aria-description="Modifier la maille"
        >
          <span class="tdbmd-mesh__btn-title fr-text--xs">Maille</span>
          <span class="tdbmd-mesh__btn-mesh">
            {{ params.meshes_titles|get_item:params.mesh }}
          </span>
        </button>
        <ul
          class="fr-collapse tdbmd-mesh__list"
          id="tdbmd-mesh-list"
        >
            {% for m in params.meshes %}
                <li class="tdbmd-mesh__list-item">
                    <button
                        onClick="
                            const urlParams = new URLSearchParams(window.location.search);
                            urlParams.set('mesh', '{{ m }}');
                            window.location.search = urlParams;
                        "
                        class="fr-btn fr-btn--tertiary-no-outline tdbmd-mesh__list-btn
                        {% if m == params.mesh %}tdbmd-mesh__list-btn--current{% endif %}
                        "
                        aria-label="Sélectionnez {{ params.meshes_titles|get_item:m }}"
                    >
                        {{ params.meshes_titles|get_item:m }}
                    </button>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
