{% extends 'base.html' %}

{% block content %}

<div class="flex items-center pb-4" data-id="51">
    <h1 class="font-semibold text-lg md:text-2xl" data-id="52">Try: {{ name }}</h1>
    <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 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
        hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML">
        Cancel
    </button>
</div>

<div class="mx-auto w-full">
    <form class="flex"><select
            class="px-4 py-2 border rounded-md border-gray-300 hover:border-orange-500 focus:outline-none bg-gray-100"
            name="method">
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="PUT">PUT</option>
            <option value="PATCH">PATCH</option>
            <option value="DELETE">DELETE</option>
        </select><input
            class="ml-3 w-full px-4 py-2 border rounded-md border-gray-300 hover:border-orange-500 focus:outline-orange-500"
            name="url" value="{{ url }}"><button
            class="ml-3 px-6 py-2 rounded-md font-semibold text-white bg-orange-500 hover:bg-orange-600" type="button"
            id="send-request">Send</button></form>
    <div class="react-tabs" data-rttabs="true">
        <ul class="flex mt-5 border border-gray-300 rounded-t-lg" role="tablist">
            <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none 
            hover:text-orange-500 cursor-pointer" role="tab" id="tab:r0:0" aria-selected="true" aria-disabled="false"
                aria-controls="panel:r0:0" tabindex="0" data-rttab="true">Query Params</li>
            <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none 
    hover:text-orange-500 cursor-pointer" role="tab" id="tab:r0:1" aria-selected="false" aria-disabled="false"
                aria-controls="panel:r0:1" data-rttab="true">Headers</li>
            <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none 
            hover:text-orange-500 cursor-pointer border-b-2 text-orange-600" role="tab" id="tab:r0:2"
                aria-selected="false" aria-disabled="false" aria-controls="panel:r0:2" data-rttab="true">Body</li>
        </ul>
        <div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300 react-tabs__tab-panel--selected hidden"
            role="tabpanel" id="panel:r0:0" aria-labelledby="tab:r0:0">
            <div class="">
                <div class="flex mb-3"><input
                        class="px-4 py-1.5 w-full border border-gray-300 rounded-md  hover:border-orange-500 focus:outline-orange-500"
                        placeholder="Key" name="keyItem" value="Content-Type"><input
                        class="ml-3 px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
                        placeholder="Value" name="valueItem" value="application/json"><button
                        class="ml-4 px-4 rounded-md text-red-500 border border-red-300 hover:bg-red-100">Remove</button>
                </div><button
                    class="px-6 py-1 rounded-md text-orange-600 border border-orange-400 hover:bg-orange-100">Add</button>
            </div>
        </div>
        <div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300 hidden"
            role="tabpanel" id="panel:r0:1" aria-labelledby="tab:r0:1">
            <div class="">
                <div class="flex mb-3"><input
                        class="px-4 py-1.5 w-full border border-gray-300 rounded-md  hover:border-orange-500 focus:outline-orange-500"
                        placeholder="Key" name="keyItem"><input
                        class="ml-3 px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
                        placeholder="Value" name="valueItem"><button
                        class="ml-4 px-4 rounded-md text-red-500 border border-red-300 hover:bg-red-100">Remove</button>
                </div><button
                    class="px-6 py-1 rounded-md text-orange-600 border border-orange-400 hover:bg-orange-100">Add</button>
            </div>
        </div>
        <div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300" role="tabpanel"
            id="panel:r0:2" aria-labelledby="tab:r0:2">
            <div>
                <textarea id="request-body" rows="4"
                    class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Request body"></textarea>

            </div>
        </div>
    </div>
    <div class="my-4"><span class="text-2xl font-medium">Response</span>
        <div class="react-tabs" data-rttabs="true">
            <ul class="flex mt-5 border border-gray-300 rounded-t-lg" role="tablist">
                <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer border-b-2 text-orange-600"
                    role="tab" id="tab:r1:0" aria-selected="true" aria-disabled="false" aria-controls="panel:r1:0"
                    tabindex="0" data-rttab="true">Response Body</li>
                <li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer"
                    role="tab" id="tab:r1:1" aria-selected="false" aria-disabled="false" aria-controls="panel:r1:1"
                    data-rttab="true">Response Header</li>
            </ul>
            <div class="px-4 py-4 rounded-b-lg border border-t-0 border-gray-300">
                <div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="panel:r1:0"
                    aria-labelledby="tab:r1:0">
                    <code id="response-body"></code>
                </div>
                <div class="react-tabs__tab-panel hidden" role="tabpanel" id="panel:r1:1" aria-labelledby="tab:r1:1">
                    <table class="text-left">
                        <thead>
                            <tr>
                                <th class="w-36 pb-1.5">Key</th>
                                <th class="w-60">Value</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        const send_request_btn = document.getElementById('send-request');
        const response_body_el = document.getElementById('response-body');

        send_request_btn.addEventListener('click', () => {
            const url = document.querySelector('input[name="url"]').value;
            const method = document.querySelector('select[name="method"]').value;
            let body = document.getElementById('request-body').value;
            // If get or head then dont add body
            if (method === 'GET' || method === 'HEAD') {
                body = null;
            }

            fetch(url, {
                method,
                body,
                headers: {
                }
            })
                .then(response => response.text())
                .then(text => {
                    response_body_el.innerText = text;
                });

        })
    })();
</script>

{% endblock %}