{% load crispy_forms_field i18n icons %}

<div class="input-group flex-nowrap search-group query-field" role="group">
  <div class="input-group-btn">
    <button type="button"
            id="query-dropdown"
            class="btn btn-outline-primary dropdown-toggle search-field"
            data-field=""
            data-bs-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false">
      <span class="search-label">{% translate "Filters" %}</span>
    </button>
    <ul class="dropdown-menu shadow">
      {% for _, name, query in custom_filter_list %}
        <li>
          <a class="dropdown-item"
             href="#"
             data-field="{{ query }}"><span class="title">{{ name }}</span> • <code>{{ query }}</code></a>
        </li>
      {% endfor %}
    </ul>
  </div>
  <!-- /btn-group -->
  {% crispy_field field 'aria-label' _('Query') 'class' 'form-control' %}
  {% if can_refresh_search %}
    <button type="submit"
            name="refresh"
            value="1"
            class="btn btn-outline-primary"
            title="{% translate 'Refresh results' %}"
            aria-label="{% translate 'Refresh results' %}"
            aria-describedby="search-cache-help">{% icon "refresh.svg" %}</button>
  {% endif %}
</div>
{% include "bootstrap5/layout/help_text_and_errors.html" %}