<div class="card shadow-sm  border-light">
    <div class="card-header">
        <h5 class="card-title">Requests</h5>
    </div>
    <div class="card-body">

        <!-- Filter Form -->
        <form method="get" action="{% url 'sonar_requests' %}" class="mb-4" hx-get="{% url 'sonar_requests' %}"
            hx-target="#main-content" hx-swap="innerHTML">
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="verb" class="form-label">Method</label>
                    <select name="verb" id="verb" class="form-select form-select-sm">
                        <option value="">All</option>
                        <option value="GET" {% if filters.verb == 'GET' %}selected{% endif %}>GET</option>
                        <option value="POST" {% if filters.verb == 'POST' %}selected{% endif %}>POST</option>
                        <option value="PUT" {% if filters.verb == 'PUT' %}selected{% endif %}>PUT</option>
                        <option value="PATCH" {% if filters.verb == 'PATCH' %}selected{% endif %}>PATCH</option>
                        <option value="DELETE" {% if filters.verb == 'DELETE' %}selected{% endif %}>DELETE</option>
                        <option value="HEAD" {% if filters.verb == 'HEAD' %}selected{% endif %}>HEAD</option>
                        <option value="OPTIONS" {% if filters.verb == 'OPTIONS' %}selected{% endif %}>OPTIONS</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <label for="path" class="form-label">Path</label>
                    <input type="text" name="path" id="path" class="form-control form-control-sm"
                        placeholder="e.g., /api/" value="{{ filters.path }}">
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <input type="text" name="status" id="status" class="form-control form-control-sm"
                        placeholder="e.g., 200" value="{{ filters.status }}">
                </div>
                <div class="col-md-2 d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-sm btn-primary">Filter</button>
                    <a href="{% url 'sonar_requests' %}" class="btn btn-sm btn-primary"
                        hx-get="{% url 'sonar_requests' %}" hx-target="#main-content" hx-swap="innerHTML">Clear</a>
                </div>
            </div>
        </form>

        {% include 'django_sonar/requests/table.html' %}

    </div>
</div>