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

{% block title %}Blog Drafts — IETF Draft Analyzer{% endblock %}

{% block content %}
<div class="mb-6 flex items-start justify-between">
    <div>
        <h1 class="text-2xl font-bold text-white">Blog Drafts</h1>
        <p class="text-slate-400 text-sm mt-1">{{ drafts | length }} blog draft{{ 's' if drafts | length != 1 }}. Generate Medium-style posts from project data.</p>
    </div>
    <a href="/blog/generate" class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white text-sm font-medium rounded-lg transition shrink-0">
        <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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        Generate New
    </a>
</div>

<!-- Status filter pills -->
<div class="flex flex-wrap gap-2 mb-6">
    <button onclick="filterStatus('all')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-800 text-slate-300 ring-1 ring-slate-700" data-status="all">
        All ({{ drafts | length }})
    </button>
    {% set ns = namespace(draft=0, review=0, published=0, archived=0) %}
    {% for d in drafts %}
        {% if d.status == 'draft' %}{% set ns.draft = ns.draft + 1 %}
        {% elif d.status == 'review' %}{% set ns.review = ns.review + 1 %}
        {% elif d.status == 'published' %}{% set ns.published = ns.published + 1 %}
        {% elif d.status == 'archived' %}{% set ns.archived = ns.archived + 1 %}
        {% endif %}
    {% endfor %}
    <button onclick="filterStatus('draft')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30" data-status="draft">
        Draft ({{ ns.draft }})
    </button>
    <button onclick="filterStatus('review')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30" data-status="review">
        Review ({{ ns.review }})
    </button>
    <button onclick="filterStatus('published')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-green-500/20 text-green-400 ring-1 ring-green-500/30" data-status="published">
        Published ({{ ns.published }})
    </button>
    <button onclick="filterStatus('archived')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-600/20 text-slate-500 ring-1 ring-slate-600/30" data-status="archived">
        Archived ({{ ns.archived }})
    </button>
</div>

<!-- Blog draft cards -->
<div class="space-y-4" id="blogList">
    {% for d in drafts %}
    <a href="/blog/{{ d.id }}" class="blog-card block bg-slate-900 rounded-xl border border-slate-800 hover:border-slate-600 p-5 transition group"
       data-status="{{ d.status }}" data-title="{{ d.title | lower }}">
        <div class="flex items-start justify-between gap-3 mb-2">
            <div>
                <h2 class="text-base font-semibold text-white group-hover:text-blue-400 transition">{{ d.title }}</h2>
                {% if d.subtitle %}
                <p class="text-sm text-slate-400 mt-0.5">{{ d.subtitle }}</p>
                {% endif %}
            </div>
            <div class="flex items-center gap-2 shrink-0">
                <span class="px-2.5 py-0.5 rounded-full text-xs font-semibold whitespace-nowrap
                    {% if d.status == 'draft' %}bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30
                    {% elif d.status == 'review' %}bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30
                    {% elif d.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 %}">
                    {{ d.status | upper }}
                </span>
                <svg class="w-4 h-4 text-slate-600 group-hover:text-blue-400 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-3 text-xs text-slate-500 mt-3">
            {% if d.style %}
            <span class="px-2 py-0.5 rounded bg-slate-800 text-slate-400">{{ d.style }}</span>
            {% endif %}

            {% if d.tags %}
            <div class="flex flex-wrap gap-1">
                {% for tag in d.tags[:5] %}
                <span class="px-1.5 py-0.5 rounded bg-slate-800/50 text-slate-500">#{{ tag }}</span>
                {% endfor %}
                {% if d.tags | length > 5 %}
                <span class="text-slate-600">+{{ d.tags | length - 5 }}</span>
                {% endif %}
            </div>
            {% endif %}

            {% if d.model_used %}
            <span class="text-slate-600">|</span>
            <span>{{ d.model_used }}</span>
            {% endif %}

            {% if d.cost_usd %}
            <span class="text-slate-600">|</span>
            <span>${{ "%.3f" | format(d.cost_usd) }}</span>
            {% endif %}

            {% if d.updated_at %}
            <span class="text-slate-600">|</span>
            <span>{{ d.updated_at[:10] }}</span>
            {% endif %}
        </div>
    </a>
    {% endfor %}

    {% if not drafts %}
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-12 text-center">
        <svg class="w-12 h-12 text-slate-700 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
        <p class="text-slate-400 mb-4">No blog drafts yet. Generate your first post from project data.</p>
        <a href="/blog/generate" class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-500 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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            Generate First Post
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
let currentStatus = 'all';

function filterStatus(status) {
    currentStatus = status;
    document.querySelectorAll('.status-pill').forEach(pill => {
        if (pill.dataset.status === status) {
            pill.style.outline = '2px solid rgba(96, 165, 250, 0.5)';
            pill.style.outlineOffset = '1px';
        } else {
            pill.style.outline = 'none';
        }
    });
    document.querySelectorAll('.blog-card').forEach(card => {
        const match = currentStatus === 'all' || card.dataset.status === currentStatus;
        card.style.display = match ? 'block' : 'none';
    });
}

filterStatus('all');
</script>
{% endblock %}