{% extends "base.html" %}

{% block title %}FlowSurgeon — {{ route_method }} {{ route_path }}{% endblock %}

{% block topbar %}
<nav class="topbar">
  <a class="logo" href="{{ debug_route }}">FlowSurgeon</a>
  <div class="breadcrumb">
    <span class="bc-sep">/</span>
    <span class="b-cur">
      <span class="method {{ route_method | method_class }}">{{ route_method }}</span>
      <span class="u-mono u-text-sm">{{ route_path }}</span>
    </span>
  </div>
</nav>
{% endblock %}

{% block content %}
<div class="spa-wrapper" x-data="{ statusFilter: '{{ status }}', sortBy: '{{ sort }}' }">

  {# ── Filter toggle groups ── #}
  <div class="controls-row" style="flex-shrink: 0;">
    <div class="controls-row-inner">
      <div class="toggle-group">
        {% for s in [('', 'All'), ('2xx', '2xx'), ('3xx', '3xx'), ('4xx', '4xx'), ('5xx', '5xx')] %}
        <a
          class="toggle-item {% if status == s[0] %}toggle-item-active{% endif %}"
          href="{{ debug_route }}?method={{ route_method }}&amp;path={{ route_path | urlencode }}&amp;status={{ s[0] }}&amp;sort={{ sort }}&amp;show={{ show }}"
        >{{ s[1] }}</a>
        {% endfor %}
      </div>
      <div class="toggle-group">
        {% for sv in [('recent', 'Recent'), ('duration', 'Duration'), ('status', 'Status')] %}
        <a
          class="toggle-item {% if sort == sv[0] %}toggle-item-active{% endif %}"
          href="{{ debug_route }}?method={{ route_method }}&amp;path={{ route_path | urlencode }}&amp;status={{ status }}&amp;sort={{ sv[0] }}&amp;show={{ show }}"
        >{{ sv[1] }}</a>
        {% endfor %}
      </div>
    </div>
    <span class="u-dim u-text-sm">{{ total_records }} request{% if total_records != 1 %}s{% endif %}</span>
  </div>

  {# ── Request list ── #}
  <div class="table-wrap">
    <div class="tbl-body">
      {% for record in records %}
      <a class="tr" href="{{ debug_route }}/{{ record.request_id }}">
        <div class="td w-fill u-mono u-text-sm">{{ record.request_id }}</div>
        <div class="td w-80">
          <span class="status {{ record.status_code | status_class }}">{{ record.status_code }}</span>
        </div>
        <div class="td w-80 {{ record.duration_ms | duration_class }}">{{ "%.0f"|format(record.duration_ms) }}ms</div>
        <div class="td w-110 {{ (record.queries | length) | queries_color }}">{{ record.queries | length }} {{ "query" if record.queries | length == 1 else "queries" }}</div>
        <div class="td w-110 td-dim">{{ record.timestamp.strftime("%Y-%m-%d %H:%M:%S") | relative_time }}</div>
      </a>
      {% else %}
      <div class="empty">No requests recorded for this route.</div>
      {% endfor %}
    </div>
  </div>

  {# ── Pagination ── #}
  {% if total_pages > 1 %}
  <div class="pagination">
    {% if page > 1 %}
    <a class="page-btn"
      href="{{ debug_route }}?method={{ route_method }}&amp;path={{ route_path | urlencode }}&amp;status={{ status }}&amp;sort={{ sort }}&amp;show={{ show }}&amp;page={{ page - 1 }}">
      &laquo; Previous
    </a>
    {% endif %}
    <span class="page-info">Page {{ page }} of {{ total_pages }}</span>
    {% if page < total_pages %}
    <a class="page-btn"
      href="{{ debug_route }}?method={{ route_method }}&amp;path={{ route_path | urlencode }}&amp;status={{ status }}&amp;sort={{ sort }}&amp;show={{ show }}&amp;page={{ page + 1 }}">
      Next &raquo;
    </a>
    {% endif %}
  </div>
  {% endif %}

</div>
{% endblock %}