{% load assets %}
{% block cell-content %}
<h2 class="choix-collectivite--title">
  {{ title }}
</h2>
<div class="cell--body">
  <form id="choix-collectivite--form">
    <label class="choix-collectivite--label" for="choix-collectivite--select">
      Ma commune
    </label>
    <select id="choix-collectivite--select-{{ cell.id }}" class="choix-collectivite--select">
      <option value="">Sélectionnez</option>
      {% for link in links %}
        <option value="{{ link.url }}">{{ link.title }}</option>
      {% endfor %}
    </select>
    <p>
      Sélectionnez votre commune et découvrez ses services en ligne.
    </p>
  </form>
</div>
{% endblock %}

<script>
  $(function() {
    $('#choix-collectivite--select-{{ cell.id }}').change(function(e){
      const link = this.options[this.selectedIndex].value;
      if (link) {
        window.location.href = link;
      }
    })
  });
</script>
