{# T36.2 — sandbox experiments list under the T28 admin layout.            #}
{# Data table mirrors ``admin_scans.html`` styling: white card +           #}
{# divide-y rows, status chips, right-aligned numeric columns.             #}
{% extends "admin_layout.html" %}

{% block page_title %}Sandbox experiments{% endblock %}

{% block breadcrumb %}
  <span class="text-gray-500">Admin /</span>
  <span class="font-medium text-gray-900">Experiments</span>
{% endblock %}

{% block content %}
<div class="space-y-4">

  {# ===================== Cap card ===================== #}
  {% set over_cap = today_usd >= cap_usd %}
  <section class="bg-white border {% if over_cap %}border-red-300{% else %}border-gray-200{% endif %} rounded-lg shadow-sm p-4 inline-block">
    <div class="text-xs font-medium text-gray-500 uppercase tracking-wide">Today's spend (UTC)</div>
    <div class="mt-1 text-2xl font-bold {% if over_cap %}text-red-700{% else %}text-gray-900{% endif %} tabular-nums">
      ${{ '%.4f'|format(today_usd) }}
      <span class="text-sm font-normal text-gray-500">/ ${{ '%.2f'|format(cap_usd) }}</span>
    </div>
  </section>

  {# ===================== Empty state ===================== #}
  {% if not experiments %}
    <section class="bg-white border border-gray-200 rounded-lg shadow-sm px-6 py-10 text-center">
      <p class="text-sm text-gray-600">
        No experiments yet. Start from an LLM call's debug page or
        <a class="text-blue-600 hover:underline" href="/admin/sandbox/from-call/no-source">a from-scratch editor</a>.
      </p>
    </section>
  {% else %}
    {# ===================== Data table ===================== #}
    <section class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
          <thead class="bg-gray-50">
            <tr>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">When</th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Prompt</th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Model</th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Status</th>
              <th class="text-right font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Cost</th>
              <th class="text-right font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">In / Out</th>
              <th class="text-right font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Latency</th>
              <th class="text-left font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Source</th>
              <th class="text-right font-medium text-gray-500 uppercase tracking-wide text-xs py-2 px-4">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for exp in experiments %}
              <tr class="even:bg-gray-50 hover:bg-blue-50">
                <td class="py-2 px-4 text-gray-700 whitespace-nowrap">{{ exp.created_at }}</td>
                <td class="py-2 px-4 font-mono text-xs text-gray-700">{{ exp.prompt_name }}</td>
                <td class="py-2 px-4 font-mono text-xs text-gray-700">{{ exp.model }}</td>
                <td class="py-2 px-4">
                  {% if exp.ok %}
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">ok</span>
                  {% else %}
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">fail</span>
                  {% endif %}
                </td>
                <td class="py-2 px-4 text-right text-gray-900 tabular-nums">${{ '%.4f'|format(exp.cost_usd) }}</td>
                <td class="py-2 px-4 text-right text-gray-700 tabular-nums">{{ exp.tokens_in }} / {{ exp.tokens_out }}</td>
                <td class="py-2 px-4 text-right text-gray-700 tabular-nums">{{ exp.latency_ms }}ms</td>
                <td class="py-2 px-4">
                  {% if exp.source_llm_call_id %}
                    <code class="font-mono text-xs text-gray-700">{{ exp.source_llm_call_id[:8] }}&hellip;</code>
                  {% else %}
                    <span class="text-xs text-gray-400 italic">(from scratch)</span>
                  {% endif %}
                </td>
                <td class="py-2 px-4 text-right">
                  <a href="/admin/sandbox/{{ exp.id }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">View diff &rarr;</a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    {# ===================== Pagination footer ===================== #}
    <div class="flex items-center justify-between text-sm text-gray-600">
      <div>
        Showing <span class="font-medium text-gray-900">{{ offset + 1 }}</span>&ndash;<span class="font-medium text-gray-900">{{ offset + experiments|length }}</span> of <span class="font-medium text-gray-900">{{ total }}</span>
      </div>
      <div class="flex items-center gap-2">
        {% if has_prev %}
          <a href="/admin/sandbox/list?offset={{ prev_offset }}" class="px-3 py-1.5 border border-gray-200 rounded hover:bg-gray-100">&larr; Prev</a>
        {% else %}
          <span class="px-3 py-1.5 border border-gray-200 rounded text-gray-300 cursor-not-allowed">&larr; Prev</span>
        {% endif %}
        {% if has_next %}
          <a href="/admin/sandbox/list?offset={{ next_offset }}" class="px-3 py-1.5 border border-gray-200 rounded hover:bg-gray-100">Next &rarr;</a>
        {% else %}
          <span class="px-3 py-1.5 border border-gray-200 rounded text-gray-300 cursor-not-allowed">Next &rarr;</span>
        {% endif %}
      </div>
    </div>
  {% endif %}

  <div class="text-sm text-gray-500 flex flex-wrap items-center gap-3">
    <a class="text-blue-600 hover:underline" href="/admin/dashboard">Admin dashboard</a>
    <span class="text-gray-300">&middot;</span>
    <a class="text-blue-600 hover:underline" href="/dashboard">User dashboard</a>
  </div>

</div>
{% endblock %}