{% extends 'eval/base.html' %}
{% load static %}
{% block title %}Prompt Library | Eval Admin{% endblock %}

{% block action_bar %}
<span class="font-semibold">Prompt Library</span>
<div class="ml-auto">{% include 'eval/components/_sync_banner.html' %}</div>
{% endblock %}

{% block content %}
<div x-data="promptLibrary()"
     data-selected-subagent="{{ selected_subagent }}"
     class="flex gap-4 -mx-2">

    {# ─── Left pane: subagent list ────────────────────────────────── #}
    <c-subagent-sidebar
        search_model="subagentSearch"
        list_var="filteredSubagents"
        show_counts="true" />

    {# ─── Right pane: detail ──────────────────────────────────────── #}
    <div class="flex-1 min-w-0 space-y-4">

        {# Empty state — no subagent selected #}
        <template x-if="!selectedDto">
            <c-card>
                <c-card-content class="pt-6 pb-6">
                    <p class="text-sm text-muted-foreground text-center">
                        Pick a subagent on the left to view its prompt library.
                    </p>
                </c-card-content>
            </c-card>
        </template>

        {# Header — subagent name + key #}
        <template x-if="selectedDto">
            <div class="flex items-baseline justify-between gap-3">
                <div>
                    <h1 class="text-lg font-semibold" x-text="selectedDto.subagent_display_name"></h1>
                    <p class="text-[11px] font-mono text-muted-foreground" x-text="selectedDto.subagent_key"></p>
                </div>
            </div>
        </template>

        {# Prod prompt card (read-only) #}
        <template x-if="selectedDto && selectedDto.prod_snapshot_id">
            <c-prod-prompt-card
                model="selectedDto.prod_model"
                temperature="selectedDto.prod_temperature"
                preview="selectedDto.prod_prompt_preview"
                expanded_var="prodExpanded"
                on_clone="cloneFromProd(selectedDto.subagent_key)" />
        </template>

        {# No prod snapshot fallback #}
        <template x-if="selectedDto && !selectedDto.prod_snapshot_id">
            <c-card>
                <c-card-content class="pt-4 pb-4">
                    <p class="text-sm text-muted-foreground">
                        No prod snapshot yet for this subagent. Waiting on backend sync.
                    </p>
                </c-card-content>
            </c-card>
        </template>

        {# My Prompts header — title + count + search + new btn #}
        <template x-if="selectedDto">
            <div class="flex flex-wrap items-center gap-3">
                <div class="flex items-baseline gap-2">
                    <h2 class="text-sm font-semibold">My Prompts</h2>
                    <span class="text-[11px] text-muted-foreground"
                          x-text="selectedDto.user_prompts.length + ' total'"></span>
                </div>
                <div class="flex-1 min-w-[200px] max-w-sm">
                    <c-search-input placeholder="Search versions..." model="versionSearch" />
                </div>
                <a :href="'/admin/eval/prompts/new/?subagent=' + selectedDto.subagent_key"
                   class="text-xs h-8 px-3 rounded-md bg-eval-cta-primary text-eval-cta-primary-foreground hover:bg-eval-cta-primary-hover inline-flex items-center gap-1.5">
                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
                    </svg>
                    New prompt
                </a>
            </div>
        </template>

        {# Empty filter result (versions exist but search hides them all) #}
        <template x-if="selectedDto && selectedDto.user_prompts.length > 0 && filteredVersions.length === 0">
            <p class="text-sm text-muted-foreground text-center py-4">
                No versions match "<span x-text="versionSearch"></span>".
            </p>
        </template>

        {# Version cards — 2-up grid #}
        <template x-if="selectedDto">
            <div class="pm-version-grid">
                <template x-for="v in filteredVersions" :key="v.id">
                    <c-prompt-version-card
                        version_var="v"
                        expanded_var="expanded[v.id]"
                        on_clone="cloneVersion(v.id)"
                        on_delete="deleteVersion(v)" />
                </template>
            </div>
        </template>

    </div>

</div>

<script id="subagents-json" type="application/json">{{ subagents_json|safe }}</script>
<script id="library-json"   type="application/json">{{ library_json|safe }}</script>
{% endblock %}

{% block extra_scripts %}
<script src="{% static 'eval/js/eval-prompts.js' %}"></script>
{% endblock %}