{{ define "_editor" }}
<div class="rounded-md border border-1 border-gray-200 dark:border-gray-700 editor">
    <div class="border-b-1 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 my-auto flex">
        <p class="mx-2 my-2 inline-flex">
            <input type="text" name="name" value="{{ .Filename }}" placeholder="{{ $.locale.Tr "gist.new.filename-with-extension" }}" style="line-height: 0.05em" class="form-filename bg-white dark:bg-gray-900 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 gist-title" autocomplete="off" data-lpignore data-bwignore data-1p-ignore>
            <button style="line-height: 0.05em" class="hidden delete-file -ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-r-md text-slate-700 dark:text-slate-300 bg-gray-50 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-900 focus:outline-none" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
            </button>
        </p>
        <button type="button" class="md-preview hidden whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 my-2 px-2 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">{{ $.locale.Tr "gist.new.preview" }}</button>
        <div class="hidden mx-2 my-2 sm:inline-flex ml-auto space-x-2">
            <select class="editor-indent-type whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
                <optgroup label="{{ $.locale.Tr "gist.new.indent-mode" }}">
                <option value="space">{{ $.locale.Tr "gist.new.indent-mode-space" }}</option>
                <option value="tab">{{ $.locale.Tr "gist.new.indent-mode-tab" }}</option>
                </optgroup>
            </select>
            <select class="editor-indent-size whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
                <optgroup label="{{ $.locale.Tr "gist.new.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-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 pr-8  text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
                <optgroup label="{{ $.locale.Tr "gist.new.wrap-mode" }}">
                <option value="no">{{ $.locale.Tr "gist.new.wrap-mode-no" }}</option>
                <option value="soft">{{ $.locale.Tr "gist.new.wrap-mode-soft" }}</option>
                </optgroup>
            </select>
        </div>
    </div>
    <input type="hidden" value="{{ .Content }}" name="content" class="form-filecontent" autocomplete="off">
    <div class="hidden preview chroma markdown markdown-body p-8"></div>
</div>
{{ end }}