{{define "code-preview.html"}}
<div class="relative code-preview fade-in">
    {{if .Error}}
    <div class="p-4 border border-red-500 bg-red-500/10 text-red-400">
        <p class="font-medium">Error</p>
        <p class="text-sm mt-1">{{.Error}}</p>
    </div>
    {{else}}
    <div class="mb-2 text-sm text-terminal-muted flex items-center justify-between">
        <div>
            {{if .Name}}<span class="text-terminal-accent">{{.Name}}</span>{{end}}
            {{if .Format}} <span class="ml-2 px-1 py-0.5 border border-terminal-border text-xs">{{.Format}}</span>{{end}}
        </div>
        <button onclick="downloadOutput()" class="tooltip tooltip-left px-4 py-2 text-sm bg-terminal-bg text-terminal-text border border-terminal-border hover:border-terminal-accent hover:text-terminal-accent transition-colors flex items-center gap-1" data-tooltip="Download the generated skill file" aria-label="Download the generated skill file">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            <span class="text-xs">Download</span>
        </button>
    </div>

    {{if .MergeInputs}}
    <details class="details-panel mt-3 border border-terminal-border">
        <summary class="details-summary-row">
            <span>Merge inputs</span>
            <span class="details-summary-row__hint">{{len .MergeInputs}} files</span>
        </summary>
        <div class="details-content p-3 bg-terminal-bg border-t border-terminal-border">
            <p class="text-terminal-muted text-xs">
                {{if .MergeStrategyLabel}}{{.MergeStrategyLabel}}{{else}}{{.ConflictStrategy}}{{end}} · dedupe {{if .MergeDedupe}}on{{else}}off{{end}} · conflicts {{.ConflictCount}}
            </p>
            <div class="flex flex-wrap gap-2">
                {{range .MergeInputs}}
                <span class="px-2 py-1 border border-terminal-border text-terminal-muted text-[11px]">
                    {{.Name}}{{if .Version}} · v{{.Version}}{{end}}
                </span>
                {{end}}
            </div>
        </div>
    </details>
    {{end}}
    <pre class="text-sm whitespace-pre-wrap overflow-auto max-h-[600px] bg-terminal-bg p-3 border border-terminal-border"><code class="language-yaml">{{.Content}}</code></pre>

    {{if .MergeConflicts}}
    <details class="mt-4 border border-terminal-border">
        <summary class="px-3 py-2 bg-terminal-surface text-sm text-terminal-muted cursor-pointer hover:text-terminal-accent transition-colors">
            <span class="text-terminal-accent">$</span> Merge Conflict Report ({{.ConflictCount}})
            {{if .ConflictStrategy}} · strategy: {{.ConflictStrategy}}{{end}}
        </summary>
        <div class="p-3 bg-terminal-bg text-xs space-y-3">
            {{range .MergeConflicts}}
            <div class="border border-terminal-border">
                <div class="px-2 py-1 bg-terminal-surface text-terminal-muted">
                    <span class="text-terminal-accent">#</span> {{.Field}} · {{len .Values}} source(s)
                </div>
                <div class="px-2 py-2 space-y-2">
                    <p class="text-terminal-muted">Resolved value:</p>
                    <pre class="text-terminal-accent whitespace-pre-wrap bg-terminal-surface p-2 border border-terminal-border">{{.Resolved}}</pre>
                    <p class="text-terminal-muted">Candidate values:</p>
                    {{range .Values}}
                    <div class="px-2 py-1 border border-terminal-border bg-terminal-surface">
                        <p class="text-terminal-muted text-[11px]">{{.Source}}
                            {{if .SourceType}}<span class="ml-1 px-1 py-0.5 border border-terminal-border">{{.SourceType}}</span>{{end}}
                            {{if .Name}}· {{.Name}}{{end}}
                            {{if .Version}}· v{{.Version}}{{end}}
                        </p>
                        <pre class="text-terminal-accent whitespace-pre-wrap text-xs">{{.Value}}</pre>
                    </div>
                    {{end}}
                </div>
            </div>
            {{end}}
        </div>
    </details>
    {{else if .Conflicts}}
    <details class="mt-4 border border-terminal-border">
        <summary class="px-3 py-2 bg-terminal-surface text-sm text-terminal-muted cursor-pointer hover:text-terminal-accent transition-colors">
            <span class="text-terminal-accent">$</span> Merge Conflict Report ({{.ConflictCount}})
            {{if .ConflictStrategy}} · strategy: {{.ConflictStrategy}}{{end}}
        </summary>
        <div class="p-3 bg-terminal-bg text-xs space-y-3">
            {{range .Conflicts}}
            <div class="border border-terminal-border">
                <div class="px-2 py-1 bg-terminal-surface text-terminal-muted">
                    <span class="text-terminal-accent">#</span> {{.Field}} · {{len .Values}} source(s)
                </div>
                <div class="px-2 py-2 space-y-2">
                    <p class="text-terminal-muted">Resolved value:</p>
                    <pre class="text-terminal-accent whitespace-pre-wrap bg-terminal-surface p-2 border border-terminal-border">{{.Resolved}}</pre>
                    <p class="text-terminal-muted">Candidate values:</p>
                    {{range .Values}}
                    <div class="px-2 py-1 border border-terminal-border bg-terminal-surface">
                        <p class="text-terminal-muted text-[11px]">{{.Source}}</p>
                        <pre class="text-terminal-accent whitespace-pre-wrap text-xs">{{.Value}}</pre>
                    </div>
                    {{end}}
                </div>
            </div>
            {{end}}
        </div>
    </details>
    {{end}}

    <details class="details-panel mt-4 border border-terminal-border">
        <summary class="details-summary-row">
            <span>Extras</span>
            <span class="details-summary-row__hint">Enhance / CLI</span>
        </summary>
        <div class="details-content p-3 bg-terminal-bg border-t border-terminal-border">
            {{template "enhance-button.html" .}}
            <div class="stack-sm font-mono text-xs">
                <pre class="text-terminal-accent"><code class="language-bash">skillf convert source.json -o skill.md</code></pre>
                <pre class="text-terminal-accent"><code class="language-bash">skillf merge skill1.md skill2.md --dedupe</code></pre>
            </div>
        </div>
    </details>
    {{end}}
</div>
{{end}}