{% extends "base.html" %}
{% block content %}
<h1>Overview</h1>

<div class="grid grid-3" style="margin-bottom:1.5rem"
     hx-get="/metrics/fragment" hx-trigger="every 10s" hx-swap="innerHTML">
  {% set m = metrics %}
  <div class="card">
    <div class="stat-value">{{ m.get("total_calls", "-") }}</div>
    <div class="stat-label">Total Calls</div>
  </div>
  <div class="card">
    <div class="stat-value" style="color:{% if m.get('block_rate_pct', 0) > 5 %}#b91c1c{% else %}#15803d{% endif %}">
      {{ "%.1f"|format(m.get("block_rate_pct", 0)) }}%
    </div>
    <div class="stat-label">Block Rate</div>
  </div>
  <div class="card">
    <div class="stat-value">{{ "%.0f"|format(m.get("p95_latency_ms", 0)) }}ms</div>
    <div class="stat-label">p95 Latency</div>
  </div>
  <div class="card">
    <div class="stat-value">${{ "%.4f"|format(m.get("total_cost_usd", 0)) }}</div>
    <div class="stat-label">Total Cost</div>
  </div>
  <div class="card">
    <div class="stat-value">{{ m.get("pending_hitl", 0) }}</div>
    <div class="stat-label">Pending Approvals</div>
  </div>
  <div class="card">
    <div class="stat-value" style="color:{% if m.get('circuit_open') %}#b91c1c{% else %}#15803d{% endif %}">
      {% if m.get("circuit_open") %}OPEN{% else %}OK{% endif %}
    </div>
    <div class="stat-label">Circuit Breaker</div>
  </div>
</div>

<div class="card">
  <h2>Recent Traces</h2>
  {% if recent_traces %}
  <div class="table-wrap">
    <table>
      <thead><tr>
        <th>Time</th><th>Tenant</th><th>Input</th><th>Verdict</th><th>Latency</th>
      </tr></thead>
      <tbody>
      {% for t in recent_traces %}
      <tr>
        <td class="mono">{{ t.get("created_at","") }}</td>
        <td>{{ t.get("tenant_id","") }}</td>
        <td class="truncate">
          <a href="/traces/{{ t.get('this_hash','') }}">{{ t.get("input_text","")[:80] }}</a>
        </td>
        <td>
          {% if t.get("blocked") %}
            <span class="badge badge-block">BLOCKED</span>
          {% else %}
            <span class="badge badge-ok">OK</span>
          {% endif %}
        </td>
        <td>{{ "%.0f"|format(t.get("total_latency_ms",0)) }}ms</td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty">No traces yet.</div>
  {% endif %}
  <div style="margin-top:0.75rem"><a href="/traces">View all traces -></a></div>
</div>
{% endblock %}