{% extends "base.html" %}
{% set active_page = "gaps" %}

{% block title %}Draft Demo — Gap Explorer{% endblock %}

{% block extra_head %}
<style>
    .draft-viewer {
        max-height: 75vh;
        overflow-y: auto;
    }
    .draft-viewer::-webkit-scrollbar { width: 6px; }
    .draft-viewer::-webkit-scrollbar-track { background: #0f172a; }
    .draft-viewer::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
    .draft-tab {
        transition: all 0.15s ease;
    }
    .draft-tab:hover { background: rgba(59, 130, 246, 0.1); }
    .draft-tab.active {
        background: rgba(59, 130, 246, 0.15);
        border-color: #3b82f6;
        color: #60a5fa;
    }
</style>
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="mb-6 text-sm">
    <a href="/gaps" class="text-blue-400 hover:text-blue-300 transition">Gap Explorer</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-slate-400">Demo Drafts</span>
</nav>

<div class="mb-6">
    <h1 class="text-2xl font-bold text-white">Generated Draft Demo</h1>
    <p class="text-slate-400 text-sm mt-1">
        Pre-generated Internet-Drafts addressing identified gaps.
        These were generated by the gap-to-draft pipeline using Claude to write each section.
    </p>
</div>

{% if not generated_drafts %}
<div class="bg-slate-900 rounded-xl border border-slate-800 p-8 text-center">
    <svg class="w-12 h-12 text-slate-700 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
    <p class="text-slate-500">No generated drafts found yet.</p>
    <p class="text-slate-600 text-sm mt-1">Use the gap detail page to generate one, or run <code class="text-blue-400">ietf draft-gen</code> from the CLI.</p>
</div>
{% else %}

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    <!-- Draft selector sidebar -->
    <div class="lg:col-span-1">
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <div class="px-4 py-3 border-b border-slate-800">
                <h3 class="text-sm font-semibold text-slate-300">{{ generated_drafts | length }} Generated Draft{{ 's' if generated_drafts | length != 1 }}</h3>
            </div>
            <div class="divide-y divide-slate-800/50">
                {% for gd in generated_drafts %}
                <a href="/gaps/demo?file={{ gd.filename | urlencode }}"
                   class="draft-tab block px-4 py-3 border-l-2
                   {% if (selected and gd.filename == selected) or (not selected and loop.first) %}active border-blue-500
                   {% else %}border-transparent{% endif %}">
                    <div class="text-xs font-medium text-slate-300 truncate">{{ gd.title }}</div>
                    <div class="text-[10px] text-slate-600 mt-0.5 font-mono">{{ gd.stem }}</div>
                    <div class="text-[10px] text-slate-600 mt-0.5">{{ (gd.size / 1024) | round(1) }} KB</div>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Draft viewer -->
    <div class="lg:col-span-3">
        {% if draft_text %}
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-800">
                <div>
                    <h3 class="text-sm font-semibold text-white">{{ draft_info.title if draft_info else 'Draft' }}</h3>
                    <span class="text-[10px] text-slate-600 font-mono">{{ draft_info.filename if draft_info }}</span>
                </div>
                <button onclick="downloadCurrentDraft()" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-medium rounded-lg transition">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    Download .txt
                </button>
            </div>
            <div class="draft-viewer p-4">
                <pre class="text-xs text-slate-300 font-mono leading-relaxed whitespace-pre-wrap">{{ draft_text }}</pre>
            </div>
        </div>
        {% else %}
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-8 text-center">
            <p class="text-slate-500">Select a draft from the list to view it.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
function downloadCurrentDraft() {
    const text = {{ (draft_text or '') | tojson }};
    const filename = {{ (draft_info.filename if draft_info else 'draft.txt') | tojson }};
    if (!text) return;
    const blob = new Blob([text], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}
</script>
{% endblock %}