{% extends "base.html" %}

{% block title %}FlowSurgeon — Routes{% endblock %}

{% block topbar %}
<nav class="topbar">
  <a class="logo" href="{{ debug_route }}">FlowSurgeon</a>
</nav>
{% endblock %}

{% block content %}
<div class="spa-wrapper" x-data="{ methodFilter: 'ALL' }">

  {# -- Method filter toggle group -- #}
  <div class="controls-row" style="flex-shrink: 0;">
    <div class="toggle-group">
      {% for m in ['ALL', 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'] %}
      <button
        class="toggle-item"
        :class="methodFilter === '{{ m }}' ? 'toggle-item-active' : ''"
        @click="methodFilter = '{{ m }}'"
        type="button"
      >{{ m }}</button>
      {% endfor %}
    </div>
    <span class="u-dim u-text-sm">{{ total_routes }} route{% if total_routes != 1 %}s{% endif %}</span>
  </div>

  {# ── Routes list ── #}
  {% if total_routes == 0 %}
  <div class="empty">No routes discovered.</div>
  {% else %}
  <div class="table-wrap">
    <div class="tbl-body">
      {% for prefix, routes in groups.items() %}

      {# ── Group header ── #}
      <div class="route-group-hd">{{ prefix }}</div>

      {# ── Route rows ── #}
      {% for route in routes %}
      <a
        class="tr {% if not route.has_data %}tr-no-traffic{% endif %}"
        href="{{ debug_route }}?method={{ route.method }}&amp;path={{ route.path | urlencode }}"
        x-show="methodFilter === 'ALL' || methodFilter === '{{ route.method }}'"
      >
        {# Left: method badge + path #}
        <div class="td w-80">
          <span class="method {{ route.method | method_class }}{% if not route.has_data %} method-muted{% endif %}">{{ route.method }}</span>
        </div>
        <div class="td w-fill u-mono td-path">{{ route.path }}</div>

        {# Right: stats or no-traffic indicator #}
        {% if route.has_data %}
        <div class="td-stats">
          <div class="td w-80 td-dim">{{ route.count }} reqs</div>
          <div class="td w-80 {{ route.latest_duration_ms | duration_class }}">{{ "%.0f"|format(route.latest_duration_ms) }}ms</div>
          <div class="td w-80 td-dim">{{ route.latest_query_count }}q</div>
          <div class="td w-80">
            <span class="status {{ route.latest_status | status_class }}">{{ route.latest_status }}</span>
          </div>
          <div class="td w-110 td-dim">{{ route.last_request_time | relative_time }}</div>
        </div>
        {% else %}
        <div class="td-stats">
          <div class="td td-dim u-text-sm">No requests</div>
        </div>
        {% endif %}
      </a>
      {% endfor %}

      {% endfor %}
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}