{{ define "fragments/markdownEditor" }}
    {{ $name        := .Name        }}
    {{ $value       := .Value       }}
    {{ $blobName    := .BlobName    }}
    {{ $blobValues  := .BlobValues  }}
    {{ $rows        := (or .Rows 5) }}
    {{ $required    := .Required    }}
    {{ $autofocus   := .AutoFocus   }}
    {{ $placeholder := .Placeholder }}
    <markdown-editor
        class="flex flex-col gap-2"
        hx-disinherit="*"
    >
        {{ $tabClasses := "group flex items-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline data-[active=true]:bg-white data-[active=true]:dark:bg-gray-800 data-[active=true]:shadow-sm data-[active=true]:cursor-default data-[active=false]:hover:text-gray-900 data-[active=false]:dark:hover:text-white" }}
        <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 self-start border dark:border-gray-700">
            <button type="button" data-md-mode="write"
                data-active="true"
                class="{{ $tabClasses }}">
                {{ i "pencil" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
                Write
            </button>
            <button type="button" data-md-mode="preview"
                data-active="false"
                hx-post="/markup/preview"
                hx-vals='js:{body: this.closest("markdown-editor").querySelector("textarea").value}'
                hx-params="body"
                hx-target="next [data-md-preview]"
                hx-swap="innerHTML"
                hx-indicator="this"
                hx-disabled-elt="this"
                class="{{ $tabClasses }}">
                {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
                {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }}
                Preview
            </button>
        </div>
        <div data-md-panel="write">
            <textarea
                name="{{ $name }}"
                rows="{{ $rows }}"
                class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
                {{if $required}}required{{end}}
                {{if $autofocus}}autofocus{{end}}
                placeholder="{{ $placeholder }}"
            >{{with $value}}{{.}}{{end}}</textarea>
        </div>
        <div data-md-panel="preview" class="hidden">
            <div data-md-preview class="min-h-[6rem] p-3 border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900/30">
                <span class="text-gray-400 dark:text-gray-500 italic">Loading preview...</span>
            </div>
        </div>
    </markdown-editor>
{{ end }}