{% extends "base.html" %}
{% block content %}
<section class="panel">
  <div class="panel-header">
    <div>
      <div class="eyebrow">Production</div>
      <h1>Overview</h1>
    </div>
    {% if metrics.get("circuit_open") %}
      <span class="badge bad">Circuit open</span>
    {% else %}
      <span class="badge ok">Operational</span>
    {% endif %}
  </div>
  <div class="metrics"
       hx-get="/metrics/fragment" hx-trigger="every 10s" hx-swap="innerHTML">
    {% include "metrics_fragment.html" %}
  </div>
</section>

<section class="panel">
  <div class="panel-header">
    <h2>Recent traces</h2>
    <a class="button" href="/traces">Open traces</a>
  </div>
  {% if recent_traces %}
  <div class="table-wrap">
    <table class="trace-table">
      <thead>
        <tr><th>Time</th><th>Tenant</th><th>Input</th><th>Verdict</th><th>Engine</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('call_id','') }}">{{ t.get("input_text","")[:80] }}</a>
          </td>
          <td>
            {% if t.get("blocked") %}
              <span class="badge bad">BLOCKED</span>
            {% elif t.get("hitl_status") == "idle" %}
              <span class="badge warn">HELD</span>
            {% elif t.get("hitl_status") == "denied" %}
              <span class="badge bad">DENIED</span>
            {% elif t.get("hitl_status") == "approved" %}
              <span class="badge ok">APPROVED</span>
            {% else %}
              <span class="badge ok">ALLOWED</span>
            {% endif %}
          </td>
          <td class="mono">{{ "%.0f"|format(t.get("engine_latency_ms", t.get("total_latency_ms",0))) }}ms</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty">No traces yet.</div>
  {% endif %}
</section>
{% endblock %}