{% comment %}
Reusable prompt form card. Expects to be inside an Alpine x-data scope that provides:
  - subagent, label, prompt, saving, canSave, save()
  - For create/clone mode: subagents, subagentLocked, labelError, isClone, sourceLabel,
    onSubagentChange(), checkLabel()
  - For diff: showDiff, diffTargetKey, diffTargets, diffTargetText, diffTargetLabel

Template context variables:
  - mode: 'create' | 'edit'
  - subagent_display_name: (edit mode) static display name
  - subagent_key: (edit mode) static key
  - version_label: (edit mode) static label text
{% endcomment %}

<c-card>
    <c-card-content class="pt-4 pb-4 space-y-4">

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-semibold text-muted-foreground mb-1">Subagent</label>

                {% if mode == 'create' %}
                {# Clone mode: static display of the source subagent (not editable). #}
                <template x-if="subagentLocked">
                    <div class="w-full h-9 px-3 rounded-md border border-input bg-muted/40 text-sm flex items-center">
                        <span class="font-medium"
                              x-text="(subagents.find(s => s.key === subagent) || {}).display_name || subagent"></span>
                    </div>
                </template>

                {# Create mode: picker. #}
                <template x-if="!subagentLocked">
                    <select x-model="subagent"
                            @change="onSubagentChange()"
                            class="w-full h-9 px-2 rounded-md border border-input bg-background text-sm">
                        <option value="">— Select a subagent —</option>
                        <template x-for="sa in subagents" :key="sa.key">
                            <option :value="sa.key" x-text="sa.display_name + ' (' + sa.key + ')'"></option>
                        </template>
                    </select>
                </template>

                <p x-show="subagentLocked && isClone" class="text-[11px] text-muted-foreground mt-1">
                    Subagent is locked when cloning — clones inherit the source subagent.
                </p>
                {% else %}
                <div class="w-full h-9 px-3 rounded-md border border-input bg-muted/40 text-sm flex items-center">
                    <span class="font-medium">{{ subagent_display_name }}</span>
                </div>
                {% endif %}
            </div>

            <div>
                <label class="block text-xs font-semibold text-muted-foreground mb-1">
                    Label {% if mode == 'create' %}<span class="text-red-500">*</span>{% endif %}
                </label>

                {% if mode == 'create' %}
                <input type="text" x-model="label"
                       @input.debounce.300ms="checkLabel()"
                       placeholder="e.g. verbose prompt"
                       class="w-full h-9 px-2 rounded-md border border-input bg-background text-sm">
                <p x-show="labelError" x-cloak x-text="labelError"
                   class="pm-label-error text-[11px] text-red-600 mt-1"></p>
                <p x-show="!labelError && isClone && label.trim() === sourceLabel"
                   class="text-[11px] text-amber-700 mt-1">
                    Change the label — cannot reuse the source version's label.
                </p>
                {% else %}
                <div class="w-full h-9 px-3 rounded-md border border-input bg-muted/40 text-sm flex items-center">
                    <span class="font-medium">{{ version_label }}</span>
                </div>
                <p class="text-[11px] text-muted-foreground mt-1">
                    Editing creates a new version under the same label.
                </p>
                {% endif %}
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-muted-foreground mb-1">
                Prompt <span class="text-red-500">*</span>
            </label>
            <div class="pm-copy-wrapper">
                <textarea x-model="prompt"
                          rows="18"
                          placeholder="Enter the system prompt..."
                          class="pm-prompt-textarea w-full px-3 py-2 rounded-md border border-input bg-background text-xs font-mono"></textarea>
                <c-copy-btn />
            </div>
            <p class="text-[11px] text-muted-foreground mt-1" x-text="prompt.length + ' characters'"></p>
        </div>

        <div class="flex items-center justify-between">
            <button @click="showDiff = !showDiff"
                    class="text-xs h-8 px-3 rounded-md border border-input bg-background hover:bg-muted/50">
                <span x-text="showDiff ? 'Hide diff' : 'Compare with...'"></span>
            </button>
            <div class="flex items-center gap-2">
                <a href="/admin/eval/prompts/{% if subagent_key %}?subagent={{ subagent_key }}{% endif %}"
                   class="text-sm h-9 px-4 rounded-md border border-input bg-background hover:bg-muted/50 inline-flex items-center">
                    Cancel
                </a>
                <button @click="save()"
                        :disabled="!canSave"
                        :class="canSave ? 'bg-eval-cta-primary text-eval-cta-primary-foreground hover:bg-eval-cta-primary-hover' : 'bg-muted text-muted-foreground cursor-not-allowed'"
                        class="text-sm h-9 px-4 rounded-md inline-flex items-center gap-1.5">
                    <span x-text="saving ? 'Saving...' : '{% if mode == 'edit' %}Update prompt{% else %}Save new prompt{% endif %}'"></span>
                </button>
            </div>
        </div>
    </c-card-content>
</c-card>

{# Diff panel — compare current prompt to any visible target #}
<c-card x-show="showDiff" x-cloak>
    <c-card-content class="pt-4 pb-4 space-y-3">
        <div class="flex items-center gap-2">
            <label class="text-xs font-semibold text-muted-foreground">Compare with:</label>
            <select x-model="diffTargetKey"
                    class="h-8 px-2 text-xs rounded-md border border-input bg-background">
                <option value="">— pick a target —</option>
                <option x-show="diffTargets.prod" value="prod">Current prod</option>
                <optgroup label="Your versions">
                    <template x-for="v in diffTargets.user_versions" :key="'v' + v.id">
                        <option :value="'v' + v.id" x-text="v.label"></option>
                    </template>
                </optgroup>
            </select>
        </div>

        <template x-if="diffTargetText !== null">
            <div x-data="{
                leftText: prompt,
                rightText: diffTargetText,
                leftLabel: 'Current draft' + (label.trim() ? ' (' + label.trim() + ')' : ''),
                rightLabel: diffTargetLabel,
            }">
                {% include 'eval/components/_prompt_diff.html' %}
            </div>
        </template>
        <template x-if="diffTargetText === null">
            <p class="text-xs text-muted-foreground">Pick a target from the dropdown to see a side-by-side comparison.</p>
        </template>
    </c-card-content>
</c-card>