{# P5-T03 cross-scan experiments index — terminal-brutalist re-skin.       #}
{# Filter bar (GET form, serializes to URL query params) + mono data       #}
{# table + pagination footer. Mirrors admin_scans.html's structure.        #}
{% extends "admin_layout.html" %}
{% from 'partials/help_tooltip.html' import tip, tip_styles %}

{% block page_title %}admin :: experiments{% endblock %}

{% block breadcrumb %}
  <a href="/admin/dashboard">admin</a><span class="sep">/</span>
  <span class="here">experiments</span>
{% endblock %}

{% macro outcome_pill(label, pill) -%}
  {%- if pill == 'ok' -%}
    <span class="t55-pill ok">{{ label }}</span>
  {%- elif pill == 'danger' -%}
    <span class="t55-pill danger">{{ label }}</span>
  {%- elif pill == 'warn' -%}
    <span class="t55-pill warn">{{ label }}</span>
  {%- else -%}
    <span class="t55-pill muted">{{ label }}</span>
  {%- endif -%}
{%- endmacro %}

{% block content %}
{{ tip_styles() }}
<div class="t55-eyebrow">experiments</div>
<h1 class="t55-h1">Re-run ledger. <span class="em">{{ total }} rows.</span></h1>
<p class="t55-lede">Every LlmExperiment fired from the LLM Explorer's re-run panel, across every scan and every admin. Filter by model, prompt, who fired it, or scan. Each row jumps to the step it was forked from.</p>

{# ===================== Filter bar ===================== #}
<form method="get" action="/admin/experiments" class="t55-filter-bar">
  <div class="t55-field">
    <label class="t55-label" for="filter-model">model</label>
    <select id="filter-model" name="model" class="t55-input" style="width: 200px;">
      <option value="">// any</option>
      {% for m in model_choices %}
        <option value="{{ m }}" {% if m == active_model %}selected{% endif %}>{{ m }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="t55-field">
    <label class="t55-label" for="filter-prompt">prompt</label>
    <select id="filter-prompt" name="prompt_name" class="t55-input" style="width: 180px;">
      <option value="">// any</option>
      {% for p in prompt_choices %}
        <option value="{{ p }}" {% if p == active_prompt_name %}selected{% endif %}>{{ p }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="t55-field">
    <label class="t55-label" for="filter-fired-by">fired by</label>
    <input id="filter-fired-by" type="text" name="fired_by" value="{{ active_fired_by }}" placeholder="admin@example.com" class="t55-input" style="width: 200px;">
  </div>
  <div class="t55-field">
    <label class="t55-label" for="filter-scan">scan id</label>
    <input id="filter-scan" type="text" name="scan_id" value="{{ active_scan_id }}" placeholder="scan UUID" class="t55-input" style="width: 180px;">
  </div>

  <div class="t55-btn-row" style="margin-left: auto;">
    <button type="submit" class="t55-btn primary">apply</button>
    <a href="/admin/experiments" class="t55-btn">reset</a>
  </div>
</form>

{# ===================== Data table ===================== #}
<section class="t55-card">
  <div class="t55-card-head">
    <span class="t55-card-title">results</span>
    <span class="t55-pill muted">{{ experiments|length }} of {{ total }}</span>
  </div>
  <div class="t55-table-wrap">
    {% if not experiments %}
      <div class="t55-empty">// No experiments found.</div>
    {% else %}
      <table class="t55-table">
        <thead>
          <tr>
            <th>when</th>
            <th>scan</th>
            <th>prompt</th>
            <th>model</th>
            <th class="t55-num">cost</th>
            <th>outcome</th>
            <th>fired by</th>
            <th class="t55-num">actions</th>
          </tr>
        </thead>
        <tbody>
          {% for row in experiments %}
            <tr>
              <td style="white-space: nowrap; color: var(--ink-2);">{{ row.created_at[:19].replace('T', ' ') if row.created_at else '—' }}</td>
              <td class="t55-mono-xs">
                {% if row.scan_id %}
                  <a href="/admin/sandbox/{{ row.id }}">{{ row.scan_id_short }}</a>
                {% else %}
                  <span style="color: var(--ink-4);">orphan</span>
                {% endif %}
              </td>
              <td>{{ row.prompt_name or '—' }}</td>
              <td class="t55-mono-xs">{{ row.model or '—' }}</td>
              <td class="t55-num">${{ '%.4f'|format(row.cost_usd) }}</td>
              <td>{{ outcome_pill(row.outcome_label, row.outcome_pill) }}</td>
              <td style="max-width: 14em; overflow: hidden; text-overflow: ellipsis;">{{ row.fired_by }}</td>
              <td class="t55-num">
                <a href="{{ row.detail_url }}" class="t55-btn">view &rarr;</a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </div>
</section>

{# ===================== Pagination footer ===================== #}
{% if experiments %}
  {% set start = offset + 1 %}
  {% set end = offset + experiments|length %}
  <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); margin-top: 4px;">
    <div>
      // showing
      <strong style="color: var(--ink);">{{ start }}</strong>–<strong style="color: var(--ink);">{{ end }}</strong>
      of <strong style="color: var(--ink);">{{ total }}</strong>
    </div>
    <div class="t55-btn-row">
      {% if has_prev %}
        <a href="?{% if filter_query %}{{ filter_query }}&{% endif %}offset={{ prev_offset }}" class="t55-btn">&larr; prev</a>
      {% else %}
        <span class="t55-btn" style="opacity: 0.4; cursor: not-allowed;">&larr; prev</span>
      {% endif %}
      {% if has_next %}
        <a href="?{% if filter_query %}{{ filter_query }}&{% endif %}offset={{ next_offset }}" class="t55-btn">next &rarr;</a>
      {% else %}
        <span class="t55-btn" style="opacity: 0.4; cursor: not-allowed;">next &rarr;</span>
      {% endif %}
    </div>
  </div>
{% endif %}
{% endblock %}