{% if options %}
<div id="{{ select_id }}" class="filter-drop" x-data="filterDrop"
     @click.outside="close()"
     :class="{ open: open }"
     data-all-label="{{ all_label }}"
     data-noun="{{ noun }}">
  <button type="button" class="filter-trigger" @click.prevent="toggle()"
          aria-haspopup="listbox"
          :aria-expanded="open.toString()"><span class="filter-summary">{{ all_label }}</span></button>
  <div class="filter-menu" role="listbox" x-bind:hidden="!open">
    {% if options|length >= 2 %}
    <div class="filter-menu-tools">
      <button type="button" class="filter-select-all">select all</button>
      <span class="filter-pager" hidden data-page="1">
        <button type="button" class="filter-page-prev" aria-label="Previous page">‹</button>
        <span class="filter-page-status">1/1</span>
        <button type="button" class="filter-page-next" aria-label="Next page">›</button>
      </span>
    </div>
    {% endif %}
    {% if options|length >= searchable_after %}
    <input type="search" class="filter-search" placeholder="Search {{ noun }}…"
           aria-label="Search {{ noun }}" autocomplete="off">
    <p class="filter-empty">No matches</p>
    {% endif %}
    {% for value, text in options %}
    <label class="filter-option" data-search="{{ (value ~ ' ' ~ text)|lower }}">
      <input type="checkbox" class="filter-opt" value="{{ value }}"
             data-label="{{ text|shorten }}">
      <span title="{{ text }}">{{ text|shorten }}</span>
      <span class="filter-count"></span>
    </label>
    {% endfor %}
  </div>
</div>
{% endif %}