{% extends "base.html" %}
{% block content %}
<section
  data-live-page="request-detail"
  data-api-url="/admin/api/requests/{{ record_id }}"
  data-record-id="{{ record_id }}"
  data-render-mode="{{ mode }}"
  data-poll-interval="1000"
>
  <section class="page-heading" data-live-request-detail-header>
    <div>
      <p class="eyebrow">Loading request</p>
      <h1>Request #{{ record_id }}</h1>
    </div>
    <div class="detail-meta">
      <span>Status <strong>loading</strong></span>
    </div>
  </section>

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

  <section class="split">
    <article class="panel">
      <header>
        <h2>Request</h2>
        <span data-live-request-content-type>body</span>
      </header>
      <pre class="code" data-live-request-body>Loading...</pre>
    </article>

    <article class="panel">
      <header>
        <h2>Response</h2>
        <div class="mode-tabs" data-live-mode-tabs>
          {% for option in ["auto", "json", "text", "markdown", "tool", "sse"] %}
          <a class="{{ 'active' if option == mode else '' }}" href="/admin/requests/{{ record_id }}?mode={{ option }}" data-mode="{{ option }}">{{ option }}</a>
          {% endfor %}
        </div>
      </header>
      <div data-live-response-body>
        <pre class="code">Loading...</pre>
      </div>
    </article>
  </section>

  <div data-live-compat-section></div>
  <div data-live-raw-response-section></div>
  <div data-live-images-section></div>
  <div data-live-cost-section></div>
  <div data-live-headers-section></div>
  <div data-live-upstream-section></div>
</section>
{% endblock %}