{% extends "base.html" %}

{% block title %}FlowSurgeon — {{ record.method }} {{ record.path }}{% endblock %}

{% block topbar %}
<nav class="topbar">
  <span class="logo">FlowSurgeon</span>
  <div class="breadcrumb">
    <a class="b-dim" href="{{ debug_route }}">APIs</a>
    <span class="sep">›</span>
    <a class="b-mid" href="{{ debug_route }}">{{ record.path }}</a>
    <span class="sep">›</span>
    <span class="b-cur">Request #{{ record.request_id[:8] }}</span>
  </div>
</nav>
{% endblock %}

{% block subnav %}
<div class="subnav">
  <a class="subnav-item {% if active_tab == 'details' %}active{% else %}inactive{% endif %}"
     href="{{ debug_route }}/{{ record.request_id }}">
    <span>Details</span>
    {% if active_tab == 'details' %}<div class="subnav-underline"></div>{% endif %}
  </a>
  <a class="subnav-item {% if active_tab == 'sql' %}active{% else %}inactive{% endif %}"
     href="{{ debug_route }}/{{ record.request_id }}?tab=sql">
    <span>SQL</span>
    {% if active_tab == 'sql' %}<div class="subnav-underline"></div>{% endif %}
  </a>
  <a class="subnav-item {% if active_tab == 'traceback' %}active{% else %}inactive{% endif %}"
     href="{{ debug_route }}/{{ record.request_id }}?tab=traceback">
    <span>Traceback</span>
    {% if active_tab == 'traceback' %}<div class="subnav-underline"></div>{% endif %}
  </a>
</div>
{% endblock %}

{% block content %}
{% if active_tab == 'sql' %}
{# ── SQL tab ── #}
{% include "partials/detail_sql.html" %}

{% elif active_tab == 'traceback' %}
{# ── Traceback tab ── #}
{% include "partials/detail_traceback.html" %}

{% else %}
{# ── Details tab (default) ── #}

{# Stats cards #}
<div class="cards-row">
  <div class="card">
    <span class="card-label">STATUS</span>
    <div>
      <span class="card-badge {{ record.status_code | status_class }}" style="margin-top:4px">
        <span>{{ record.status_code }} {{ record.status_code | status_text }}</span>
      </span>
    </div>
  </div>
  <div class="card">
    <span class="card-label">DURATION</span>
    <span class="card-value {{ record.duration_ms | duration_class }}">{{ "%.0f"|format(record.duration_ms) }} ms</span>
  </div>
  <div class="card">
    <span class="card-label">SQL QUERIES</span>
    <span class="card-value {{ (record.queries | length) | queries_color }}">{{ record.queries | length }} queries</span>
  </div>
  <div class="card">
    <span class="card-label">SQL TIME</span>
    <span class="card-value {{ sql_total_ms | duration_class }}">{{ "%.0f"|format(sql_total_ms) }} ms</span>
  </div>
</div>

{# Request + Response panels #}
<div class="panels-row">
  {# Request panel #}
  <div class="panel-card">
    <div class="panel-hd">
      <span class="panel-hd-title">Request</span>
      <span class="method m-{{ record.method if record.method in ('GET','POST','PUT','PATCH','DELETE','HEAD') else 'OTHER' }}">
        {{ record.method }}
      </span>
    </div>
    <div class="panel-bd">
      <div class="field">
        <span class="field-lbl">Path</span>
        <span class="field-val">{{ record.path }}{% if record.query_string %}?{{ record.query_string }}{% endif %}</span>
      </div>
      <div class="psep"></div>
      <div class="field">
        <span class="field-lbl">Headers</span>
        <div class="code-block">
          {% for k, v in record.request_headers.items() %}
          <span class="code-line">{{ k }}: {{ v }}</span>
          {% else %}
          <span class="code-line" style="color:#4B5563">—</span>
          {% endfor %}
        </div>
      </div>
      <div class="psep"></div>
      <div class="field">
        <span class="field-lbl">Client</span>
        <span class="field-val">{{ record.client_host }}</span>
      </div>
      <div class="psep"></div>
      <div class="field">
        <span class="field-lbl">Timestamp</span>
        <span class="field-val">{{ record.timestamp.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
      </div>
      <div class="psep"></div>
      <div class="field">
        <span class="field-lbl">Request ID</span>
        <span class="field-val" style="font-family:monospace;font-size:12px">{{ record.request_id }}</span>
      </div>
    </div>
  </div>

  {# Response panel #}
  <div class="panel-card">
    <div class="panel-hd">
      <span class="panel-hd-title">Response</span>
      <span class="status {{ record.status_code | status_class }}">{{ record.status_code }}</span>
    </div>
    <div class="panel-bd">
      <div class="field">
        <span class="field-lbl">Response Time</span>
        <span class="field-val {{ record.duration_ms | duration_class }}">{{ "%.2f"|format(record.duration_ms) }} ms</span>
      </div>
      <div class="psep"></div>
      <div class="field">
        <span class="field-lbl">Headers</span>
        <div class="code-block">
          {% for k, v in record.response_headers.items() %}
          <span class="code-line">{{ k }}: {{ v }}</span>
          {% else %}
          <span class="code-line" style="color:#4B5563">—</span>
          {% endfor %}
        </div>
      </div>
      <div class="psep"></div>
      <div class="field">
        <span class="field-lbl">Body</span>
        {% if record.response_body %}
        <div class="code-block" style="max-height:300px; overflow-y:auto;">
          <span class="code-line">{{ record.response_body }}</span>
        </div>
        {% else %}
        <span class="field-val" style="color:#4B5563">— (binary or not captured)</span>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% endif %}
{% endblock %}