{# Contenitore della tendina: bottone chiuso + menu con checkbox. #}
{# data-bs-auto-close="outside" (Bootstrap 5.2+) tiene il menu aperto #}
{# finché si clicca dentro, cosa che un dropdown Bootstrap normale non fa #}
{# selezionando più checkbox di seguito. L'etichetta del bottone è #}
{# aggiornata da agesci_theme/static/agesci_theme/js/multiselect-dropdown.js. #}
<div class="dropdown ag-multiselect">
  <button type="button"
          class="form-select ag-multiselect__toggle text-start{% if "aria-invalid" in widget.attrs %} is-invalid{% endif %}"
          data-bs-toggle="dropdown"
          data-bs-auto-close="outside"
          aria-expanded="false">
    <span class="ag-multiselect__label" data-placeholder="{{ widget.placeholder }}">{{ widget.placeholder }}</span>
  </button>
  <ul class="dropdown-menu ag-multiselect__menu p-2">
    {% for group, options, index in widget.optgroups %}
      {% for option in options %}
        {% include option.template_name with widget=option %}
      {% endfor %}
    {% endfor %}
  </ul>
</div>