{% macro render_functions(functions, path_prefix='') %}
<div class="pl-4">
    {% for name, children in functions.items() %}
    {% if children['_is_function'] is not defined %}
    <details class="group" {% if path_prefix=='' %}open{% endif %}>
        <summary
            class="flex items-center gap-2 py-2 cursor-pointer text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium">
            <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 text-gray-400 dark:text-gray-500 group-open:rotate-90 transition-transform">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
            <span>{{ name }}</span>
        </summary>
        <div class="ml-4 border-l border-gray-200 dark:border-gray-700">
            {{ render_functions(children, path_prefix + name + '/') }}
        </div>
    </details>
    {% else %}
    {% set function = children %}
    <div
        class="flex items-center gap-2 py-2 pl-5 text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md">
        <div class="flex-grow flex items-center gap-2 cursor-pointer"
            hx-get="{{ url_for('http.editor', function_id=function['id']) }}" hx-target="#container" hx-swap="innerHTML"
            hx-push-url="true">
            {% if function.is_public %}
            <span
                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                <svg class="w-2 h-2 mr-1.5 fill-current" viewBox="0 0 8 8">
                    <circle cx="4" cy="4" r="3" />
                </svg>
                Public
            </span>
            {% endif %}
            <span class="font-medium">{{ function.name.split('/')[-1] }}</span>
            <span
                class="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 text-xs font-medium px-2.5 py-0.5 rounded-full">
                v{{ function.version_number }}
            </span>
            <span
                class="bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 text-xs font-medium px-2.5 py-0.5 rounded-full uppercase">
                {{ function.runtime }}
            </span>
            <span
                class="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 text-xs font-medium px-2.5 py-0.5 rounded-full">
                {{ function.invoked_count }}
            </span>
        </div>
        <div class="flex-shrink-0 flex items-center gap-2">
            <button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                hx-get="{{ url_for('http.logs', function_id=function['id']) }}" hx-target="#container"
                hx-swap="innerHTML" hx-push-url="true">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
            </button>
            <button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                hx-get="{{ url_for('http.client', function_id=function['id']) }}" hx-target="#container"
                hx-swap="innerHTML" hx-push-url="true">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </button>
            <a href="{{ url_for('execute_http_function', user_id=function.user_id, function=function.name) }}"
                target="_blank" class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                </svg>
            </a>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% endmacro %}