{% extends 'eval/base.html' %}
{% block title %}Experiment Runs | Eval Admin{% endblock %}

{% block action_bar %}
<span class="font-semibold">Experiment Runs</span>
{% endblock %}

{% block content %}
<div x-data="experimentRunsPageData()" x-init="applyFilters(); $watch('filters', () => applyFilters(), { deep: true })">
  <script id="experiment-runs-data" type="application/json">
  {"apiFilteredRunsUrl": "{% url 'Eval:api_filtered_experiment_runs' %}", "apiExportUrl": "{% url 'Eval:export_experiment_runs' %}", "tableLimit": {{ table_limit|default:20 }}}
  </script>

  <!-- Filter bar -->
  <div class="bg-muted/50 border-y border-border mb-6">
    <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">Date</span>
        <select class="h-9 px-3 rounded-md border border-input bg-background text-sm"
                x-model="filters.dateRange">
          <option value="">All time</option>
          <option value="1w">Last week</option>
          <option value="1m">Last month</option>
          <option value="6m">Last 6 months</option>
        </select>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-[11px] font-medium text-muted-foreground shrink-0">Status</span>
        <select class="h-9 px-3 rounded-md border border-input bg-background text-sm"
                x-model="filters.status">
          <option value="">All</option>
          <option value="pending">Pending</option>
          <option value="running">Running</option>
          <option value="complete">Complete</option>
          <option value="failed">Failed</option>
        </select>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-[11px] font-medium text-muted-foreground shrink-0">Mode</span>
        <select class="h-9 px-3 rounded-md border border-input bg-background text-sm"
                x-model="filters.runMode">
          <option value="">All</option>
          <option value="full">Full</option>
          <option value="isolated">Isolated</option>
        </select>
      </div>
      <button class="h-9 px-3 rounded-md border border-input bg-background text-sm text-muted-foreground hover:bg-muted/50"
              @click="filters.dateRange = ''; filters.status = ''; filters.runMode = ''">
        Reset
      </button>
    </div>
  </div>

  {% include "eval/components/_run_table.html" with title="All experiment runs" columns=table_columns show_actions=True actions=table_actions export_url=export_url export_formats="csv" selectable=True bulk_delete_fn="bulkDeleteRuns" %}
</div>

{% load static %}
<script src="{% static 'eval/js/eval-experiment-runs.js' %}"></script>
{% endblock %}