{% extends "base.html" %}

{% block content %}

{# ── Global maintenance control ───────────────────────────────────── #}
{% set config = global_config %}
{% include "partials/global_maintenance.html" with context %}

{# ── Compute per-status counts for the summary bar ────────────────── #}
{% set n_active      = states | selectattr("status", "equalto", "active")      | list | length %}
{% set n_maintenance = states | selectattr("status", "equalto", "maintenance")  | list | length %}
{% set n_disabled    = states | selectattr("status", "equalto", "disabled")     | list | length %}
{% set n_env_gated   = states | selectattr("status", "equalto", "env_gated")    | list | length %}
{% set n_deprecated  = states | selectattr("status", "equalto", "deprecated")   | list | length %}

{# ── Page title ───────────────────────────────────────────────────── #}
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
    <div>
        <h1 class="text-xl font-semibold text-slate-900">Routes</h1>
        <p class="text-sm text-slate-500 mt-0.5">
            {{ states | length }} route{{ 's' if states | length != 1 else '' }} registered
            {% if n_maintenance > 0 %}
            · <span class="text-amber-600 font-medium">{{ n_maintenance }} in maintenance</span>
            {% endif %}
            {% if n_disabled > 0 %}
            · <span class="text-red-600 font-medium">{{ n_disabled }} disabled</span>
            {% endif %}
        </p>
    </div>
    {# Live indicator #}
    <div class="flex items-center gap-1.5 text-xs text-slate-400 self-start sm:self-auto">
        <span class="relative flex h-2 w-2">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
        </span>
        Live
    </div>
</div>

{% if states %}

{# ── Status summary cards ─────────────────────────────────────────── #}
<div class="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-5 gap-2 sm:gap-3 mb-5">
    <div class="bg-white rounded-xl border border-slate-200 px-4 py-3 shadow-sm">
        <div class="text-2xl font-bold text-emerald-600 tabular-nums">{{ n_active }}</div>
        <div class="text-xs text-slate-500 mt-0.5 font-medium uppercase tracking-wide">Active</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 px-4 py-3 shadow-sm">
        <div class="text-2xl font-bold text-amber-500 tabular-nums">{{ n_maintenance }}</div>
        <div class="text-xs text-slate-500 mt-0.5 font-medium uppercase tracking-wide">Maintenance</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 px-4 py-3 shadow-sm">
        <div class="text-2xl font-bold text-red-500 tabular-nums">{{ n_disabled }}</div>
        <div class="text-xs text-slate-500 mt-0.5 font-medium uppercase tracking-wide">Disabled</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 px-4 py-3 shadow-sm">
        <div class="text-2xl font-bold text-blue-500 tabular-nums">{{ n_env_gated }}</div>
        <div class="text-xs text-slate-500 mt-0.5 font-medium uppercase tracking-wide">Env&nbsp;Gated</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 px-4 py-3 shadow-sm col-span-2 sm:col-span-1">
        <div class="text-2xl font-bold text-slate-400 tabular-nums">{{ n_deprecated }}</div>
        <div class="text-xs text-slate-500 mt-0.5 font-medium uppercase tracking-wide">Deprecated</div>
    </div>
</div>

{# ── Routes table ─────────────────────────────────────────────────── #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <div class="scroll-x">
        <table class="w-full text-left min-w-[640px]"
               hx-ext="sse"
               sse-connect="{{ prefix }}/events">
            <thead>
                <tr class="border-b border-slate-200 bg-slate-50/60">
                    <th class="px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest">Path</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest">Status</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest hidden md:table-cell">Reason</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest hidden lg:table-cell">Environments</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-widest text-right">Actions</th>
                </tr>
            </thead>
            <tbody id="routes-table-body" class="divide-y divide-slate-100">
                {% for state in states %}
                {% set path_slug = path_slug(state.path) %}
                {% include "partials/route_row.html" with context %}
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% else %}

{# ── Empty state ──────────────────────────────────────────────────── #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm">
    <div class="flex flex-col items-center justify-center py-16 px-6 text-center">
        <div class="w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
            </svg>
        </div>
        <h3 class="text-sm font-semibold text-slate-900 mb-1">No routes registered</h3>
        <p class="text-sm text-slate-500 max-w-sm">Routes appear here once the application starts with <code class="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded">ShieldRouter</code> or <code class="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded">ShieldMiddleware</code>.</p>
    </div>
</div>

{% endif %}
{% endblock %}