{% extends 'dashboard.html' %}

{% block page %}

<div class="px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex items-center mb-6" data-id="51">
        <h1 class="text-2xl font-bold text-gray-900">HTTP Functions</h1>
        <button
            class="inline-flex items-center px-4 py-2 ml-auto bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200"
            hx-get="{{ url_for('http.new') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-5 h-5 mr-2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
            </svg>
            Add Function
        </button>
    </div>

    <div class="mb-6">
        <input type="text" name="q" placeholder="Search functions..."
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
            value="{{ search_query }}" hx-get="{{ url_for('http.overview') }}" hx-trigger="keyup changed delay:500ms"
            hx-target="#function-list" hx-headers='{"HX-Target": "function-list"}' hx-push-url="true">
    </div>

    <div id="function-list">
        {% block function_list %}
        {% from 'dashboard/http_functions/_function_list.html' import render_functions %}
        {{ render_functions(http_functions) }}

        {% if http_functions|length == 0 %}
        <div class="py-12">
            <div class="text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    aria-hidden="true">
                    <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                </svg>
                <h3 class="mt-2 text-lg font-medium text-gray-900">No functions found</h3>
                <p class="mt-1 text-sm text-gray-500">Get started by creating a new function.</p>
            </div>
        </div>
        {% endif %}
        {% endblock %}
    </div>
</div>

{% endblock %}