{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto">
    <!-- Title Section -->
    <div class="mb-6">
        <h1 class="text-4xl font-extrabold text-gray-800">API Endpoints Overview</h1>
        <p class="mt-2 text-lg text-gray-600">{{ routes|length }} Routes Available</p>
    </div>

    <!-- Optional: Search or Filter functionality with HTMX -->
    <div class="mb-4">
        <input type="text" id="search" name="search" placeholder="Search endpoints..."
            class="w-full p-2 border border-gray-300 rounded" hx-get="{{ url_for('search_endpoints') }}"
            hx-trigger="keyup changed delay:500ms, search" hx-push-url="true" hx-target="#endpoints-table"
            hx-include="[name='search']">
    </div>

    <div id="endpoints-table">
        {{ render_partial('partials/endpoints_table.html', routes=routes) }}
    </div>
</div>
{% endblock %}