{% extends "base.html" %}

{% block content %}

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-xl font-semibold text-slate-900">Blocked Requests</h1>
        <p class="mt-0.5 text-sm text-slate-500">Recent rate limit violations.</p>
    </div>
    <a href="{{ prefix }}/blocked" 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>

<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">Recent Blocked Requests</h2>
        <span class="text-xs text-slate-400">{{ pagination.total }} total{% if pagination.total_pages > 1 %} · page {{ pagination.page }}/{{ pagination.total_pages }}{% endif %}</span>
    </div>
    {% if hits %}
    <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">Timestamp</th>
                    <th class="px-4 py-3">Path</th>
                    <th class="px-4 py-3 hidden lg:table-cell">Limit</th>
                </tr>
            </thead>
            <tbody id="rate-limit-hits-body">
                {% include "partials/rate_limit_hits.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-8 h-8 mb-2 text-emerald-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <p class="text-sm font-medium text-slate-500">No blocked requests yet</p>
        <p class="mt-1 text-xs text-slate-400">Blocked requests appear here when clients exceed their rate limits.</p>
    </div>
    {% endif %}
</div>

{% endblock %}