{% comment %}
Reusable run filters component.
Expects parent Alpine scope: filters (selectedTags, tagsOpen, dateRange, promptType)
{% 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">
    <!-- Tags — compact control: "N selected ▼" or "+ filter by tag..."; picker opens on click -->
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Tags</span>
      <div class="relative">
        <button type="button" @click="filters.tagsOpen = !filters.tagsOpen"
                class="h-9 min-w-[140px] max-w-[180px] px-3 rounded-md border border-input bg-background text-sm text-left hover:bg-muted/50 flex items-center justify-between gap-2">
          <span class="truncate" :class="filters.selectedTags.length ? 'text-foreground' : 'text-muted-foreground'"
                x-text="filters.selectedTags.length ? filters.selectedTags.length + ' selected' : '+ filter by tag'"></span>
          <span class="text-muted-foreground shrink-0">▼</span>
        </button>
        <div x-show="filters.tagsOpen" @click.outside="filters.tagsOpen = false" x-cloak x-transition
             class="absolute left-0 top-full mt-1 min-w-[200px] rounded-md border border-border bg-card py-1 shadow-lg z-10">
          <!-- Selected tags with ✕ to remove -->
          <template x-if="filters.selectedTags.length > 0">
            <div class="px-2 py-1.5 border-b border-border space-y-1">
              <template x-for="tag in filters.selectedTags" :key="tag">
                <div class="flex items-center justify-between gap-2 group">
                  <span class="text-sm truncate" x-text="tag"></span>
                  <button type="button" @click="filters.selectedTags = filters.selectedTags.filter(t => t !== tag)"
                          class="text-muted-foreground hover:text-destructive shrink-0" aria-label="Remove tag">✕</button>
                </div>
              </template>
            </div>
          </template>
          <!-- Available tags to add -->
          <div class="py-1">
            <template x-for="tag in filterTags.filter(t => !filters.selectedTags.includes(t))" :key="tag">
              <button type="button" @click="filters.selectedTags = [...filters.selectedTags, tag]" class="block w-full px-3 py-1.5 text-sm text-left hover:bg-muted" x-text="tag"></button>
            </template>
            <p class="px-3 py-1.5 text-xs text-muted-foreground" x-show="filters.selectedTags.length === 3">All tags selected</p>
          </div>
        </div>
      </div>
    </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>
    <!-- Group by -->
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Group by</span>
      <select x-model="filters.groupBy" class="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm w-[120px]">
        {% for g in filter_group_by_options %}
        <option value="{{ g.value }}">{{ g.label }}</option>
        {% endfor %}
      </select>
    </div>
    <!-- Reset (no label) -->
    <a href="#" @click.prevent="filters.promptType = ''; filters.selectedTags = []; filters.dateRange = '1w'; filters.groupBy = 'auto'; filters.tagsOpen = false; filters.judgeScoreMin = ''; filters.judgeScoreMax = ''; if (typeof resetThresholds === 'function') resetThresholds()" class="text-sm text-muted-foreground hover:text-destructive hover:underline" x-text="(typeof hasFilterChanges === 'function' ? hasFilterChanges() : (filters.promptType || filters.selectedTags.length || filters.dateRange !== '1w' || filters.groupBy !== 'auto' || filters.judgeScoreMin || filters.judgeScoreMax)) ? 'Reset all' : 'Reset'">Reset</a>
  </div>
  <!-- Row 2: Judge score + Input Tokens + Output Tokens -->
  {% if filter_token_options %}
  <div class="flex flex-wrap items-center gap-3 py-3 px-4 border-t border-border">
    <!-- Judge Score -->
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Judge Score (%)</span>
      <div class="flex items-center gap-1.5">
        <input type="number" x-model.number="filters.judgeScoreMin" min="0" max="100" step="1" placeholder="Min" class="h-9 w-16 rounded-md border border-input bg-background px-2 py-1 text-sm text-center" />
        <span class="text-muted-foreground text-xs">–</span>
        <input type="number" x-model.number="filters.judgeScoreMax" min="0" max="100" step="1" placeholder="Max" class="h-9 w-16 rounded-md border border-input bg-background px-2 py-1 text-sm text-center" />
      </div>
    </div>
    <!-- Input Tokens -->
    {% for opt in filter_token_options %}
    {% if opt.key == 'tokens' %}
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">{{ opt.label }}</span>
      <div class="flex items-center gap-2 min-w-[160px]">
        <input type="range" x-model.number="filters.thresholdTokens" min="{{ opt.min_threshold }}" max="{{ opt.max_threshold }}" step="100" class="flex-1 h-2 accent-primary" />
        <span class="text-xs text-muted-foreground w-14 shrink-0" x-text="filters.thresholdTokens != null ? Number(filters.thresholdTokens).toLocaleString() : '—'"></span>
      </div>
    </div>
    {% endif %}
    {% if opt.key == 'output_tokens' %}
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">{{ opt.label }}</span>
      <div class="flex items-center gap-2 min-w-[160px]">
        <input type="range" x-model.number="filters.thresholdOutputTokens" min="{{ opt.min_threshold }}" max="{{ opt.max_threshold }}" step="20" class="flex-1 h-2 accent-primary" />
        <span class="text-xs text-muted-foreground w-14 shrink-0" x-text="filters.thresholdOutputTokens != null ? Number(filters.thresholdOutputTokens).toLocaleString() : '—'"></span>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
  {% endif %}
  <!-- Row 3: Total Cost + Cost/in tok + Cost/out tok -->
  {% if filter_cost_options %}
  <div class="flex flex-wrap items-center gap-3 py-3 px-4 border-t border-border">
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Total Cost</span>
      <div class="flex items-center gap-2 min-w-[140px]">
        <input type="range" x-model.number="filters.thresholdTotalCost" min="0" max="0.05" step="0.001" class="flex-1 h-2 accent-primary" />
        <span class="text-xs text-muted-foreground w-14 shrink-0" x-text="filters.thresholdTotalCost != null ? '$' + Number(filters.thresholdTotalCost).toFixed(4) : '—'"></span>
      </div>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Cost/in tok</span>
      <div class="flex items-center gap-2 min-w-[140px]">
        <input type="range" x-model.number="filters.thresholdCostInput" min="0" max="0.03" step="0.001" class="flex-1 h-2 accent-primary" />
        <span class="text-xs text-muted-foreground w-14 shrink-0" x-text="filters.thresholdCostInput != null ? '$' + Number(filters.thresholdCostInput).toFixed(4) : '—'"></span>
      </div>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-medium text-muted-foreground shrink-0">Cost/out tok</span>
      <div class="flex items-center gap-2 min-w-[140px]">
        <input type="range" x-model.number="filters.thresholdCostOutput" min="0" max="0.02" step="0.001" class="flex-1 h-2 accent-primary" />
        <span class="text-xs text-muted-foreground w-14 shrink-0" x-text="filters.thresholdCostOutput != null ? '$' + Number(filters.thresholdCostOutput).toFixed(4) : '—'"></span>
      </div>
    </div>
  </div>
  {% endif %}
</div>