{% extends "base.html" %}
{% block content %}
<section
  data-live-page="requests"
  data-api-url="/admin/api/requests"
  data-poll-interval="1000"
>
  <section class="page-heading">
    <div>
      <p class="eyebrow">OpenAI-compatible traffic</p>
      <h1>Request Browser</h1>
    </div>
    <div class="stats" data-live-request-stats>
      <span><strong>-</strong>Total</span>
      <span><strong>-</strong>Streams</span>
      <span><strong>-</strong>Images</span>
      <span><strong>-</strong>Tools</span>
    </div>
  </section>

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

  <section class="run-control" data-live-run-control data-run-notes="false">
    <div>
      <p class="eyebrow">Run status</p>
      <h2>Loading</h2>
      <p class="muted">Checking active run...</p>
    </div>
  </section>

  <section class="mobile-filter-bar">
    <span>Search and filters</span>
    <button class="button ghost compact-button" type="button" data-mobile-filter-toggle>Filters</button>
  </section>

  <form class="toolbar request-filter-toolbar" data-live-request-filters>
    <label>
      Endpoint
      <input name="endpoint" list="endpoints" placeholder="/v1/chat/completions">
    </label>
    <label>
      Model
      <select name="model">
        <option value="">Any model</option>
      </select>
    </label>
    <label>
      Provider
      <select name="provider">
        <option value="">Any provider</option>
      </select>
    </label>
    <label>
      Route
      <select name="route">
        <option value="">Any route</option>
      </select>
    </label>
    <label>
      Run
      <select name="run">
        <option value="">Any run</option>
      </select>
    </label>
    <label>
      Status
      <input name="status" inputmode="numeric" placeholder="200">
    </label>
    <label class="check"><input type="checkbox" name="stream" value="1"> Streaming</label>
    <label class="check"><input type="checkbox" name="tool" value="1"> Tools</label>
    <label class="check"><input type="checkbox" name="image" value="1"> Images</label>
    <label class="check"><input type="checkbox" name="error" value="1"> Errors</label>
    <label class="check"><input type="checkbox" name="slow" value="1"> Slow &gt;10s</label>
    <label class="check"><input type="checkbox" name="large" value="1"> Large &gt;10k tok</label>
    <button class="button primary" type="submit">Filter</button>
    <a class="button ghost" href="/admin" data-live-reset>Reset</a>
    <datalist id="endpoints"></datalist>
  </form>

  <section class="request-browser-layout">
    <section class="table-shell" data-live-requests-table data-show-run="true">
      <div class="empty-state">Loading captured requests...</div>
    </section>
    <aside class="request-inspector" data-live-request-inspector aria-label="Selected request">
      <div class="empty-state">Select a request to inspect it.</div>
    </aside>
  </section>
</section>
{% endblock %}