{% extends 'base.html' %}

{% block content %}

<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">
            <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"
            value="https://function.peterstockings.com/f/helloworld"><button
            class="ml-3 px-6 py-2 rounded-md font-semibold text-white bg-orange-500 hover:bg-orange-600"
            type="button">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 border-b-2 text-orange-600" 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" 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"
            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"><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: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>
                <div class="cm-editor cm-wrap ͼ1 ͼ2 ͼ4">
                    <div aria-live="polite" style="position: absolute; top: -10000px;"></div>
                    <div tabindex="-1" class="cm-scroller">
                        <div class="cm-gutters" aria-hidden="true" style="position: sticky; min-height: 42px;">
                            <div class="cm-gutter cm-lineNumbers">
                                <div class="cm-gutterElement"
                                    style="height: 0px; visibility: hidden; pointer-events: none;">9</div>
                                <div class="cm-gutterElement cm-activeLineGutter" style="height: 14px;">1</div>
                                <div class="cm-gutterElement" style="height: 14px;">2</div>
                                <div class="cm-gutterElement" style="height: 14px;">3</div>
                            </div>
                            <div class="cm-gutter cm-foldGutter">
                                <div class="cm-gutterElement"
                                    style="height: 0px; visibility: hidden; pointer-events: none;"><span
                                        title="Unfold line">›</span></div>
                                <div class="cm-gutterElement cm-activeLineGutter" style="height: 14px;"></div>
                            </div>
                        </div>
                        <div spellcheck="false" autocorrect="off" autocapitalize="off" contenteditable="true"
                            class="cm-content" style="tab-size: 2" role="textbox" aria-multiline="true"
                            aria-autocomplete="list">
                            <div class="cm-activeLine cm-line">{</div>
                            <div class="cm-line"> </div>
                            <div class="cm-line">}</div>
                        </div>
                        <div class="cm-selectionLayer" aria-hidden="true"></div>
                        <div class="cm-cursorLayer" aria-hidden="true" style="animation-duration: 1200ms;">
                            <div class="cm-cursor cm-cursor-primary" style="left: 0px; top: 0px; height: 0px;"></div>
                        </div>
                    </div>
                </div>
            </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">
                    <div>
                        <div class="cm-editor cm-wrap ͼ1 ͼ2 ͼ4">
                            <div aria-live="polite" style="position: absolute; top: -10000px;"></div>
                            <div tabindex="-1" class="cm-scroller">
                                <div class="cm-gutters" aria-hidden="true"
                                    style="position: sticky; min-height: 26.1979px;">
                                    <div class="cm-gutter cm-lineNumbers">
                                        <div class="cm-gutterElement"
                                            style="height: 0px; visibility: hidden; pointer-events: none;">9</div>
                                        <div class="cm-gutterElement cm-activeLineGutter"
                                            style="height: 18.1979px; margin-top: 4px;">1</div>
                                    </div>
                                    <div class="cm-gutter cm-foldGutter">
                                        <div class="cm-gutterElement"
                                            style="height: 0px; visibility: hidden; pointer-events: none;"><span
                                                title="Unfold line">›</span></div>
                                        <div class="cm-gutterElement cm-activeLineGutter"
                                            style="height: 18.1979px; margin-top: 4px;"></div>
                                    </div>
                                </div>
                                <div spellcheck="false" autocorrect="off" autocapitalize="off" contenteditable="false"
                                    class="cm-content" style="tab-size: 2" role="textbox" aria-multiline="true"
                                    aria-autocomplete="list">
                                    <div class="cm-activeLine cm-line">{}</div>
                                </div>
                                <div class="cm-selectionLayer" aria-hidden="true"></div>
                                <div class="cm-cursorLayer" aria-hidden="true" style="animation-duration: 1200ms;">
                                    <div class="cm-cursor cm-cursor-primary"
                                        style="left: 33.8229px; top: 5.33334px; height: 15.3333px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="react-tabs__tab-panel" 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>

{% endblock %}