{% extends "base.html" %}

{% block content %}

{# ── Maintenance controls ──────────────────────────────────────────── #}
{#
   Multi-service (service selected):
     Global (left) + Service (right) in one responsive row.
     Stacks to a single column on mobile.

   Embedded / All services:
     Global maintenance takes the full width as before.
#}
{% if selected_service and service_config is not none %}

<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-5 items-stretch">
    <div class="flex flex-col">
        {# Left — all-services global maintenance #}
        {% set config = global_config %}
        {% include "partials/global_maintenance.html" with context %}
    </div>
    <div class="flex flex-col">
        {# Right — per-service maintenance #}
        {% set config = service_config %}
        {% set service = selected_service %}
        {% include "partials/service_maintenance.html" with context %}
    </div>
</div>

{% else %}

<div class="mb-5">
    {% set config = global_config %}
    {% include "partials/global_maintenance.html" with context %}
</div>

{% endif %}

{# ── 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-400 font-medium">{{ n_maintenance }} in maintenance</span>
            {% endif %}
            {% if n_disabled > 0 %}
            · <span class="text-red-400 font-medium">{{ n_disabled }} disabled</span>
            {% endif %}
            {% if selected_service %}
            · Showing routes for {{ selected_service }}
            {% 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">
        <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">
        <div class="text-2xl font-bold text-amber-400 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">
        <div class="text-2xl font-bold text-red-400 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">
        <div class="text-2xl font-bold text-violet-400 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 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 overflow-hidden switchly-table-outer">
    <div class="scroll-x">
        <table class="w-full text-left min-w-[640px] mobile-cards"
               hx-ext="sse"
               sse-connect="{{ prefix }}/events{% if selected_service %}?service={{ selected_service }}{% endif %}">
            <thead>
                <tr class="border-b border-slate-200 bg-slate-50">
                    <th class="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest sticky left-0 bg-slate-50 z-10">Path</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest">Status</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest hidden md:table-cell">Reason</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-widest hidden lg:table-cell">Environments</th>
                    <th class="px-4 py-3 text-xs font-semibold text-slate-500 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) %}
                {% set rate_limit_policy = rate_limit_policies.get(state.path) %}
                {% include "partials/route_row.html" with context %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% include "partials/pagination.html" %}
</div>

{% else %}

{# ── Empty state ──────────────────────────────────────────────────── #}
<div class="bg-white rounded-xl border border-slate-200">
    <div class="flex flex-col items-center justify-center py-16 px-6 text-center">
        <div class="w-12 h-12 bg-slate-50 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 text-slate-600 px-1 py-0.5 rounded">SwitchlyRouter</code> or <code class="font-mono text-xs bg-slate-100 text-slate-600 px-1 py-0.5 rounded">SwitchlyMiddleware</code>.</p>
    </div>
</div>

{% endif %}
{% endblock %}