{% extends "base.html" %}
{% block content %}
{% set t = trace %}
<div class="layout">
  <section class="panel">
    <div class="panel-header">
      <div>
        <div class="eyebrow">Trace detail</div>
        <h1>
          {% if t.get("blocked") %}Action blocked
          {% elif t.get("hitl_status") == "idle" %}Held for review
          {% elif t.get("hitl_status") == "denied" %}Action denied
          {% else %}Action allowed{% endif %}
        </h1>
      </div>
      <span class="badge {% if t.get('blocked') or t.get('hitl_status') == 'denied' %}bad{% elif t.get('hitl_status') == 'idle' %}warn{% else %}ok{% endif %}">
        {% if t.get("blocked") %}BLOCKED{% elif t.get("hitl_status") == "idle" %}HELD{% elif t.get("hitl_status") == "denied" %}DENIED{% elif t.get("hitl_status") == "approved" %}APPROVED{% else %}ALLOWED{% endif %}
      </span>
    </div>
    <div class="panel-body">
      <div class="summary-grid">
        <div class="summary-cell"><small>Call ID</small><strong class="mono">{{ t.get("call_id","") }}</strong></div>
        <div class="summary-cell"><small>Tenant</small><strong>{{ t.get("tenant_id","") }}</strong></div>
        <div class="summary-cell"><small>Session</small><strong class="mono">{{ t.get("session_id","") }}</strong></div>
        <div class="summary-cell"><small>Engine latency</small><strong>{{ "%.1f"|format(t.get("engine_latency_ms", t.get("total_latency_ms",0))) }}ms</strong></div>
        <div class="summary-cell"><small>Cost</small><strong>${{ "%.6f"|format(t.get("provider_cost_usd",0)) }}</strong></div>
      </div>

      {% if t.get("blocked") %}
      <div class="callout bad">
        <span class="badge bad">Blocked</span>
        <h3>Block reason</h3>
        <p>{{ t.get("block_reason","") }}</p>
        {% if t.get("this_hash") %}<p class="mono">this_hash: {{ t.get("this_hash","") }}</p>{% endif %}
      </div>
      {% endif %}

      <div class="payload-grid">
        <div class="payload-box">
          <div class="eyebrow">Input</div>
          <pre>{{ t.get("input_text","") }}</pre>
        </div>
        <div class="payload-box">
          <div class="eyebrow">Output</div>
          <pre>{{ t.get("output_text","") }}</pre>
        </div>
      </div>

      <table class="trace-table">
        <thead><tr><th>Layer</th><th>Decision</th><th>Detail</th><th>Latency</th></tr></thead>
        <tbody>
        {% for ev in t.get("layer_events", []) %}
          <tr>
            <td class="mono">{{ ev.get("layer","") }}</td>
            <td>
              <span class="badge {% if ev.get('decision')=='blocked' %}bad{% elif ev.get('decision')=='escalate' %}warn{% else %}ok{% endif %}">
                {{ ev.get("decision","") }}
              </span>
            </td>
            <td>{{ ev.get("detail","") }}</td>
            <td class="mono">{{ "%.1f"|format(ev.get("latency_ms",0)) }}ms</td>
          </tr>
        {% else %}
          <tr><td colspan="4" style="color:var(--muted)">No layer events.</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <aside class="stack">
    <section class="panel">
      <div class="panel-header"><h2>Metadata</h2></div>
      <div class="timeline">
        <div class="timeline-row"><span class="mono">provider</span><span>{{ t.get("provider","") }} / {{ t.get("provider_model","") }}</span><span></span></div>
        <div class="timeline-row"><span class="mono">hitl</span><span>status {{ t.get("hitl_status","") or "none" }}</span>
          {% if t.get("hitl_wait_ms", 0) %}<span class="badge warn">{{ "%.0f"|format(t.get("hitl_wait_ms",0)) }}ms</span>{% else %}<span></span>{% endif %}
        </div>
        <div class="timeline-row"><span class="mono">pii</span><span>{{ t.get("pii_redactions",[]) | join(", ") or "no redactions" }}</span><span></span></div>
      </div>
    </section>
    {% if t.get("this_hash") %}
    <section class="callout ok">
      <h3>Chain integrity</h3>
      <p class="mono">this: {{ t.get("this_hash","") }}</p>
      {% if t.get("prev_hash") %}<p class="mono">prev: {{ t.get("prev_hash","") }}</p>{% endif %}
      <p>Stored trace hash is part of the tenant audit chain.</p>
    </section>
    {% endif %}
  </aside>
</div>
{% endblock %}