{% extends "base.html" %}
{% block title %}{{ agent_name }} — Usage{% endblock %}

{% block content %}
<div class="page" id="usage-container">

  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
    <h1>Usage</h1>
    <!-- Time range filter -->
    <div style="display:flex;gap:6px">
      <button class="btn" id="usage-range-today"  type="button" onclick="setUsageRange('today')">Today</button>
      <button class="btn" id="usage-range-7d"     type="button" onclick="setUsageRange('7d')" style="background:var(--accent);color:#fff;border-color:var(--accent)">7 days</button>
      <button class="btn" id="usage-range-30d"    type="button" onclick="setUsageRange('30d')">30 days</button>
      <button class="btn" id="usage-range-all"    type="button" onclick="setUsageRange('all')">All time</button>
    </div>
  </div>

  <!-- Summary cards -->
  <div id="usage-cards" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:32px">
    <div class="stat-card">
      <div class="stat-label">Runs</div>
      <div class="stat-value" id="u-total-runs">—</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Input tokens</div>
      <div class="stat-value" id="u-input-tokens">—</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Output tokens</div>
      <div class="stat-value" id="u-output-tokens">—</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Total tokens</div>
      <div class="stat-value" id="u-total-tokens">—</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Est. cost</div>
      <div class="stat-value" id="u-cost">—</div>
    </div>
  </div>

  <!-- Per-agent breakdown -->
  <h2 style="font-size:14px;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px">
    By agent
  </h2>
  <div class="table-wrap">
    <table id="usage-table">
      <thead>
        <tr>
          <th style="text-align:left">Agent</th>
          <th style="text-align:left">Model</th>
          <th style="text-align:right">Runs</th>
          <th style="text-align:right">Input</th>
          <th style="text-align:right">Output</th>
          <th style="text-align:right">Total tokens</th>
          <th style="text-align:right">Est. cost</th>
          <th style="min-width:120px"></th>
        </tr>
      </thead>
      <tbody id="usage-tbody">
        <tr><td colspan="8" style="text-align:center;color:var(--text-dim);padding:32px">Loading…</td></tr>
      </tbody>
    </table>
  </div>
  <!-- Chat sessions summary -->
  <h2 style="font-size:14px;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin:32px 0 12px">
    Chat sessions
  </h2>
  <div id="usage-chat-section">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th style="text-align:left">Source</th>
            <th style="text-align:right">Sessions</th>
            <th style="text-align:right">Input</th>
            <th style="text-align:right">Output</th>
            <th style="text-align:right">Total tokens</th>
            <th style="text-align:right">Est. cost</th>
          </tr>
        </thead>
        <tbody id="usage-chat-tbody">
          <tr><td colspan="6" style="text-align:center;color:var(--text-dim);padding:24px">Loading…</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <p id="usage-no-cost-note" style="font-size:12px;color:var(--text-dim);margin-top:12px;display:none">
    Cost estimates only available for runs recorded after the usage tracking feature was enabled.
    Runs on free or unknown models show no cost.
  </p>

</div>
{% endblock %}