{{ define "_editor" }}
<div class="rounded-md border border-1 border-gray-200 dark:border-gray-700 editor"{{ if .Binary }} data-binary-original-name="{{ .Filename }}"{{ end }}>
    <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 rounded-r-none focus-within:z-10 gist-title" autocomplete="off" data-lpignore data-bwignore data-1p-ignore>
            <button style="line-height: 0.05em" class="delete-file -ml-px relative inline-flex items-center space-x-2 px-4 py-2 border text-rose-600 dark:text-rose-400 border-gray-200 dark:border-gray-700 text-sm font-medium rounded-r-md bg-gray-50 dark:bg-gray-800 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: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>
        {{ if not .Binary }}
        <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>
        {{ end }}
    </div>
    {{ if not .Binary }}
        <input type="hidden" value="{{ .Content }}" name="content" class="form-filecontent" autocomplete="off">
        <div class="hidden preview chroma markdown markdown-body p-8"></div>
    {{ else }}
    <div class="text-sm px-4 py-1.5 border-t-1 border-gray-200 dark:border-gray-700">
        {{ $.locale.Tr "gist.file-binary-edit" }}
    </div>
    {{ end }}
</div>
{{ end }}