<style>{{ css | safe }}</style>
<div id="fs-root">
  <div id="fs-toolbar">
    <span class="fs-title">FlowSurgeon</span>
    <span class="fs-badge {{ status_class }}">{{ record.status_code }}</span>
    <span class="fs-badge">{{ "%.1f"|format(record.duration_ms) }} ms</span>
    <span class="fs-badge">{{ record.method }}</span>
    {% if record.queries %}
    <span class="fs-badge fs-warn">{{ record.queries | length }} SQL</span>
    {% endif %}
    <a class="fs-link" href="{{ debug_route }}" target="_blank">history</a>
    <button id="fs-toggle" title="Toggle panel">▼</button>
  </div>
  <div id="fs-body">
    <div class="fs-section">
      <div class="fs-section-title">Request</div>
      <table class="fs-table">
        <tr><td>ID</td><td>{{ record.request_id }}</td></tr>
        <tr><td>Path</td><td>{{ record.path }}{% if record.query_string %}?{{ record.query_string }}{% endif %}</td></tr>
        <tr><td>Client</td><td>{{ record.client_host }}</td></tr>
        <tr><td>Time</td><td>{{ record.timestamp.strftime("%Y-%m-%d %H:%M:%S UTC") }}</td></tr>
      </table>
    </div>
    {% if record.queries %}
    <div class="fs-section">
      <div class="fs-section-title">
        SQL Queries
        <span class="fs-badge">{{ record.queries | length }}</span>
        <span class="fs-badge">{{ "%.1f"|format(sql_total_ms) }} ms total</span>
      </div>
      <table class="fs-table" style="width:100%">
        <thead><tr>
          <th style="color:#6c7086;font-size:10px;padding:2px 4px">#</th>
          <th style="color:#6c7086;font-size:10px;padding:2px 4px">SQL</th>
          <th style="color:#6c7086;font-size:10px;padding:2px 4px">Time</th>
        </tr></thead>
        <tbody>
          {% for q in record.queries %}
          <tr>
            <td style="color:#6c7086">{{ loop.index }}</td>
            <td>
              {% if q.duration_ms >= slow_threshold %}
              <span class="fs-badge fs-err">slow</span>
              {% endif %}
              {% if sql_counts[q.sql] > 1 %}
              <span class="fs-badge fs-warn">dup</span>
              {% endif %}
              <code style="font-size:11px">{{ q.sql[:120] }}{% if q.sql|length > 120 %}…{% endif %}</code>
            </td>
            <td style="white-space:nowrap">{{ "%.2f"|format(q.duration_ms) }} ms</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
    <div class="fs-section">
      <div class="fs-section-title">Request Headers</div>
      <table class="fs-table">
        {% for k, v in record.request_headers.items() %}
        <tr><td>{{ k }}</td><td>{{ v }}</td></tr>
        {% else %}
        <tr><td colspan="2">—</td></tr>
        {% endfor %}
      </table>
    </div>
    <div class="fs-section">
      <div class="fs-section-title">Response Headers</div>
      <table class="fs-table">
        {% for k, v in record.response_headers.items() %}
        <tr><td>{{ k }}</td><td>{{ v }}</td></tr>
        {% else %}
        <tr><td colspan="2">—</td></tr>
        {% endfor %}
      </table>
    </div>
  </div>
</div>
<script>{{ js | safe }}</script>
