# API Endpoints

<style>
{% for stylesheet in stylesheets %}
@import url("{{ stylesheet|safe }}");
{% endfor %}
</style>

{% for script in scripts %}
<script src="{{ script|safe }}" defer></script>
{% endfor %}

{% if enable_auto_auth %}
<script{% if request.csp_nonce %} nonce="{{ request.csp_nonce }}"{% endif %}>
    // Auto-authentication configuration
    window.DRF_TO_MKDOC_AUTH_CONFIG = {
        enabled: {{ enable_auto_auth|yesno:"true,false" }},
    };
    {% if auth_function_js %}
    {{ auth_function_js|safe }}
    {% endif %}
</script>
{% endif %}

<div class="main-content">
    {% include "endpoints/list/filter_section.html" %}
    {% include "endpoints/list/settings_modal.html" %}
    <div class="empty-state" id="empty-state" style="display: none;" role="status" aria-live="polite">
        <div class="empty-state-icon" aria-hidden="true">🔍</div>
        <h3 class="empty-state-title">No endpoints found</h3>
        <button class="empty-state-button" onclick="clearFilters()" aria-label="Clear all filters to show all endpoints">Clear all filters</button>
    </div>
    {% for app_name, endpoints in endpoints_by_app.items %}
        <div class="app-section">
            <h2>{{ app_name|title }}</h2>
            <div class="endpoints-grid">
                {% for endpoint in endpoints %}
                    {% include "endpoints/list/endpoint_card.html" %}
                {% endfor %}
            </div>
        </div>
    {% endfor %}
</div>