{% load i18n humanize static %}

<div class="d-grid">
  <button class="btn btn-light"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapseSorting"
          aria-expanded="true"
          aria-controls="collapseSorting">{% translate "Sorting" %}</button>
</div>
<div class="collapse show my-3" id="collapseSorting">
  <label id="sort-by" class="form-label" for="id_sort">{% translate "Sorting" %}</label>
  <select class="form-select" id="id_sort" name="sort">
    <option value='created'{% if query_params.sorting == "created" %} selected='selected'{% endif %}>
      {% translate "Created" %}
    </option>
    <option value='title'{% if query_params.sorting == "title" %} selected='selected'{% endif %}>
      {% translate "Title" %}
    </option>
    <option value='queue'{% if query_params.sorting == "queue" %} selected='selected'{% endif %}>
      {% translate "Queue" %}
    </option>
    <option value='status'{% if query_params.sorting == "status" %} selected='selected'{% endif %}>
      {% translate "Status" %}
    </option>
    <option value='priority'{% if query_params.sorting == "priority" %} selected='selected'{% endif %}>
      {% translate "Priority" %}
    </option>
    <option value='assigned_to'{% if query_params.sorting == "assigned_to" %} selected='selected'{% endif %}>
      {% translate "Owner" %}
    </option>
  </select>
  <div class="form-check mt-3">
    <label class="form-check-label" for="id_sortreverse">{% translate "Reverse?" %}</label>
    <input class="form-check-input"
           type="checkbox"
           name="sortreverse"
           id="id_sortreverse"
           {% if query_params.sortreverse %}
             checked='checked'{% endif %} />
  </div>
  <div class="form-text">{% translate "Ordering applied to tickets" %}</div>
</div>