{# Vendored from opportunities/_filter_controls.html. Same two-row
   grammar, same ui-control / ui-filter-row / ui-btn-ghost classes,
   same autosubmit-on-change script. Only deltas:
     - form action → /failures
     - the per-column dropdowns swap "Issue / Workload / Suggestions /
       Partition-Cluster" for "Reason / Suggestions" (the only signals
       that exist on the failures table). #}
<form method="get" action="/failures" class="space-y-4">
  <div class="ui-filter-row">
    {# Inline width — see opportunities/_filter_controls.html for the
       rationale. The audit's CSS bundle is built out-of-band and
       doesn't ship ``w-[640px]``. Inline ``style`` bypasses it. #}
    <div class="relative" style="width: 640px;">
      <label for="exp-search-input" class="ui-form-label mb-1">Search</label>
      <input type="text"
        id="exp-search-input"
        name="search"
        value="{{ signals.search }}"
        placeholder="Search query body or destination…"
        aria-label="Search failures"
        class="ui-control" />
    </div>

    {# Reason + Suggestions share the Search row — the two filters most
       likely to be combined with the free-text search. Dataset / Author
       drop to the second row. #}
    <div class="min-w-[180px]">
      <label for="exp-reason-select" class="ui-form-label mb-1">Reason</label>
      <select id="exp-reason-select" name="reason" aria-label="Filter failures by error reason" class="ui-control">
        <option value="">All reasons</option>
        {# Visible label is the humanised reason; the ``value`` stays as
           the raw camelCase code so the filter still matches the
           ``error_result.reason`` column on the database verbatim.
           ``title`` shows the curated description on hover. #}
        {% for r in available_reasons %}
          <option value="{{ r }}" title="{{ r | bq_reason_description }}" {% if r == signals.reason %}selected{% endif %}>{{ r | bq_reason_humanize }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="min-w-[180px]">
      <label for="exp-suggestions-select" class="ui-form-label mb-1">Suggestions</label>
      <select id="exp-suggestions-select" name="suggestions" aria-label="Filter failures by suggestion availability" class="ui-control">
        <option value="">Any</option>
        <option value="with" {% if signals.suggestions == 'with' %}selected{% endif %}>With</option>
        <option value="without" {% if signals.suggestions == 'without' %}selected{% endif %}>Without</option>
      </select>
    </div>
  </div>

  <div class="ui-filter-row">
    <div class="min-w-[180px]">
      <label for="exp-dataset-select" class="ui-form-label mb-1">Dataset</label>
      <select id="exp-dataset-select" name="dataset" aria-label="Filter failures by dataset" class="ui-control">
        <option value="">All datasets</option>
        {% for dataset_name in available_datasets %}
          <option value="{{ dataset_name }}" {% if dataset_name == signals.dataset %}selected{% endif %}>{{ dataset_name }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="min-w-[180px]">
      <label for="exp-author-select" class="ui-form-label mb-1">Author</label>
      <select id="exp-author-select" name="author" aria-label="Filter failures by author (user_email)" class="ui-control">
        <option value="">All authors</option>
        {% for email in available_authors %}
          <option value="{{ email }}" {% if email == signals.author %}selected{% endif %}>{{ email }}</option>
        {% endfor %}
      </select>
    </div>

    <input type="hidden" name="sort" value="{{ signals.sort }}" />
    <input type="hidden" name="direction" value="{{ signals.direction }}" />

    <div class="audit-filter-actions">
      <a href="/failures" class="ui-btn-ghost cursor-pointer whitespace-nowrap" aria-label="Clear all filters">Clear filters</a>
    </div>
  </div>
</form>
<script>
  (function() {
    var form = document.currentScript.previousElementSibling;
    if (!form || form.dataset.auditAutosubmit === 'true') return;
    form.dataset.auditAutosubmit = 'true';
    form.querySelectorAll('select').forEach(function(select) {
      select.addEventListener('change', function() {
        form.requestSubmit();
      });
    });
  })();
</script>