{% load assets i18n %}
<div>
  <form id="territoires-selection-commune-form">
    <h2>Choisir une commune</h2>
    <label class="sr-only" for="combo-search-input-{{ cell.pk }}">Commune</label>
    <select style="width: 80%">
      {% for card in card_objects %}
        <option value="{{ card.id }}"
          {% if territoire == card.id %}selected{% endif %}
          data-href="{% if card.fields.instance_publik is True %}/{{ card.fields.slug_commune }}/{% else %}/np/{{ card.id }}/{% endif %}">
          {{ card.text }}</option>
      {% endfor %}
    </select>

    <button class="submit-button combo-search--button" aria-label="Rechercher">
      <span class="combo-search--button-label">Rechercher</span>
    </button>
  </form>
  <script>
    $(function() {
      let form = document.getElementById('territoires-selection-commune-form')
      let select = document.querySelector('#territoires-selection-commune-form select')
      form.addEventListener('submit', (e) => {
        e.preventDefault()
        let option_value = select.value
        let option = document.querySelector(`#territoires-selection-commune-form option[value="${option_value}"]`)
        console.log(option)
        if (option) {
          window.location = option.dataset.href
        }
        return false;
      })
      $(select).select2()
      $(select).on('select2:select', (e) => form.requestSubmit())
    })
  </script>
</div>