<div class="trace-run-detail-tabs">
  <div class="tabs is-small is-toggle is-toggle-rounded mb-2">
    <ul>
      <li class="is-active">
        <a href="#" class="trace-run-tab-trigger" data-tab-target="summary">Summary</a>
      </li>
      <li>
        <a href="#" class="trace-run-tab-trigger" data-tab-target="identifiers">Identifiers</a>
      </li>
      <li>
        <a href="#" class="trace-run-tab-trigger" data-tab-target="usage">Usage</a>
      </li>
      <li>
        <a
          href="#"
          class="trace-run-tab-trigger"
          data-tab-target="error"
          data-lazy-url="{% url 'ai_execution_run_detail_tab' run_id=run.id tab_slug='error' %}"
        >Error</a>
      </li>
    </ul>
  </div>
  <div class="trace-run-tab-panel" data-tab-panel="summary">
    <table class="table is-fullwidth is-narrow is-size-7">
      <tbody>
        <tr><th>Status</th><td>{{ run.status|default:"-" }}</td></tr>
        <tr><th>Operation</th><td>{{ run.operation|default:"-" }}</td></tr>
        <tr><th>Model</th><td>{{ run.model|default:"-" }}</td></tr>
        <tr><th>Started</th><td>{{ run.started_at|default:"-" }}</td></tr>
        <tr><th>Finished</th><td>{{ run.finished_at|default:"-" }}</td></tr>
        <tr><th>Duration (ms)</th><td>{{ run.duration_ms|default:"-" }}</td></tr>
      </tbody>
    </table>
  </div>
  <div class="trace-run-tab-panel is-hidden" data-tab-panel="identifiers">
    <table class="table is-fullwidth is-narrow is-size-7">
      <tbody>
        <tr><th>Run ID</th><td>{{ run.id }}</td></tr>
        <tr><th>AI ID</th><td>{% if run.ai_id %}{{ run.ai_id }}{% else %}-{% endif %}</td></tr>
        <tr><th>Base URL</th><td><code>{{ run.base_url|default:"-" }}</code></td></tr>
      </tbody>
    </table>
  </div>
  <div class="trace-run-tab-panel is-hidden" data-tab-panel="usage">
    <table class="table is-fullwidth is-narrow is-size-7">
      <tbody>
        <tr><th>Message Count</th><td>{{ run.message_count }}</td></tr>
        <tr><th>Prompt Chars</th><td>{{ run.prompt_chars }}</td></tr>
        <tr><th>Response Chars</th><td>{{ run.response_chars }}</td></tr>
      </tbody>
    </table>
  </div>
  <div class="trace-run-tab-panel is-hidden" data-tab-panel="error" data-loaded="0">
    <p class="has-text-grey">Click the Error tab to load details.</p>
  </div>
</div>
