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

{% block title %}{{ draft.title }} — Blog Drafts{% endblock %}

{% block extra_head %}
<style>
    .prose { color: #cbd5e1; line-height: 1.75; }
    .prose h1, .prose h2, .prose h3 { color: #f1f5f9; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; }
    .prose h1 { font-size: 1.5rem; }
    .prose h2 { font-size: 1.25rem; }
    .prose h3 { font-size: 1.1rem; }
    .prose p { margin-bottom: 1em; }
    .prose strong { color: #e2e8f0; }
    .prose em { color: #94a3b8; }
    .prose ul, .prose ol { margin-bottom: 1em; padding-left: 1.5em; }
    .prose li { margin-bottom: 0.25em; }
    .prose blockquote { border-left: 3px solid #475569; padding-left: 1em; color: #94a3b8; margin: 1em 0; }
    .prose code { background: #1e293b; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; }
    .prose pre { background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; padding: 1em; overflow-x: auto; margin: 1em 0; }
    .prose pre code { background: none; padding: 0; }
    .prose a { color: #60a5fa; text-decoration: underline; }
</style>
{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="mb-6 text-sm">
    <a href="/blog" class="text-blue-400 hover:text-blue-300 transition">Blog Drafts</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-slate-400">{{ draft.title[:60] }}{% if draft.title | length > 60 %}...{% endif %}</span>
</nav>

<!-- Header -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
    <div class="flex items-start justify-between gap-4 mb-3">
        <div>
            <h1 class="text-2xl font-bold text-white">{{ draft.title }}</h1>
            {% if draft.subtitle %}
            <p class="text-base text-slate-400 mt-1">{{ draft.subtitle }}</p>
            {% endif %}
        </div>
        <span class="px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap
            {% if draft.status == 'draft' %}bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30
            {% elif draft.status == 'review' %}bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30
            {% elif draft.status == 'published' %}bg-green-500/20 text-green-400 ring-1 ring-green-500/30
            {% else %}bg-slate-600/20 text-slate-500 ring-1 ring-slate-600/30{% endif %}">
            {{ draft.status | upper }}
        </span>
    </div>

    <!-- Metadata -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        {% if draft.style %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Style</h3>
            <p class="text-sm text-slate-300">{{ draft.style }}</p>
        </div>
        {% endif %}
        {% if draft.topic %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Topic</h3>
            <p class="text-sm text-slate-300">{{ draft.topic[:80] }}</p>
        </div>
        {% endif %}
        {% if draft.model_used %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Model</h3>
            <p class="text-sm text-slate-300">{{ draft.model_used }}</p>
        </div>
        {% endif %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Cost</h3>
            <p class="text-sm text-slate-300">
                {% if draft.cost_usd %}${{ "%.4f" | format(draft.cost_usd) }}{% else %}N/A{% endif %}
                {% if draft.input_tokens %}
                <span class="text-slate-500 text-xs">({{ "{:,}".format(draft.input_tokens) }} in / {{ "{:,}".format(draft.output_tokens) }} out)</span>
                {% endif %}
            </p>
        </div>
    </div>

    {% if draft.tags %}
    <div class="flex flex-wrap gap-1.5 mb-4">
        {% for tag in draft.tags %}
        <span class="px-2 py-0.5 rounded bg-slate-800 text-slate-400 text-xs">#{{ tag }}</span>
        {% endfor %}
    </div>
    {% endif %}

    <div class="text-xs text-slate-500 mb-4">
        Created: {{ draft.created_at[:10] if draft.created_at else 'N/A' }}
        &middot; Updated: {{ draft.updated_at[:10] if draft.updated_at else 'N/A' }}
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-3 pt-4 border-t border-slate-800/50">
        <a href="/blog/{{ draft.id }}/edit" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-sm font-medium rounded-lg transition">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            Edit
        </a>
        <a href="/blog/{{ draft.id }}/export" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-sm font-medium rounded-lg transition">
            <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="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>
            Export .md
        </a>
        <button onclick="copyMarkdown()" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-sm font-medium rounded-lg transition">
            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            <span id="copyBtn">Copy</span>
        </button>
        <div class="flex-1"></div>
        <form method="POST" action="/blog/{{ draft.id }}/delete" onsubmit="return confirm('Delete this blog draft? This cannot be undone.');" class="inline">
            <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 bg-red-900/30 hover:bg-red-900/50 text-red-400 text-sm font-medium rounded-lg transition ring-1 ring-red-500/20">
                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                Delete
            </button>
        </form>
    </div>
</div>

<!-- Content -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Content</h2>
        <div class="flex items-center gap-2">
            <button onclick="toggleView('rendered')" id="viewRendered" class="px-3 py-1.5 bg-slate-800 text-slate-300 text-xs font-medium rounded-lg transition">Rendered</button>
            <button onclick="toggleView('source')" id="viewSource" class="px-3 py-1.5 bg-slate-950 text-slate-500 text-xs font-medium rounded-lg transition">Source</button>
        </div>
    </div>

    <div id="renderedView" class="prose max-w-none"></div>
    <div id="sourceView" class="hidden">
        <pre class="text-sm text-slate-300 font-mono leading-relaxed whitespace-pre-wrap bg-slate-950 rounded-lg border border-slate-800 p-4">{{ draft.content_md }}</pre>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="/static/js/marked.min.js"></script>
<script src="/static/js/purify.min.js"></script>
<script>
const rawMd = {{ draft.content_md | tojson }};
document.getElementById('renderedView').innerHTML = DOMPurify.sanitize(marked.parse(rawMd));

function toggleView(view) {
    const rendered = document.getElementById('renderedView');
    const source = document.getElementById('sourceView');
    const btnRendered = document.getElementById('viewRendered');
    const btnSource = document.getElementById('viewSource');

    if (view === 'source') {
        rendered.classList.add('hidden');
        source.classList.remove('hidden');
        btnSource.className = 'px-3 py-1.5 bg-slate-800 text-slate-300 text-xs font-medium rounded-lg transition';
        btnRendered.className = 'px-3 py-1.5 bg-slate-950 text-slate-500 text-xs font-medium rounded-lg transition';
    } else {
        source.classList.add('hidden');
        rendered.classList.remove('hidden');
        btnRendered.className = 'px-3 py-1.5 bg-slate-800 text-slate-300 text-xs font-medium rounded-lg transition';
        btnSource.className = 'px-3 py-1.5 bg-slate-950 text-slate-500 text-xs font-medium rounded-lg transition';
    }
}

function copyMarkdown() {
    navigator.clipboard.writeText(rawMd).then(() => {
        const btn = document.getElementById('copyBtn');
        btn.textContent = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy', 1500);
    });
}
</script>
{% endblock %}