{{ define "content" }}
<div class="space-y-5">
    <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "gist.new.new_gist" }}</h1>

    <form id="create" hx-boost="false" method="post" action="{{ .c.ExternalUrl }}/">
        {{ .csrfHtml }}

        <!-- Two columns: file editors on the left, settings panel on the right. -->
        <div class="grid grid-cols-1 items-start gap-5 lg:grid-cols-[minmax(0,1fr)_20rem]">

            <!-- Main column: file editors -->
            <div class="min-w-0 space-y-4">
                <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" dict "Filename" "" "Content" "" "Binary" false "locale" .locale }}
                    {{ end }}
                </div>

                <button type="button" id="add-file" class="btn-outline">
                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                    {{ .locale.Tr "gist.new.add-file" }}
                </button>

                {{ if not .c.DisableFileUpload }}
                <div id="file-upload-zone" class="space-y-3">
                    <label for="file-upload" class="block cursor-pointer">
                        <div class="border-border hover:border-primary flex flex-col items-center rounded-lg border-2 border-dashed p-6 text-center transition-colors">
                            <svg class="text-muted-foreground size-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
                            <span class="mt-3 text-sm font-medium">{{ .locale.Tr "gist.new.drop-files" }}</span>
                            <span class="text-muted-foreground mt-1 text-xs">{{ .locale.Tr "gist.new.any-file-type" }}</span>
                        </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>
                {{ end }}
            </div>

            <!-- Settings column -->
            <aside class="space-y-4 lg:sticky lg:top-16">
                <div class="bg-card space-y-4 rounded-lg border p-4">
                    <div class="space-y-1.5">
                        <label for="title" class="text-xs font-medium">{{ .locale.Tr "gist.new.title" }}</label>
                        <input type="text" name="title" id="title" maxlength="250" value="{{ .dto.Title }}" placeholder="{{ .locale.Tr "gist.new.title" }}" class="input h-9 w-full" />
                    </div>
                    <div class="space-y-1.5">
                        <label for="url" class="text-xs font-medium">{{ .locale.Tr "gist.new.url" }}</label>
                        <div class="flex">
                            <span class="border-input bg-muted text-muted-foreground inline-flex h-9 items-center whitespace-nowrap rounded-l-md border border-r-0 px-2 text-sm">{{ .userLogged.Username }}/</span>
                            <input type="text" name="url" id="url" maxlength="32" value="{{ .dto.URL }}" placeholder="{{ .locale.Tr "gist.new.url" }}" class="input h-9 w-full rounded-l-none" />
                        </div>
                    </div>
                    <div class="space-y-1.5">
                        <label for="description" class="text-xs font-medium">{{ .locale.Tr "gist.new.description" }}</label>
                        <textarea name="description" id="description" maxlength="1000" rows="3" placeholder="{{ .locale.Tr "gist.new.description" }}" class="input w-full resize-y">{{ .dto.Description }}</textarea>
                    </div>
                    <div class="space-y-1.5">
                        <label for="topics" class="text-xs font-medium">{{ .locale.Tr "gist.new.topics" }}</label>
                        <input type="text" name="topics" id="topics" value="{{ .dto.Topics }}" placeholder="{{ .locale.Tr "gist.new.topics" }}" class="input h-9 w-full" />
                    </div>

                    <div class="space-y-1.5">
                        <label for="expire" class="text-muted-foreground inline-flex items-center gap-1.5 text-xs font-medium">
                            <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                            {{ .locale.Tr "gist.new.expire" }}
                        </label>
                        <select name="expire" id="expire" class="border-input bg-background h-9 w-full rounded-md border px-2 text-sm"
                                _="on change if my value is 'custom' remove .hidden from #expire_at else add .hidden to #expire_at end">
                            <option value="never" {{ if or (not .dto.Expire) (eq (toStr .dto.Expire) "never") }}selected{{ end }}>{{ .locale.Tr "gist.new.expire-never" }}</option>
                            <option value="1hour" {{ if eq (toStr .dto.Expire) "1hour" }}selected{{ end }}>{{ .locale.Tr "gist.new.expire-1hour" }}</option>
                            <option value="12hours" {{ if eq (toStr .dto.Expire) "12hours" }}selected{{ end }}>{{ .locale.Tr "gist.new.expire-12hours" }}</option>
                            <option value="1day" {{ if eq (toStr .dto.Expire) "1day" }}selected{{ end }}>{{ .locale.Tr "gist.new.expire-1day" }}</option>
                            <option value="7days" {{ if eq (toStr .dto.Expire) "7days" }}selected{{ end }}>{{ .locale.Tr "gist.new.expire-7days" }}</option>
                            <option value="15days" {{ if eq (toStr .dto.Expire) "15days" }}selected{{ end }}>{{ .locale.Tr "gist.new.expire-15days" }}</option>
                            <option value="custom" {{ if eq (toStr .dto.Expire) "custom" }}selected{{ end }}>{{ .locale.Tr "gist.new.expire-custom" }}</option>
                        </select>
                        <input type="datetime-local" name="expire_at" id="expire_at" value="{{ .dto.ExpireAt }}" class="border-input bg-background mt-2 h-9 w-full rounded-md border px-2 text-sm {{ if ne (toStr .dto.Expire) "custom" }}hidden{{ end }}">
                    </div>
                </div>

                <!-- Submit + visibility selector -->
                <input type="hidden" name="private" id="gist-visibility" value="0">
                <div class="inline-flex w-full">
                    <button type="submit" id="create-btn" class="btn flex-1 rounded-r-none">{{ .locale.Tr "gist.new.create-public-button" }}</button>
                    <div class="dropdown-menu">
                        <button type="button" id="vis-trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="vis-menu" class="btn -ml-px rounded-l-none px-2">
                            <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                        </button>
                        <div id="vis-menu" data-popover aria-hidden="true" data-side="bottom" data-align="end">
                            <div role="menu" aria-labelledby="vis-trigger">
                                <button type="button" role="menuitem" data-private="0" data-label="{{ .locale.Tr "gist.new.create-public-button" }}"
                                        _="on click set #gist-visibility's value to my @data-private then set #create-btn's innerText to my @data-label">{{ .locale.Tr "gist.public" }}</button>
                                <button type="button" role="menuitem" data-private="1" data-label="{{ .locale.Tr "gist.new.create-unlisted-button" }}"
                                        _="on click set #gist-visibility's value to my @data-private then set #create-btn's innerText to my @data-label">{{ .locale.Tr "gist.unlisted" }}</button>
                                <button type="button" role="menuitem" data-private="2" data-label="{{ .locale.Tr "gist.new.create-private-button" }}"
                                        _="on click set #gist-visibility's value to my @data-private then set #create-btn's innerText to my @data-label">{{ .locale.Tr "gist.private" }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

        </div>
    </form>

    <!-- Hidden template cloned by the editor when adding a file -->
    <div id="editor-template" class="hidden">
        {{ template "_editor" dict "Filename" "" "Content" "" "Binary" false "locale" .locale }}
    </div>
</div>

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