{% 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_select %}
      <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 %}
    {% if mesh_select %}
      <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_short_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_short_titles|get_item:m }}"
                      >
                          {{ params.meshes_short_titles|get_item:m }}
                      </button>
                  </li>
              {% endfor %}
          </ul>
      </div>
    {% endif %}
</div>