<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
    <thead class="bg-gray-50 dark:bg-gray-800">
        <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Time</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Method</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Path</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Response Time</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Size</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">IP</th>
        </tr>
    </thead>
    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        {% for request in recent_requests %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" 
            onclick="showRequestDetail({{ request.id }})">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
                {{ request.formatted_time }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                    {% if request.method == 'GET' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                    {% elif request.method == 'POST' %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                    {% elif request.method == 'PUT' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                    {% elif request.method == 'DELETE' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                    {% else %}bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200{% endif %}">
                    {{ request.method }}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300 font-mono">
                {{ request.path }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                    {% if request.status_code < 300 %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                    {% elif request.status_code < 400 %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                    {% else %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% endif %}">
                    {{ request.status_code }}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
                {{ "%.1f"|format(request.response_time) }}ms
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{ request.response_size }}B
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
                {{ request.client_ip or '-' }}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- Pagination -->
{% if total_pages is defined and total_pages > 1 %}
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
    <div class="text-sm text-gray-500 dark:text-gray-400">
        Page {{ current_page|default(1) }} of {{ total_pages|default(1) }}
    </div>
    <div class="flex gap-2">
        {% if current_page is defined and current_page > 1 %}
        <button onclick="loadPage({{ current_page - 1 }})" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600">
            Previous
        </button>
        {% endif %}
        {% if current_page is defined and total_pages is defined and current_page < total_pages %}
        <button onclick="loadPage({{ current_page + 1 }})" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600">
            Next
        </button>
        {% endif %}
    </div>
</div>
{% endif %}
