{# /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 640px via inline style. The input itself has ``ui-control``
       → ``width: 100%`` so the wrapper width is what bounds the
       rendered input. We use inline ``style`` rather than a Tailwind
       arbitrary class (``w-[640px]``) because the audit's compiled
       CSS bundle is generated out-of-band — only a fixed set of
       ``w-[NNNpx]`` widths are baked in, and 640 isn't one of them.
       Inline style sidesteps the build pipeline entirely. Widened from
       the previous 320px so the search bar carries more visual weight
       as the primary filter on the page. #}
    <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 models or tables…"
        aria-label="Search opportunities"
        class="ui-control" />
    </div>

    {# Top row carries Search + every table-column filter EXCEPT Dataset
       and Author. The flex container wraps gracefully on narrow
       viewports, so on wide screens everything sits inline; on
       narrower screens the per-column controls flow under the search. #}
    <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>

    {# Spec 148 — partition / cluster recommendation availability.
       Same Any / With / Without grammar as the Suggestions filter. #}
    <div class="min-w-[180px]">
      <label for="exp-layout-select" class="ui-form-label mb-1">Partition / Cluster</label>
      <select id="exp-layout-select" name="layout" aria-label="Filter opportunities by partition or cluster recommendation availability" class="ui-control">
        <option value="">Any</option>
        <option value="with" {% if signals.layout == 'with' %}selected{% endif %}>With</option>
        <option value="without" {% if signals.layout == 'without' %}selected{% endif %}>Without</option>
      </select>
    </div>
  </div>

  {# Second-row filters: Dataset + Author (the noisiest, least-frequently
     toggled dropdowns). #}
  <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>

    {# 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>