{# Email template editor — requires /web/static/dist/mail_editor.js (npm run build:editor).

   One template serves both edit and display modes. Display (readonly) mode
   simply hides the help line, tab strip, toolbar, Write/Source mounts and
   the hidden form input, and the Preview panel is always visible. The
   Alpine component (pvHtmlEditor) starts on tab='preview' when readonly
   and auto-renders on init, so the detail page lands on the live record-
   aware preview without any extra clicks. #}
<div class="pv-html-editor"
     :class="{ 'pv-html-editor--readonly': readonly }"
     x-data="pvHtmlEditor()" data-pv-config="{{ config_b64 }}"
     x-cloak>

    <p x-show="!readonly" class="text-xs text-body-subtle mb-3">
        <strong>Write</strong> — TipTap.
        <strong>HTML source</strong> — same code editor as Code fields (VSCode theme, Ctrl+Space).
        Switch language to <strong>Jinja</strong> for template syntax highlighting.
        Use <strong>Insert variable</strong> or type <code class="font-mono text-2xs">{% raw %}{{ object. }}{% endraw %}</code> in source.
    </p>

    {# Tab strip + variable picker. Only rendered in edit mode — display
       mode is implicitly Preview-only. #}
    <div x-show="!readonly" class="flex flex-wrap items-end gap-3 border-b border-default pb-2 mb-3">
        <div class="flex flex-wrap gap-1" role="tablist">
        {# Tab buttons: @mousedown.prevent keeps the editor selection intact so
           a click on "HTML source" or "Preview" doesn't trigger a ProseMirror
           blur transaction that races against syncAll(). #}
        <button type="button" role="tab" @mousedown.prevent @click="setTab('write')"
                :class="tab === 'write'
                    ? 'bg-fg-brand text-white border-fg-brand'
                    : 'bg-neutral-primary text-body border-default hover:bg-neutral-secondary'"
                class="px-3 py-1.5 text-xs font-medium rounded-md border transition">
            Write
        </button>
        <button type="button" role="tab" @mousedown.prevent @click="setTab('source')"
                :class="tab === 'source'
                    ? 'bg-fg-brand text-white border-fg-brand'
                    : 'bg-neutral-primary text-body border-default hover:bg-neutral-secondary'"
                class="px-3 py-1.5 text-xs font-medium rounded-md border transition">
            HTML source
        </button>
        <button type="button" role="tab" @mousedown.prevent @click="setTab('preview')"
                :class="tab === 'preview'
                    ? 'bg-fg-brand text-white border-fg-brand'
                    : 'bg-neutral-primary text-body border-default hover:bg-neutral-secondary'"
                class="px-3 py-1.5 text-xs font-medium rounded-md border transition">
            Preview
        </button>
        </div>

        {# Variable picker is only useful while editing HTML source — inserting
           {{ … }} into TipTap turns it into stylable text that's easy to
           mangle. Hide it on Write / Preview. #}
        <div class="pv-var-picker relative flex-1 min-w-[14rem] max-w-md ml-auto"
             x-show="showVarPicker()"
             x-cloak
             @click.outside="closeVarPicker()"
             @keydown.escape.prevent.stop="closeVarPicker()">
            <label class="block text-2xs font-medium text-body-subtle mb-1">Insert variable</label>
            <input type="text"
                   x-ref="varInput"
                   x-model="varQuery"
                   :readonly="!mailModel || variablesLoading"
                   :placeholder="varPickerPlaceholder()"
                   @focus="openVarPicker()"
                   @input="openVarPicker(); varCursor = 0"
                   @keydown.arrow-down.prevent="moveVarCursor(1)"
                   @keydown.arrow-up.prevent="moveVarCursor(-1)"
                   @keydown.enter.prevent="pickVarAtCursor()"
                   autocomplete="off"
                   class="w-full border border-default bg-neutral-primary rounded-md px-3 py-1.5
                          text-xs font-mono text-heading focus:outline-none focus:ring-2
                          focus:ring-fg-brand focus:border-fg-brand disabled:opacity-60">
            <div x-show="varPickerOpen"
                 x-cloak
                 x-transition.opacity.duration.100ms
                 class="absolute z-50 left-0 right-0 top-full mt-1 max-h-56 overflow-y-auto
                        bg-neutral-primary border border-default rounded-md shadow-lg text-sm">
                <div x-show="variablesLoading"
                     class="px-3 py-2 text-xs text-body-subtle">Loading fields…</div>
                <div x-show="!mailModel && !variablesLoading"
                     class="px-3 py-2 text-xs text-body-subtle">Select a model above first.</div>
                <div x-show="varPickerNeedQuery() && !variablesLoading"
                     class="px-3 py-2 text-xs text-body-subtle"
                     x-text="'Type to search among ' + variables.length + ' fields'"></div>
                <template x-for="(opt, i) in filteredVarOptions()" :key="opt.value">
                    <button type="button"
                            role="option"
                            @mousedown.prevent
                            @click="pickVar(opt)"
                            @mousemove="varCursor = i"
                            :class="i === varCursor
                                ? 'bg-brand-softer text-fg-brand'
                                : 'text-body hover:bg-neutral-secondary'"
                            class="w-full text-left px-3 py-2 flex flex-col gap-0.5">
                        <span class="font-mono text-xs truncate" x-text="opt.label"></span>
                        <span class="text-2xs text-body-subtle truncate" x-text="opt.detail"></span>
                    </button>
                </template>
                <div x-show="mailModel && !variablesLoading && !varPickerNeedQuery() && filteredVarOptions().length === 0"
                     class="px-3 py-2 text-xs text-body-subtle">No matches.</div>
            </div>
        </div>
    </div>

    {# Write tab — TipTap. Display mode skips this entirely.

       Toolbar styled as an MS Word-shaped ribbon: labeled groups
       separated by hairlines, with related actions consolidated into
       dropdown triggers (Styles ▾, List ▾, Align ▾, Insert ▾) so the
       row stays scannable.

       Every interactive element uses @mousedown.prevent so the editor
       never loses focus on click — a blur fires a ProseMirror selection
       transaction that races our chain().focus().run() and aborts with
       "Applying a mismatched transaction". #}
    <div x-show="!readonly && tab === 'write'" class="pv-rich-text-editor pv-rich-text-editor--simple">
        {% include 'widgets/partials/html_editor_toolbar.html' %}
        <input type="file" x-ref="imageFile" accept="image/*"
               class="hidden" @change="handleImageFile($event)">
        <div class="simple-editor-content" @click.outside="closeMenus()"
             @keydown.escape.prevent.stop="closeMenus()">
            <div x-ref="writeMount"
                 class="pv-tiptap-mount min-h-[20rem]"></div>
        </div>
    </div>

    {# Source tab — same CodeMirror stack as the Code field widget. #}
    <div x-show="!readonly && tab === 'source'" class="pv-code-editor pv-code-editor--embedded">
        <div class="pv-code-editor__header">
            <label class="sr-only" for="pv-html-source-lang">Source language</label>
            <select id="pv-html-source-lang"
                    class="pv-code-editor__lang pv-code-editor__lang-select"
                    x-model="sourceLanguage"
                    @change="applySourceLanguage()">
                <option value="html">html</option>
                <option value="jinja">jinja</option>
            </select>
            <div class="flex items-center gap-1.5">
                <span x-show="sourceFormatError"
                      x-text="sourceFormatError"
                      class="text-2xs text-fg-danger"
                      x-cloak></span>
                <button type="button"
                        class="pv-code-editor__action"
                        @mousedown.prevent
                        @click="formatSourceHtml()"
                        title="Format HTML (indent)">
                    Format
                </button>
                <button type="button"
                        class="pv-code-editor__action"
                        @mousedown.prevent
                        @click="copySource()"
                        :title="sourceCopied ? 'Copied!' : 'Copy HTML source'">
                    <span x-show="!sourceCopied">Copy</span>
                    <span x-show="sourceCopied" x-cloak>Copied</span>
                </button>
            </div>
        </div>
        <div x-ref="sourceMount" class="pv-code-editor__mount pv-code-editor__mount--mail"></div>
    </div>

    {# Preview panel — always visible in display mode; tab-gated in edit
       mode. The record picker is purely model-driven so the same UI works
       in both modes (the component carries the stored subject in cfg so
       the POST payload is correct even with no form input around). #}
    <div x-show="readonly || tab === 'preview'">
        <div x-show="mailModel" class="mb-3">
            <div class="flex flex-wrap items-end gap-3 pv-preview-picker relative"
                 @click.outside="previewPickerOpen = false">
                <div class="flex-1 min-w-[14rem] max-w-md">
                    <label class="block text-2xs font-medium text-body-subtle mb-1">
                        Sample record
                        <span class="ml-1 text-body-subtle/70 font-normal" x-text="mailModel"></span>
                    </label>
                    <div class="relative">
                        <input type="text"
                               x-ref="previewSearch"
                               x-model="previewQuery"
                               @focus="openPreviewPicker()"
                               @input.debounce.250ms="searchPreviewRecords()"
                               @keydown.escape.prevent.stop="previewPickerOpen = false"
                               :placeholder="previewRecord ? previewRecord.label : 'Search records…'"
                               autocomplete="off"
                               class="w-full border border-default bg-neutral-primary rounded-md px-3 py-1.5
                                      pr-8 text-xs text-heading focus:outline-none focus:ring-2
                                      focus:ring-fg-brand focus:border-fg-brand">
                        <button type="button"
                                x-show="previewRecord"
                                @mousedown.prevent
                                @click="clearPreviewRecord()"
                                class="absolute right-2 top-1/2 -translate-y-1/2 text-body-subtle hover:text-fg-danger"
                                aria-label="Clear selected record">×</button>
                    </div>
                    <div x-show="previewPickerOpen"
                         x-cloak
                         class="absolute z-30 left-0 right-0 top-full mt-1 max-h-56 overflow-y-auto
                                bg-neutral-primary border border-default rounded-md shadow-lg text-sm">
                        <div x-show="previewLoading"
                             class="px-3 py-2 text-xs text-body-subtle">Searching…</div>
                        <template x-for="r in previewResults" :key="r.id">
                            <button type="button"
                                    @mousedown.prevent
                                    @click="pickPreviewRecord(r)"
                                    class="w-full text-left px-3 py-2 hover:bg-neutral-secondary
                                           flex justify-between gap-3 text-xs">
                                <span class="truncate" x-text="r.label"></span>
                                <span class="text-body-subtle font-mono">#<span x-text="r.id"></span></span>
                            </button>
                        </template>
                        <div x-show="!previewLoading && previewResults.length === 0"
                             class="px-3 py-2 text-xs text-body-subtle">No matches.</div>
                    </div>
                </div>
                <button type="button"
                        @click="renderPreview()"
                        :disabled="previewRendering"
                        class="px-3 py-1.5 text-xs font-medium rounded-md border transition
                               bg-fg-brand text-white border-fg-brand hover:opacity-90
                               disabled:opacity-60 disabled:cursor-not-allowed">
                    <span x-show="!previewRendering">Render</span>
                    <span x-show="previewRendering">Rendering…</span>
                </button>
            </div>
            <p x-show="previewError"
               x-text="previewError"
               class="mt-2 text-xs text-fg-danger"></p>
        </div>

        {# Rendered output: subject line + sanitized HTML body. When the
           live preview hasn't run yet, fall back to the raw client-side
           preview so the tab is never empty. #}
        <template x-if="previewRendered">
            <div class="space-y-3">
                <div class="flex flex-wrap items-baseline gap-2 px-4 py-2 rounded-md
                            bg-neutral-secondary border border-default">
                    <span class="text-2xs font-semibold uppercase tracking-wider text-body-subtle">Subject</span>
                    <span class="font-medium text-heading" x-text="previewRendered.subject || '(empty)'"></span>
                </div>
                <div class="pv-html-preview-pane pv-html-preview-pane--email min-h-[16rem] rounded-lg border border-default
                            px-5 py-4 overflow-auto"
                     x-html="previewRendered.body_html"></div>
            </div>
        </template>
        <div x-show="!previewRendered"
             class="pv-html-preview-pane pv-html-preview-pane--email min-h-[20rem] rounded-lg border border-default
                    px-5 py-4 overflow-auto"
             x-html="previewHtml()"></div>
    </div>

    {# Hidden mirror of `this.html` for form submission. Display mode also
       lives inside the form but autosave is disabled there and there's no
       Save button, so the input is inert. #}
    <input type="hidden" name="{{ name }}" :value="html">
</div>