{% extends "base.html" %}

{% block content %}

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-xl font-semibold text-slate-900">Rate Limits</h1>
        <p class="mt-0.5 text-sm text-slate-500">Active rate limit policies for registered routes.</p>
    </div>
    <a href="{{ prefix }}/rate-limits{% if selected_service %}?service={{ selected_service }}{% endif %}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors shadow-sm">
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"/>
        </svg>
        Refresh
    </a>
</div>

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

   No service selected:
     Global rate limit takes the full width.
#}
{% if selected_service %}

<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 rate limit #}
        {% with grl=global_rl %}
        {% include "partials/global_rl_card.html" %}
        {% endwith %}
    </div>
    <div class="flex flex-col">
        {# Right — per-service rate limit #}
        {% with srl=service_rl, service=selected_service %}
        {% include "partials/service_rl_card.html" %}
        {% endwith %}
    </div>
</div>

{% else %}

<div class="mb-5">
    {% with grl=global_rl %}
    {% include "partials/global_rl_card.html" %}
    {% endwith %}
</div>

{% endif %}

{# ── Policies table ─────────────────────────────────────────────── #}
<div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
    <div class="px-5 py-3.5 border-b border-slate-100 flex items-center justify-between">
        <h2 class="text-sm font-semibold text-slate-700">Policies</h2>
        <span class="text-xs text-slate-400">{{ pagination.total }} route{% if pagination.total != 1 %}s{% endif %}{% if pagination.total_pages > 1 %} · page {{ pagination.page }}/{{ pagination.total_pages }}{% endif %}</span>
    </div>
    {% if policies %}
    <div class="scroll-x">
        <table class="w-full text-sm mobile-cards">
            <thead>
                <tr class="text-left bg-slate-50/80 text-xs font-semibold text-slate-500 uppercase tracking-wide">
                    <th class="px-5 py-3">Path</th>
                    <th class="px-4 py-3">Limit</th>
                    <th class="px-4 py-3 hidden md:table-cell">Algorithm</th>
                    <th class="px-4 py-3 hidden lg:table-cell">Key Strategy</th>
                    <th class="px-4 py-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody id="rate-limit-policies-body">
                {% include "partials/rate_limit_rows.html" %}
            </tbody>
        </table>
    </div>
    {% include "partials/pagination.html" %}
    {% else %}
    <div class="flex flex-col items-center justify-center py-16 text-center text-slate-400">
        <svg class="w-10 h-10 mb-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
        </svg>
        <p class="text-sm font-medium text-slate-500">No rate limit policies configured</p>
        <p class="mt-1 text-xs">Use the Unprotected Routes section below or decorate routes with <code class="font-mono bg-slate-100 px-1 py-0.5 rounded">@rate_limit("100/minute")</code>.</p>
    </div>
    {% endif %}
</div>

{# ── Unprotected routes ──────────────────────────────────────────── #}
{% if unrated_routes %}
<div class="mt-6 bg-white border border-amber-200 rounded-xl shadow-sm overflow-hidden">
    <div class="px-5 py-3.5 border-b border-amber-100 flex items-center justify-between bg-amber-50/60">
        <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
            </svg>
            <h2 class="text-sm font-semibold text-amber-800">Unprotected Routes</h2>
        </div>
        <span class="text-xs text-amber-600">{{ unrated_routes | length }} route{% if unrated_routes | length != 1 %}s{% endif %} without a rate limit</span>
    </div>
    <div class="scroll-x">
        <table class="w-full text-sm mobile-cards mobile-row-status-action">
            <thead>
                <tr class="text-left bg-slate-50/80 text-xs font-semibold text-slate-500 uppercase tracking-wide">
                    <th class="px-5 py-3">Route</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3 text-right">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for state in unrated_routes %}
                {% set svc = state.service or "" %}
                {% set raw_path = state.path %}
                {% set svc_stripped = raw_path[svc | length + 1:] if svc and raw_path.startswith(svc + ":") else raw_path %}
                {% set encoded = svc_stripped | encode_path %}
                {# Parse out the HTTP method prefix (e.g. "GET:/api/items") for display #}
                {% set _parts = svc_stripped.split(":", 1) %}
                {% set route_method = _parts[0] if _parts | length == 2 and _parts[0] in ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"] else "" %}
                {% set display_path = _parts[1] if route_method else svc_stripped %}
                <tr class="group hover:bg-slate-50/70 transition-colors border-t border-slate-100 first:border-0">
                    <td class="px-5 py-3">
                        <div class="flex flex-col min-w-0">
                            <div class="flex items-center gap-1.5">
                                {% if route_method %}
                                <span class="px-1.5 py-0.5 text-[10px] font-mono font-semibold bg-slate-100 text-slate-600 rounded shrink-0">{{ route_method }}</span>
                                {% endif %}
                                <code class="text-sm font-mono text-slate-800 truncate max-w-[22rem]">{{ display_path }}</code>
                            </div>
                            {% if svc %}
                            <span class="mt-0.5 inline-block text-[10px] font-mono text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded-md w-fit">{{ svc }}</span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium
                            {% if state.status == 'active' %}bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20
                            {% elif state.status == 'maintenance' %}bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20
                            {% else %}bg-slate-100 text-slate-500 ring-1 ring-inset ring-slate-400/20{% endif %}">
                            {{ state.status | upper }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <button
                            hx-get="{{ prefix }}/modal/rl/add/{{ encoded }}{% if selected_service %}?service={{ selected_service }}{% endif %}"
                            hx-target="#switchly-modal"
                            hx-swap="innerHTML"
                            onclick="document.getElementById('switchly-modal').showModal()"
                            title="Add rate limit for {{ display_path }}"
                            class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-emerald-700
                                   bg-emerald-50 border border-emerald-200 rounded-md hover:bg-emerald-100
                                   hover:border-emerald-300 transition-all active:scale-95">
                            <svg class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                            </svg>
                            <span>Add Limit</span>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{% endblock %}