{{ template "header" .}}
<div class="py-10">
    <header>

        <h1 class="text-2xl font-bold leading-tight text-slate-300">
            New Gist
        </h1>

    </header>
    <main class="mt-4">
        <form id="create" class="space-y-4" method="post" action="/">
            <div class="grid grid-cols-12 gap-x-4">
                <div class="col-span-4">
                    <div class="mt-1">
                        <input type="text" placeholder="Title" name="title" id="title" class="bg-black shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-700 rounded-md">
                    </div>
                </div>
                <div class="col-span-8">
                    <div class="mt-1">
                        <input type="text" placeholder="Description" name="description" id="description" class="bg-black shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-700 rounded-md">
                    </div>
                </div>

            </div>
            <div id="editors" class="space-y-4">
                <div class="rounded-md border border-1 border-gray-700 editor">
                    <div class="border-b-1 border-gray-700 bg-gray-800 my-auto flex">
                        <p class="mx-2 my-2 inline-flex">
                            <input type="text" name="name" placeholder="Filename with extension" style="line-height: 0.05em" class="form-filename bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-700 rounded-md">
                        </p>
                        <div class="mx-2 my-2 inline-flex ml-auto space-x-2">
                            <select class="editor-indent-type whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
                                <optgroup label="Indent mode">
                                    <option value="space">Space</option>
                                    <option value="tab">Tabs</option>
                                </optgroup>
                            </select>
                            <select class="editor-indent-size whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
                                <optgroup label="Indent size">
                                    <option value="2">2</option>
                                    <option value="4">4</option>
                                    <option value="8">8</option>
                                </optgroup>
                            </select>
                            <select class="editor-wrap-mode whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8  text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
                                <optgroup label="Wrap mode">
                                    <option value="no">No wrap</option>
                                    <option value="soft">Soft wrap</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <input type="hidden" value="" name="content" class="form-filecontent">
                </div>
            </div>

            <div class="flex">
                <button type="button" id="add-file" class="inline-flex items-center px-4 py-2 border border-transparent border-gray-700 text-sm font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Add file</button>
                <button type="submit" name="private" value="1" class="ml-auto inline-flex items-center px-4 py-2 border border-transparent border-gray-700 text-sm font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Create unlisted gist</button>
                <button type="submit" name="private" value="0" class="ml-2 inline-flex items-center px-4 py-2 border border-transparent border-gray-700 text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">Create public gist</button>
            </div>
            {{ .csrfHtml }}
        </form>

    </main>
</div>

<script type="module" src="{{ asset "editor.ts" }}"></script>

{{ template "footer" .}}