{% extends 'dashboard.html' %}

{% block page %}

{% import 'dashboard/http_functions/_function_list.html' as list_macros %}

<div class="px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">HTTP Functions</h1>
        <div class="flex gap-2">
            <button id="toggle-btn" onclick="toggleAllDetails()"
                class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 font-medium rounded-lg transition-colors duration-200">
                Expand All
            </button>
            <button
                class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-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" />
                </svg>
                Add Function
            </button>
        </div>
    </div>

    <div id="function-list"
        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden min-h-[200px] p-4">
        {% if http_functions %}
        {{ list_macros.render_functions(http_functions) }}
        {% else %}
        <div class="text-center py-16">
            <p class="text-gray-500 dark:text-gray-400 text-lg">No functions found</p>
            <p class="text-gray-400 dark:text-gray-500 text-sm mt-2">Click the "Add Function" button to create your
                first function</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
    function toggleAllDetails() {
        const btn = document.getElementById('toggle-btn');
        const details = document.querySelectorAll('details');
        const isExpanding = btn.textContent.trim() === 'Expand All';

        details.forEach(detail => {
            if (isExpanding) {
                detail.setAttribute('open', '');
            } else {
                detail.removeAttribute('open');
            }
        });

        btn.textContent = isExpanding ? 'Collapse All' : 'Expand All';
    }

    // Reset button state when HTMX updates the list
    document.body.addEventListener('htmx:afterSwap', function (evt) {
        if (evt.detail.target.id === 'function-list') {
            const btn = document.getElementById('toggle-btn');
            if (btn) {
                btn.textContent = 'Expand All';
            }
        }
    });
</script>

{% endblock %}