{% load i18n %}
{% load translations %}
{% load icons %}
{% load crispy_forms_field %}
        <div class="input-group search-group query-field" role="group" >
          <div class="input-group-btn">
            <button type="button" id="query-dropdown" class="btn btn-default dropdown-toggle search-field" data-field="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {% if filter_name and filter_name != search_query.strip %}
              <span class="search-label">{{ filter_name }}</span>
              {% else %}
              <span class="search-label">{% trans "Custom Search" %}</span>
              {% endif %}
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              {% for _, name, query in custom_filter_list %}
              <li><a href="#" data-field="{{ query }}">{{ name }}</a></li>
              {% endfor %}
            </ul>
          </div><!-- /btn-group -->
          {% crispy_field field 'aria-label' _('Query') %}
        </div>
      <div class="btn-group search-group sort-field" role="group">
          <div class="btn-group" role="group">
            <button type="button" id="query-sort-dropdown" class="btn btn-default dropdown-toggle search-field" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {% if sort_name %}
              <span class="search-label">{{ sort_name }}</span>
              {% else %}
              <span class="search-label">{% trans "Sort By" %}</span>
              {% endif %}
              <span class="caret"></span>
            </button>
            <input type="hidden" id="id_sort_by" name="sort_by" value="{{ sort_query|default:'-priority,position' }}" aria-label="{% trans "Sort By" %}" />
            <ul class="dropdown-menu">
              <li><a href="#" data-sort="-priority,position">{% trans "Position and priority" %}</a></li>
              <li><a href="#" data-sort="position">{% trans "Position" %}</a></li>
              <li><a href="#" data-sort="priority">{% trans "Priority" %}</a></li>
              <li><a href="#" data-sort="labels">{% trans "Labels" %}</a></li>
              <li><a href="#" data-sort="timestamp">{% trans "Age of string" %}</a></li>
              <li><a href="#" data-sort="num_words">{% trans "Number of words" %}</a></li>
              <li><a href="#" data-sort="num_failing_checks">{% trans "Number of failing checks" %}</a></li>
              <li><a href="#" data-sort="num_comments">{% trans "Number of comments" %}</a></li>
              <li><a href="#" data-sort="context">{% trans "Key" context "Translation key" %}</a></li>
            </ul>
          </div>
          <div class="btn-group" role="group">
            <button type="button" id="query-sort-toggle" class="btn btn-default search-field">
              <span class="search-label asc active">
                {% icon "sort-ascending.svg" %}
              </span>
              <span class="search-label desc">{% icon "sort-descending.svg" %}</span>
            </button>
          </div>
       </div>
