{% extends 'dashboard.html' %}

{% block page %}

<div class="flex items-center" data-id="51">
    <h1 class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">HTTP functions</h1>
    <button
        class="bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded flex mr-2 items-center ml-auto"
        hx-get="{{ url_for('get_http_function_add_form') }}" hx-target="#container" hx-swap="innerHTML"
        hx-push-url="true">
        <span class="sr-only" data-id="4">Bold</span>
        <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" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
        </svg>
        <span class="ml-1">Add Function</span>
    </button>
</div>
<div class="border shadow-sm rounded-lg" data-id="54">
    <div class="relative w-full overflow-auto">
        <table class="w-full caption-bottom text-sm" data-id="55">
            <thead class="[&amp;_tr]:border-b" data-id="56">
                <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" data-id="57">
                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800"
                        data-id="59">Name</th>
                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800 hidden md:table-cell"
                        data-id="60">URL</th>
                    <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-gray-800"
                        data-id="61">Actions</th>
                </tr>
            </thead>
            <tbody class="[&amp;_tr:last-child]:border-0" data-id="62">
                {% for function in http_functions %}
                <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" data-id="63">
                    <td
                        class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium flex items-center space-x-1">
                        <span class="text-gray-800 text-base text-md">{{ function.name }}</span>
                        <span class="bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded flex items-center">
                            #{{ function.invoked_count }}
                        </span>
                        <span class="bg-blue-500 text-white text-xs font-semibold px-2 py-1 rounded">
                            v{{ function.version_number }}
                        </span>
                        {% if function.is_public %}
                        <span class="ml-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" data-slot="icon" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                            </svg>

                        </span>
                        {% endif %}

                    </td>
                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 hidden md:table-cell" data-id="67">
                        <a
                            href="{{ url_for('execute_http_function', user_id=function.user_id, function=function.name) }}">{{
                            url_for('execute_http_function', user_id=function.user_id, function=function.name) }}</a>
                        <button
                            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground pl-1 text-gray-600 dark:text-gray-400"
                            data-id="24"><span class="sr-only" data-id="25">Add Link</span><svg
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="w-4 h-4" data-id="26" data-darkreader-inline-stroke=""
                                style="--darkreader-inline-stroke: currentColor;">
                                <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></button>
                    </td>
                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0" data-id="68">
                        <div class="flex gap-1">
                            <button
                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
                                hx-get="{{ url_for('get_http_function_logs', function_id=function.id) }}"
                                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                Logs
                            </button>
                            <button
                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
                                hx-get="{{ url_for('http_function_editor', function_id=function.id) }}"
                                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
                                Edit
                            </button>
                            <button
                                class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
                                hx-get="{{ url_for('client', function_id=function.id) }}" hx-target="#container"
                                hx-swap="innerHTML" hx-push-url="true">
                                Try
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}

                {% if http_functions|length == 0 %}
                <div class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" data-id="63">
                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 font-medium flex items-center"
                        colspan="3">
                        <span class="text-lg">No functions found</span>
                    </td>
                </div>
                {% endif %}

            </tbody>
        </table>
    </div>
</div>

{% endblock %}