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

{% block title %}Edit: {{ draft.title }} — Blog Drafts{% 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>
    <a href="/blog/{{ draft.id }}" class="text-blue-400 hover:text-blue-300 transition">{{ draft.title[:40] }}{% if draft.title | length > 40 %}...{% endif %}</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-slate-400">Edit</span>
</nav>

<form method="POST" action="/blog/{{ draft.id }}/edit">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main content -->
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
                <h1 class="text-xl font-bold text-white mb-5">Edit Blog Draft</h1>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1.5">Title *</label>
                        <input type="text" name="title" required value="{{ draft.title }}"
                            class="w-full px-4 py-2.5 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1.5">Subtitle</label>
                        <input type="text" name="subtitle" value="{{ draft.subtitle or '' }}"
                            class="w-full px-4 py-2.5 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 transition">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1.5">Content (Markdown)</label>
                        <textarea name="content_md" rows="30"
                            class="w-full px-4 py-2.5 bg-slate-950 border border-slate-700 rounded-lg text-sm text-slate-300 font-mono leading-relaxed focus:outline-none focus:border-blue-500 transition resize-y">{{ draft.content_md }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
                <h2 class="text-sm font-semibold text-white mb-4">Metadata</h2>

                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1">Status</label>
                        <select name="status" class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 transition">
                            <option value="draft" {{ 'selected' if draft.status == 'draft' }}>Draft</option>
                            <option value="review" {{ 'selected' if draft.status == 'review' }}>Review</option>
                            <option value="published" {{ 'selected' if draft.status == 'published' }}>Published</option>
                            <option value="archived" {{ 'selected' if draft.status == 'archived' }}>Archived</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1">Style</label>
                        <select name="style" class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 transition">
                            <option value="deep-dive" {{ 'selected' if draft.style == 'deep-dive' }}>Deep Dive</option>
                            <option value="overview" {{ 'selected' if draft.style == 'overview' }}>Overview</option>
                            <option value="opinion" {{ 'selected' if draft.style == 'opinion' }}>Opinion</option>
                            <option value="listicle" {{ 'selected' if draft.style == 'listicle' }}>Listicle</option>
                            <option value="comparison" {{ 'selected' if draft.style == 'comparison' }}>Comparison</option>
                            <option value="series-post" {{ 'selected' if draft.style == 'series-post' }}>Series Post</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1">Slug</label>
                        <input type="text" name="slug" value="{{ draft.slug }}"
                            class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white font-mono focus:outline-none focus:border-blue-500 transition">
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1">Tags (comma-separated)</label>
                        <input type="text" name="tags_str" value="{{ draft.tags | join(', ') }}"
                            class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 transition">
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1">Topic</label>
                        <input type="text" name="topic" value="{{ draft.topic or '' }}"
                            class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:border-blue-500 transition">
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1">Instructions</label>
                        <textarea name="instructions" rows="2"
                            class="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-sm text-slate-400 focus:outline-none focus:border-blue-500 transition resize-y">{{ draft.instructions or '' }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Generation info (read-only) -->
            {% if draft.model_used %}
            <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
                <h2 class="text-sm font-semibold text-white mb-4">Generation Info</h2>
                <div class="space-y-2 text-xs text-slate-400">
                    <div class="flex justify-between">
                        <span>Model</span>
                        <span class="text-slate-300">{{ draft.model_used }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Input tokens</span>
                        <span class="text-slate-300">{{ "{:,}".format(draft.input_tokens or 0) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Output tokens</span>
                        <span class="text-slate-300">{{ "{:,}".format(draft.output_tokens or 0) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Cost</span>
                        <span class="text-slate-300">${{ "%.4f" | format(draft.cost_usd or 0) }}</span>
                    </div>
                </div>
                <input type="hidden" name="model_used" value="{{ draft.model_used }}">
                <input type="hidden" name="input_tokens" value="{{ draft.input_tokens or 0 }}">
                <input type="hidden" name="output_tokens" value="{{ draft.output_tokens or 0 }}">
                <input type="hidden" name="cost_usd" value="{{ draft.cost_usd or 0 }}">
            </div>
            {% endif %}

            <!-- Actions -->
            <div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
                <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-lg transition mb-3">
                    <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="M5 13l4 4L19 7"/></svg>
                    Save Changes
                </button>
                <a href="/blog/{{ draft.id }}" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-white text-sm font-medium rounded-lg transition">
                    Cancel
                </a>
            </div>
        </div>
    </div>
</form>
{% endblock %}