{% load i18n static %}
<link rel="stylesheet" href="{% static 'admin/css/vendor/select2/select2.css' %}">
<link rel="stylesheet" href="{% static 'admin_select_filter/css/admin_select2_filter.css' %}">
{% block filter_title %}
  <h3>{% blocktranslate with filter_title=title %} By {{ filter_title }} {% endblocktranslate %}</h3>
{% endblock filter_title %}
<ul>
  <li>
    <select
      class="django-admin-select-filter"
      aria-label="{{ title }}"
      {% if spec.multiple %}multiple{% endif %}
      data-placeholder="{% translate 'Search' %}"
      data-jquery-url="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"
      data-jquery-init-url="{% static 'admin/js/jquery.init.js' %}"
      data-select2-url="{% static 'admin/js/vendor/select2/select2.full.js' %}"
      data-async-call="{{ spec.async_call|yesno:'true,false' }}"
      data-searchable="{{ spec.searchable|yesno:'true,false' }}"
      data-api-url="{{ spec.async_call_url }}"
      data-app-label="{{ spec.admin_app_label }}"
      data-model-name="{{ spec.admin_model_name }}"
      data-parameter-name="{{ spec.parameter_name }}"
      data-facets="{{ spec.facets|yesno:'true,false' }}"
      data-all-value="{{ spec.all_value }}"
      data-multiple="{{ spec.multiple|yesno:'true,false' }}"
      data-multiple-separator="{{ spec.multiple_separator }}"
      {% block select_attrs %}{% endblock %}
    >
      {% block options %}
        {% for choice in choices %}
          {% if not spec.multiple or choice.key %}
            <option
              data-key="{{ choice.key }}"
              value="{% if spec.multiple %}{{ choice.key }}{% else %}{{ choice.query_string|iriencode }}{% endif %}"
              {% if choice.selected %}selected{% endif %}
            >
              {{ choice.display }}
            </option>
          {% endif %}
        {% endfor %}
      {% endblock options %}
    </select>
  </li>
</ul>
<script type="module" src="{% static 'admin_select_filter/js/admin_select2_filter.js' %}"></script>