{% comment %}
Reusable trace table filters component.
Uses Alpine.js for filter state. Parent can optionally bind to traceFilters when wired to API.
{% endcomment %}
<div class="bg-muted/50 border-y border-border mb-6" x-data="{ search: '', tag: '', source: '', date: '7d' }">
  <div class="flex flex-wrap items-center gap-3 py-3 px-4">
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Search</span>
      <input type="search" x-model="search" placeholder="Search by name" class="h-9 w-[200px] rounded-md border border-input bg-background px-3 py-1 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Tag</span>
      <select x-model="tag" class="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm w-[140px]">
        <option value="">All</option>
        {% for t in filter_tags %}
        <option value="{{ t }}">{{ t }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Source</span>
      <select x-model="source" class="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm w-[140px]">
        <option value="">All</option>
        {% for s in filter_sources %}
        <option value="{{ s.value }}">{{ s.label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Date</span>
      <select x-model="date" class="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm w-[140px]">
        {% for d in filter_date_options %}
        <option value="{{ d.value }}">{{ d.label }}</option>
        {% endfor %}
      </select>
    </div>
    <a href="#" @click.prevent="search = ''; tag = ''; source = ''; date = '7d'" class="text-sm text-muted-foreground hover:text-destructive hover:underline"">Reset</a>
  </div>
</div>