{% comment %}
Gold set filters component.
Expects parent Alpine scope: filters (name, dateRange)
Expects filter_date_range_options in template context.
{% endcomment %}
<div class="bg-muted/50 border-y border-border mb-6">
  <div class="flex flex-wrap items-center gap-3 py-3 px-4">
    <!-- Name -->
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Name</span>
      <input type="text"
             x-model="filters.name"
             placeholder="Search by name…"
             class="h-9 min-w-[180px] rounded-md border border-input bg-background px-3 py-1 text-sm" />
    </div>
    <!-- Date Range -->
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Date Range</span>
      <select x-model="filters.dateRange" class="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm w-[140px]">
        {% for d in filter_date_range_options %}
        <option value="{{ d.value }}">{{ d.label }}</option>
        {% endfor %}
      </select>
    </div>
    <!-- Reset -->
    <a href="#"
       @click.prevent="filters.name = ''; filters.dateRange = 'all'"
       class="text-sm text-muted-foreground hover:text-destructive hover:underline"
       x-text="(typeof hasFilterChanges === 'function' ? hasFilterChanges() : (filters.name || filters.dateRange !== 'all')) ? 'Reset all' : 'Reset'">Reset</a>
  </div>
</div>