{% if tickets %}
<div class="filter-panel">
  <div class="ticket-search">
    <input type="search" id="ticket-search" placeholder="Search tickets…"
           autocomplete="off" spellcheck="false" aria-label="Search tickets">
  </div>
  {% if board_controls or status or kinds or sort_block %}
  <div class="filter-groups">
    <div class="filter-group filter-group-board" data-filter-group="board">
      <span class="filter-group-title">Board</span>
      {% if board_controls %}<div class="filters">{{ board_controls|safe }}</div>{% endif %}
      {{ status|safe }}
      {{ kinds|safe }}
      {{ sort_block|safe }}
    </div>
    {% if scm_controls %}
    <div class="filter-group filter-group-scm" data-filter-group="scm">
      <span class="filter-group-title">Source control</span>
      <div class="filters">{{ scm_controls|safe }}</div>
    </div>
    {% endif %}
  </div>
  {% endif %}
  <span class="filter-actions">
    <button type="button" id="select-matching" class="filter-action" hidden
            title="Select every ticket matching the current filters (all pages)">
      select all matched</button>
    <button type="button" id="hide-matching" class="filter-action" hidden
            title="Hide every ticket matching the current filters">hide matching</button>
    <button type="button" id="clear-filters" class="filter-action" hidden>clear</button>
    <button type="button" id="save-filters" class="filter-action" hidden
            title="Save current search, filters, and sort as a named preset">
      save as</button>
  </span>
</div>
{% endif %}