{# /opportunities filter controls. Two rows:
   - Row 1: narrow Search input only.
   - Row 2: Per-column filters in TABLE-COLUMN ORDER —
     Dataset → Author → Issue → Workload → Suggestions. Matches the
     header sequence in _table.html so users find each filter where
     they expect.

   Audit-specific simplifications vs the cloud filter set:
   - No Status: audit is read-only; every row is ``active``.
   - No Smart View: severity buckets aren't well-calibrated in audit
     and there's no resolved state. Quick Wins / Chronic / Unaddressed
     don't add signal.
   - Workload is binary (Build / Consumption) — no Unclassified.
   - Suggestions is binary (With / Without) — no With-diff / None
     subdivisions. #}
<form method="get" action="/opportunities" class="space-y-4">
  <div class="ui-filter-row">
    {# Fixed 320px. The input itself has ``ui-control`` → ``width:
       100%`` so the wrapper width is what bounds the rendered
       input — ``w-full max-w-…`` was letting it stretch to the row
       container. #}
    <div class="relative w-[320px]">
      <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 models or tables…"
        aria-label="Search opportunities"
        class="ui-control" />
    </div>
  </div>

  {# Per-column filters, in the same order they appear in the table:
     Dataset → Author → Issue → Workload → Suggestions. #}
  <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 opportunities 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 opportunities 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>

    <div class="min-w-[180px]">
      <label for="exp-types-select" class="ui-form-label mb-1">Issue</label>
      <select id="exp-types-select" name="types" aria-label="Filter opportunities by issue type" class="ui-control">
        <option value="">All issues</option>
        {% for type_name in available_types %}
          <option value="{{ type_name }}" {% if type_name == signals.types %}selected{% endif %}>{{ type_name.replace('_', ' ') }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="min-w-[180px]">
      <label for="exp-workload-select" class="ui-form-label mb-1">Workload</label>
      <select id="exp-workload-select" name="workload" aria-label="Filter opportunities by workload" class="ui-control">
        <option value="">All workloads</option>
        <option value="build" {% if signals.workload == 'build' %}selected{% endif %}>Build</option>
        <option value="consumption" {% if signals.workload == 'consumption' %}selected{% endif %}>Consumption</option>
      </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 opportunities 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>

    {# Sort + direction are submitted as hidden fields so the column
       headers' anchors (which round-trip through ?sort=&direction=)
       don't get clobbered when the user changes a filter. #}
    <input type="hidden" name="sort" value="{{ signals.sort }}" />
    <input type="hidden" name="direction" value="{{ signals.direction }}" />

    <div class="audit-filter-actions">
      <a href="/opportunities" 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>