{# Vendored from packages/web/src/governor_web/templates/opportunities/_filter_controls.html.
   Audit doesn't use datastar / SSE — the form posts back to /opportunities
   via plain GET so each control round-trips through the URL. The same
   visual layout (search, status, smart-view, project, type, clear-button)
   is preserved. #}
<form method="get" action="/opportunities" class="space-y-4">
  <div class="ui-filter-row">
    <div class="relative flex-1 min-w-[240px]">
      <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 opportunities, models, or tables..."
        aria-label="Search opportunities"
        class="ui-control" />
    </div>

    <div class="min-w-[180px]">
      <label for="exp-status-select" class="ui-form-label mb-1">Status</label>
      <select id="exp-status-select" name="status" aria-label="Filter opportunities by status" class="ui-control">
        <option value="all" {% if signals.status == 'all' %}selected{% endif %}>All</option>
        <option value="active" {% if signals.status == 'active' %}selected{% endif %}>Active</option>
        <option value="resolved" {% if signals.status == 'resolved' %}selected{% endif %}>Resolved</option>
      </select>
    </div>

    <div class="min-w-[220px]">
      <label for="exp-view-select" class="ui-form-label mb-1">Smart View</label>
      <select id="exp-view-select" name="view" aria-label="Filter opportunities by smart view" class="ui-control">
        <option value="" {% if not signals.smart_view %}selected{% endif %}>All views</option>
        <option value="quick-wins" {% if signals.smart_view == 'quick-wins' %}selected{% endif %}>Quick Wins</option>
        <option value="chronic" {% if signals.smart_view == 'chronic' %}selected{% endif %}>Chronic Issues</option>
        <option value="unaddressed" {% if signals.smart_view == 'unaddressed' %}selected{% endif %}>Unaddressed</option>
      </select>
    </div>
  </div>

  <div class="ui-filter-row">
    <div class="min-w-[180px]">
      <label for="exp-projects-select" class="ui-form-label mb-1">Project</label>
      <select id="exp-projects-select" name="projects" aria-label="Filter opportunities by project" class="ui-control">
        <option value="">All projects</option>
        {% for proj_id, proj_name in available_projects %}
          <option value="{{ proj_id }}" {% if proj_id == signals.projects %}selected{% endif %}>{{ proj_name }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="min-w-[180px]">
      <label for="exp-types-select" class="ui-form-label mb-1">Type</label>
      <select id="exp-types-select" name="types" aria-label="Filter opportunities by type" class="ui-control">
        <option value="">All types</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>

    {# 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="ml-auto flex items-end gap-2">
      <button type="submit" class="ui-btn-primary cursor-pointer whitespace-nowrap">Apply</button>
      <a href="/opportunities" class="ui-btn-ghost cursor-pointer whitespace-nowrap" aria-label="Clear all filters">Clear filters</a>
    </div>
  </div>
</form>