{{ template "header" .}}
<div class="py-10">
    <header>
        <div class="flex flex-col lg:flex-row">
            <div>
                <h1 class="text-2xl font-bold leading-tight text-slate-700 dark:text-slate-300">
                    {{ .locale.Tr "gist.edit.editing" }} {{ .gist.Title }}
                </h1>
            </div>
            <div class="lg:flex-row flex py-2 lg:py-0 lg:ml-auto">
                <form id="visibility" class="flex items-center whitespace-nowrap" method="post" action="{{ $.c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/visibility">
                    {{ .csrfHtml }}
                    <div class="ml-auto inline-flex ">
                        <button id="submit-gist" type="submit" name="private" value="0" class="ml-auto relative inline-flex items-center space-x-2 rounded-l-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2 py-1.5 text-xs font-medium text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 leading-3">{{ .locale.Tr "gist.edit.change-visibility" }} {{ .locale.Tr "gist.public" }}</button>
                        <div class="relative -ml-px block">
                            <button type="button" class="ml-auto relative inline-flex items-center space-x-2 rounded-r-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2 py-1.5 text-xs font-medium text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 leading-3" id="gist-visibility-menu-button">
                                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                                </svg>
                            </button>
                            <div id="gist-menu-visibility" class="hidden absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="gist-visibility-menu-button">
                                <div class="rounded-md dark:bg-gray-800 bg-white shadow-lg ring-1 ring-gray-50 dark:ring-gray-700 focus:outline-none" role="none" style="word-break: keep-all">
                                    <span class="text-gray-700 block px-4 py-2 text-sm cursor-pointer dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-400 gist-visibility-option" data-btntext="{{ .locale.Tr "gist.edit.change-visibility" }} {{ .locale.Tr "gist.public" }}" data-visibility="0" role="menuitem">{{ .locale.Tr "gist.public" }}</span>
                                    <span class="text-gray-700 block px-4 py-2 text-sm cursor-pointer dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-400 gist-visibility-option" data-btntext="{{ .locale.Tr "gist.edit.change-visibility" }} {{ .locale.Tr "gist.unlisted" }}" data-visibility="1" role="menuitem">{{ .locale.Tr "gist.unlisted" }}</span>
                                    <span class="text-gray-700 block px-4 py-2 text-sm cursor-pointer dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-400 gist-visibility-option" data-btntext="{{ .locale.Tr "gist.edit.change-visibility" }} {{ .locale.Tr "gist.private" }}" data-visibility="2" role="menuitem">{{ .locale.Tr "gist.private" }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <form id="delete" class="ml-2 flex items-center" method="post" action="{{ $.c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/delete">
                    {{ .csrfHtml }}
                    <button type="submit" onclick="return confirm('{{ .locale.Tr "gist.delete.confirm" }}')" class="relative inline-flex items-center space-x-2 rounded-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2 py-1.5 text-xs font-medium text-rose-600 dark:text-rose-400 hover:bg-rose-500 hover:text-white dark:hover:bg-rose-600 hover:border-rose-600 dark:hover:border-rose-700 dark:hover:text-white focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                        {{ .locale.Tr "gist.edit.delete" }}
                    </button>
                </form>
            </div>
        </div>
    </header>
    <main class="mt-4">
        <form id="create" class="space-y-4" method="post" action="{{ $.c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/edit">
            <div>
                <p class="cursor-pointer select-none" id="gist-metadata-btn">Metadata {{ if .dto.HasMetadata }}▲{{ else }}▼{{ end }}</p>
                <div class="grid grid-cols-12 gap-x-4 mt-1 {{ if not .dto.HasMetadata }}hidden{{ end }}" id="gist-metadata">
                    <div class="col-span-8 sm:col-span-4">
                        <div class="mt-1">
                            <input type="text" value="{{ .dto.Title }}" placeholder="{{ .locale.Tr "gist.new.title" }}" name="title" id="title" class="bg-white dark:bg-black shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-md" maxlength="250">
                        </div>
                    </div>
                    <div class="col-span-12 sm:col-span-8">
                        <div class="mt-1">
                            <input type="text" value="{{ .dto.Description }}"  placeholder="{{ .locale.Tr "gist.new.description" }}" name="description" id="description" class="bg-white dark:bg-black shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-md" maxlength="1000">
                        </div>
                    </div>
                    <div class="col-span-6 sm:col-span-3 mt-2">
                        <input type="text" value="{{ .dto.URL }}"  placeholder="{{ .locale.Tr "gist.new.url" }}" name="url" id="url" class="bg-white dark:bg-black shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-md" maxlength="32">
                    </div>
                    <div class="col-span-12 sm:col-span-9 mt-2">
                        <input type="text" value="{{ .dto.Topics }}"  placeholder="{{ .locale.Tr "gist.new.topics" }}" name="topics" id="topics" class="bg-white dark:bg-black shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-md">
                    </div>
                </div>
            </div>
            <div id="editors" class="space-y-4">
                {{ if .dto.Files }}
                    {{ range .dto.Files }}
                        {{ template "_editor" dict "Filename" .Filename "Content" .Content "Binary" .Binary "locale" $.locale }}
                    {{ end }}
                {{ else }}
                    {{ template "_editor" . }}
                {{ end }}
            </div>
            <div id="file-upload-zone" class="space-y-4">
                <label for="file-upload" class="cursor-pointer block">
                    <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center hover:border-primary-400 dark:hover:border-primary-500 transition-colors">
                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="mt-4">
                            <span class="mt-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
                                {{ .locale.Tr "gist.new.drop-files" }}
                            </span>
                        </div>
                        <p class="mt-2 text-xs text-gray-500">{{ .locale.Tr "gist.new.any-file-type" }}</p>
                    </div>
                    <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple accept="*/*">
                </label>
                <div id="uploaded-files" class="space-y-2"></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-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-gray-700 dark:text-white bg-gray-100 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">{{ .locale.Tr "gist.new.add-file" }}</button>
                <a href="{{ $.c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}" class="ml-auto inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm bg-gray-100 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 text-rose-600 dark:text-rose-400 hover:text-rose-700">{{ .locale.Tr "gist.edit.cancel" }}</a>
                <button type="submit" class="ml-2 inline-flex items-center px-4 py-2 border border-transparent border-gray-200 dark:border-gray-700 text-sm font-medium rounded-md shadow-sm text-white dark:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">{{ .locale.Tr "gist.edit.save" }}</button>
            </div>
            {{ .csrfHtml }}
        </form>

        <!-- Hidden template for new text editors -->
        <div id="editor-template" class="hidden">
            {{ template "_editor" dict "Filename" "" "Content" "" "Binary" false "locale" .locale }}
        </div>

    </main>
</div>

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

{{ template "footer" .}}