{% 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" 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>

{# ── Global rate limit card ──────────────────────────────────────── #}
{% with grl=global_rl %}
{% include "partials/global_rl_card.html" %}
{% endwith %}

{# ── 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">Decorate routes with <code class="font-mono bg-slate-100 px-1 py-0.5 rounded">@rate_limit("100/minute")</code> to add limits.</p>
    </div>
    {% endif %}
</div>

{% endblock %}