{% extends "base.html" %}
{% block content %}
<section
  data-live-page="run-detail"
  data-api-url="/admin/api/runs/{{ run_id }}"
  data-run-id="{{ run_id }}"
  data-poll-interval="1000"
>
  <section class="run-summary-header" data-live-run-detail-header>
    <div class="run-summary-topline">
      <div class="run-summary-title">
        <p class="eyebrow">Loading run</p>
        <h1>Run #{{ run_id }}</h1>
      </div>
      <div class="run-summary-side">
        <div class="detail-meta">
          <span>Status <strong>loading</strong></span>
        </div>
      </div>
    </div>
    <div class="run-stat-strip" data-live-run-stat-strip>
      <span><small>Requests</small><strong>-</strong></span>
      <span><small>LLM wall time</small><strong>-</strong></span>
      <span><small>Run open</small><strong>-</strong></span>
      <span><small>Request duration</small><strong>-</strong></span>
      <span><small>Input tokens</small><strong>-</strong></span>
      <span><small>Output tokens</small><strong>-</strong></span>
      <span><small>Total tokens</small><strong>-</strong></span>
      <span><small>Estimated cost</small><strong>-</strong></span>
      <span><small>Output tok/s</small><strong>-</strong></span>
    </div>
  </section>

  <div class="live-status" data-live-status aria-live="polite">Loading run...</div>

  <nav class="run-tabs" data-run-tabs aria-label="Run detail tabs">
    <button class="active" type="button" data-run-tab="overview">Overview</button>
    <button type="button" data-run-tab="traffic">Traffic</button>
    <button type="button" data-run-tab="cost">Cost what-if</button>
    <button type="button" data-run-tab="models">Models</button>
    <button type="button" data-run-tab="diagnostics">Diagnostics</button>
  </nav>

  <section class="run-tab-panel active" data-run-tab-panel="overview">
    <div class="run-overview-grid" data-live-run-overview>
      <div class="empty-state">Loading run overview...</div>
    </div>
    <section class="panel recent-traffic-panel">
      <header>
        <h2>Recent traffic</h2>
        <button class="button ghost compact-button" type="button" data-run-tab-jump="traffic">View all</button>
      </header>
      <div class="table-shell compact-traffic" data-live-recent-traffic data-show-run="false">
        <div class="empty-state">Loading recent traffic...</div>
      </div>
    </section>
  </section>

  <section class="run-tab-panel" data-run-tab-panel="traffic" hidden>
    <section class="page-heading compact-heading">
      <div>
        <p class="eyebrow">Requests</p>
        <h2>Run traffic</h2>
      </div>
      <a class="button ghost" href="/admin?run={{ run_id }}">Open in browser</a>
    </section>
    <section class="table-shell" data-live-requests-table data-show-run="false">
      <div class="empty-state">Loading run traffic...</div>
    </section>
  </section>

  <section class="run-tab-panel" data-run-tab-panel="cost" hidden>
    <section class="panel what-if-panel" data-what-if-panel data-api-url="{{ what_if_api_url }}">
      <header>
        <h2>What-if cost</h2>
        <span data-what-if-count>Loading</span>
      </header>
      <form class="what-if-form" data-what-if-form>
        <label class="what-if-picker">
          <span>Compare model</span>
          <input
            data-what-if-input
            list="what-if-model-options"
            name="what_if_model"
            autocomplete="off"
            placeholder="Search models or providers"
          >
        </label>
        <datalist id="what-if-model-options" data-what-if-options></datalist>
        <button class="button primary compact-button" type="submit">Compare</button>
      </form>
      <p class="muted what-if-hint">Models/providers like OpenAI, Anthropic, Gemini, Qwen</p>
      <p class="muted what-if-message" data-what-if-message hidden></p>
      <div class="table-shell compact-table">
        <table class="model-routes-table what-if-table">
          <thead>
            <tr>
              <th>Scenario</th>
              <th>Input Tokens</th>
              <th>Cached Input</th>
              <th>Output Tokens</th>
              <th>Input / 1M</th>
              <th>Cached / 1M</th>
              <th>Output / 1M</th>
              <th>Input Cost</th>
              <th>Output Cost</th>
              <th>Total Cost</th>
              <th>Included</th>
              <th>Missing Usage</th>
            </tr>
          </thead>
          <tbody data-what-if-scenarios>
            <tr>
              <td class="empty" colspan="12">Loading comparisons...</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </section>

  <section class="run-tab-panel" data-run-tab-panel="models" hidden>
    <div data-live-run-models></div>
  </section>

  <section class="run-tab-panel" data-run-tab-panel="diagnostics" hidden>
    <div data-live-run-diagnostics></div>
  </section>
</section>
{% endblock %}