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

{% block title %}Draft Explorer — IETF Draft Analyzer{% endblock %}

{% block extra_head %}
<style>
    .filter-bar {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(30, 41, 59, 0.4));
        backdrop-filter: blur(10px);
    }
    .draft-row {
        transition: all 0.15s ease;
    }
    .draft-row:hover {
        background: rgba(59, 130, 246, 0.05);
    }
    .dim-bar-bg {
        display: inline-block;
        width: 40px;
        height: 6px;
        border-radius: 3px;
        background: rgba(51, 65, 85, 0.6);
        vertical-align: middle;
        position: relative;
        overflow: hidden;
    }
    .dim-bar-fill {
        display: block;
        height: 100%;
        border-radius: 3px;
    }
    .dim-fill-high { background: #4ade80; }
    .dim-fill-mid  { background: #facc15; }
    .dim-fill-low  { background: #f87171; }
    .source-badge {
        display: inline-block;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        white-space: nowrap;
        vertical-align: middle;
    }
    .source-ietf {
        background: rgba(59, 130, 246, 0.15);
        color: #60a5fa;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }
    .source-w3c {
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }
    .source-etsi {
        background: rgba(251, 146, 60, 0.15);
        color: #fb923c;
        border: 1px solid rgba(251, 146, 60, 0.3);
    }
    .source-itu {
        background: rgba(244, 114, 182, 0.15);
        color: #f472b6;
        border: 1px solid rgba(244, 114, 182, 0.3);
    }
    .source-iso {
        background: rgba(168, 85, 247, 0.15);
        color: #c084fc;
        border: 1px solid rgba(168, 85, 247, 0.3);
    }
    .source-nist {
        background: rgba(6, 182, 212, 0.15);
        color: #22d3ee;
        border: 1px solid rgba(6, 182, 212, 0.3);
    }
    .source-generated {
        background: rgba(148, 163, 184, 0.15);
        color: #94a3b8;
        border: 1px solid rgba(148, 163, 184, 0.3);
    }
    .cat-pill {
        display: inline-block;
        padding: 1px 8px;
        border-radius: 9999px;
        font-size: 0.65rem;
        font-weight: 500;
        background: rgba(51, 65, 85, 0.5);
        color: #94a3b8;
        border: 1px solid rgba(71, 85, 105, 0.4);
        white-space: nowrap;
    }
    .cat-pill-active {
        background: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
        border-color: rgba(59, 130, 246, 0.4);
    }
    .range-slider {
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        border-radius: 2px;
        background: #334155;
        outline: none;
    }
    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #3b82f6;
        cursor: pointer;
        border: 2px solid #1e293b;
    }
    .range-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #3b82f6;
        cursor: pointer;
        border: 2px solid #1e293b;
    }
    .page-btn {
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 500;
        transition: all 0.15s ease;
    }
    .page-btn-active {
        background: #3b82f6;
        color: white;
    }
    .page-btn-inactive {
        background: rgba(30, 41, 59, 0.6);
        border: 1px solid #334155;
        color: #94a3b8;
    }
    .page-btn-inactive:hover {
        border-color: #475569;
        color: #e2e8f0;
    }
</style>
{% endblock %}

{% block content %}
<!-- Header -->
<div class="mb-6">
    <h1 class="text-2xl font-bold text-white">Draft Explorer</h1>
    <p class="text-slate-400 text-sm mt-1">Browse, search, and filter {{ result.total }} rated Internet-Drafts on AI and agent topics. Each draft is scored 1–5 across five dimensions: <b>Nov</b>(elty) = originality, <b>Mat</b>(urity) = specification completeness, <b>Rel</b>(evance) = importance to AI agents, <b>Mom</b>(entum) = adoption traction, <b>Ovl</b> (overlap) = uniqueness vs other drafts. <b>Rdy</b> = standards readiness (0–100). Search works across draft names, titles, summaries, and author names.</p>
</div>

<!-- Filter Bar -->
<div class="filter-bar rounded-xl border border-slate-800 p-5 mb-6">
    <form method="get" action="/drafts" id="filterForm">
        <!-- Row 1: Search + Sort + Submit -->
        <div class="flex flex-wrap gap-3 items-end">
            <!-- Search -->
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium text-slate-500 mb-1.5">Search</label>
                <input type="text" name="q" value="{{ search }}" placeholder="Search by name, title, or summary..."
                    class="w-full bg-slate-800/60 border border-slate-700 rounded-lg px-4 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition">
            </div>
            <!-- Category dropdown -->
            <div class="min-w-[180px]">
                <label class="block text-xs font-medium text-slate-500 mb-1.5">Category</label>
                <select name="cat"
                    class="w-full bg-slate-800/60 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition appearance-none"
                    style="background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 20 20%22><path stroke=%22%236b7280%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M6 8l4 4 4-4%22/></svg>'); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.2em 1.2em; padding-right: 2rem;">
                    <option value="">All categories</option>
                    {% for cat, count in categories.items() %}
                    <option value="{{ cat }}" {% if current_cat == cat %}selected{% endif %}>{{ cat }} ({{ count }})</option>
                    {% endfor %}
                </select>
            </div>
            <!-- Source dropdown -->
            <div class="min-w-[120px]">
                <label class="block text-xs font-medium text-slate-500 mb-1.5">Source</label>
                <select name="source"
                    class="w-full bg-slate-800/60 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition appearance-none"
                    style="background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 20 20%22><path stroke=%22%236b7280%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M6 8l4 4 4-4%22/></svg>'); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.2em 1.2em; padding-right: 2rem;">
                    <option value="">All sources</option>
                    <option value="ietf" {% if current_source == 'ietf' %}selected{% endif %}>IETF</option>
                    <option value="w3c" {% if current_source == 'w3c' %}selected{% endif %}>W3C</option>
                    <option value="etsi" {% if current_source == 'etsi' %}selected{% endif %}>ETSI</option>
                    <option value="itu" {% if current_source == 'itu' %}selected{% endif %}>ITU-T</option>
                    <option value="iso" {% if current_source == 'iso' %}selected{% endif %}>ISO/IEC</option>
                    <option value="nist" {% if current_source == 'nist' %}selected{% endif %}>NIST</option>
                </select>
            </div>
            <!-- Sort -->
            <div class="min-w-[150px]">
                <label class="block text-xs font-medium text-slate-500 mb-1.5">Sort by</label>
                <select name="sort"
                    class="w-full bg-slate-800/60 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition appearance-none"
                    style="background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 20 20%22><path stroke=%22%236b7280%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M6 8l4 4 4-4%22/></svg>'); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.2em 1.2em; padding-right: 2rem;">
                    <option value="score" {% if sort == 'score' %}selected{% endif %}>Score</option>
                    <option value="date" {% if sort == 'date' %}selected{% endif %}>Date</option>
                    <option value="novelty" {% if sort == 'novelty' %}selected{% endif %}>Novelty</option>
                    <option value="maturity" {% if sort == 'maturity' %}selected{% endif %}>Maturity</option>
                    <option value="relevance" {% if sort == 'relevance' %}selected{% endif %}>Relevance</option>
                    <option value="momentum" {% if sort == 'momentum' %}selected{% endif %}>Momentum</option>
                    <option value="overlap" {% if sort == 'overlap' %}selected{% endif %}>Overlap</option>
                    <option value="readiness" {% if sort == 'readiness' %}selected{% endif %}>Readiness</option>
                    <option value="name" {% if sort == 'name' %}selected{% endif %}>Name</option>
                </select>
            </div>
            <!-- Sort direction -->
            <div class="min-w-[110px]">
                <label class="block text-xs font-medium text-slate-500 mb-1.5">Direction</label>
                <select name="dir"
                    class="w-full bg-slate-800/60 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition appearance-none"
                    style="background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 20 20%22><path stroke=%22%236b7280%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M6 8l4 4 4-4%22/></svg>'); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.2em 1.2em; padding-right: 2rem;">
                    <option value="desc" {% if sort_dir == 'desc' %}selected{% endif %}>Descending</option>
                    <option value="asc" {% if sort_dir == 'asc' %}selected{% endif %}>Ascending</option>
                </select>
            </div>
        </div>

        <!-- Row 2: Min Score slider -->
        <div class="mt-4 flex flex-wrap items-center gap-4">
            <div class="flex items-center gap-3">
                <label class="text-xs font-medium text-slate-500 whitespace-nowrap">Min Score:</label>
                <input type="range" name="min_score" id="scoreSlider" value="{{ min_score }}" step="0.5" min="0" max="5"
                    class="range-slider w-40" oninput="document.getElementById('scoreVal').textContent = this.value">
                <span id="scoreVal" class="text-sm font-mono font-semibold text-blue-400 w-8">{{ min_score }}</span>
            </div>
            <div class="flex gap-2 ml-auto">
                <button type="submit" class="px-5 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-500 transition-colors">
                    Apply Filters
                </button>
                <a href="/drafts" class="px-4 py-2 border border-slate-700 text-slate-400 rounded-lg text-sm hover:border-slate-500 hover:text-slate-300 transition-colors">
                    Reset
                </a>
            </div>
        </div>

        <!-- Row 3: Category pills (quick filter) -->
        {% if categories %}
        <div class="mt-4 pt-3 border-t border-slate-800/50">
            <div class="flex flex-wrap gap-1.5">
                <a href="/drafts?q={{ search | urlencode }}&min_score={{ min_score }}&sort={{ sort }}&dir={{ sort_dir }}&source={{ current_source }}"
                   class="cat-pill {% if not current_cat %}cat-pill-active{% endif %}">All</a>
                {% for cat, count in categories.items() %}
                <a href="/drafts?cat={{ cat }}&q={{ search | urlencode }}&min_score={{ min_score }}&sort={{ sort }}&dir={{ sort_dir }}&source={{ current_source }}"
                   class="cat-pill {% if current_cat == cat %}cat-pill-active{% endif %}">
                    {{ cat }} <span class="opacity-50">{{ count }}</span>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </form>
</div>

<!-- Category Summary -->
{% if cat_summary and current_cat %}
<div class="bg-slate-900/80 rounded-xl border border-slate-800 p-5 mb-6">
    <div class="flex items-start gap-4">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-white mb-2">{{ current_cat }}</h2>
            <p class="text-sm text-slate-300 leading-relaxed">{{ cat_summary.text }}</p>
        </div>
        <div class="flex-shrink-0 text-right">
            <div class="text-3xl font-bold text-blue-400">{{ cat_summary.avg_score }}<span class="text-base text-slate-500">/5</span></div>
            <div class="text-[10px] text-slate-500 uppercase tracking-wider">Avg Score</div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 pt-4 border-t border-slate-800/60">
        <!-- Dimension profile -->
        <div>
            <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Rating Profile</h3>
            {% for dim, val in cat_summary.dimensions.items() %}
            <div class="flex items-center gap-2 mb-1">
                <span class="text-xs text-slate-500 w-20">{{ dim }}</span>
                <div class="flex-1 bg-slate-800 rounded-full h-1.5 overflow-hidden">
                    <div class="h-full rounded-full {% if val >= 3.5 %}bg-emerald-500{% elif val >= 2.5 %}bg-amber-500{% else %}bg-red-500{% endif %}"
                         style="width: {{ (val / 5 * 100)|round }}%"></div>
                </div>
                <span class="text-xs font-mono {% if val >= 3.5 %}text-emerald-400{% elif val >= 2.5 %}text-amber-400{% else %}text-red-400{% endif %} w-6 text-right">{{ val }}</span>
            </div>
            {% endfor %}
        </div>

        <!-- Top drafts -->
        <div>
            <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Top Drafts</h3>
            {% for name, title, score in cat_summary.top_drafts %}
            <div class="mb-1.5">
                <a href="/drafts/{{ name }}" class="text-xs text-blue-400 hover:text-blue-300 transition">{{ title|truncate(50) }}</a>
                <span class="text-xs text-slate-600 ml-1">{{ score }}</span>
            </div>
            {% endfor %}
        </div>

        <!-- Top authors + orgs -->
        <div>
            <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Key Contributors</h3>
            {% for author, count in cat_summary.top_authors %}
            <div class="text-xs text-slate-300 mb-0.5">{{ author }} <span class="text-slate-600">({{ count }})</span></div>
            {% endfor %}
            {% if cat_summary.top_orgs %}
            <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mt-3 mb-1">Organizations</h3>
            {% for org, count in cat_summary.top_orgs[:3] %}
            <div class="text-xs text-slate-300 mb-0.5">{{ org }} <span class="text-slate-600">({{ count }})</span></div>
            {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
{% endif %}

<!-- Results count + Compare button -->
<div class="flex items-center justify-between mb-4">
    <p class="text-sm text-slate-500">
        Showing <span class="text-slate-300 font-medium">{{ result.drafts|length }}</span> of
        <span class="text-slate-300 font-medium">{{ result.total }}</span> drafts
        {% if search %} matching "<span class="text-blue-400">{{ search }}</span>"{% endif %}
        {% if current_cat %} in <span class="text-blue-400">{{ current_cat }}</span>{% endif %}
        {% if min_score > 0 %} with score >= <span class="text-blue-400">{{ min_score }}</span>{% endif %}
    </p>
    <div class="flex items-center gap-3">
        {% if is_admin %}
        <span id="compareCount" class="text-xs text-slate-600 hidden"><span id="compareNum">0</span> selected</span>
        <button onclick="goCompare()" id="compareBtn"
            class="px-4 py-1.5 bg-slate-800 text-slate-500 rounded-lg text-xs font-medium border border-slate-700 cursor-not-allowed transition-colors hidden"
            disabled>
            Compare Selected
        </button>
        {% endif %}
        {% if result.pages > 1 %}
        <p class="text-xs text-slate-600">Page {{ result.page }} of {{ result.pages }}</p>
        {% endif %}
    </div>
</div>

<!-- Draft Table -->
<div class="bg-slate-900/60 rounded-xl border border-slate-800 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-slate-800 bg-slate-900/80">
                    {% macro sort_header(field, label, extra_class="", title="") %}
                    {% set is_active = sort == field %}
                    {% set next_dir = 'asc' if (is_active and sort_dir == 'desc') else 'desc' %}
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wide {{ extra_class }} {{ 'text-blue-400' if is_active else 'text-slate-500' }}">
                        <a href="/drafts?q={{ search }}&cat={{ current_cat }}&min_score={{ min_score }}&sort={{ field }}&dir={{ next_dir }}&source={{ current_source }}"
                           class="hover:text-blue-400 transition inline-flex items-center gap-1"
                           {% if title %}title="{{ title }}"{% endif %}>
                            {{ label }}
                            {% if is_active %}
                                <svg class="w-3 h-3 {{ 'rotate-180' if sort_dir == 'asc' else '' }}" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            {% endif %}
                        </a>
                    </th>
                    {% endmacro %}
                    {% if is_admin %}
                    <th class="px-2 py-3 w-8">
                        <span class="text-xs text-slate-600" title="Select drafts to compare">Cmp</span>
                    </th>
                    {% endif %}
                    {{ sort_header("score", "Score", "w-20") }}
                    {{ sort_header("name", "Draft") }}
                    {{ sort_header("date", "Date", "w-24 hidden md:table-cell") }}
                    {{ sort_header("novelty", "Nov", "w-20 hidden lg:table-cell", "Novelty") }}
                    {{ sort_header("maturity", "Mat", "w-20 hidden lg:table-cell", "Maturity") }}
                    {{ sort_header("relevance", "Rel", "w-20 hidden lg:table-cell", "Relevance") }}
                    {{ sort_header("momentum", "Mom", "w-20 hidden xl:table-cell", "Momentum") }}
                    {{ sort_header("overlap", "Ovl", "w-20 hidden xl:table-cell", "Overlap") }}
                    {{ sort_header("readiness", "Rdy", "w-20 hidden xl:table-cell", "Standards Readiness") }}
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide hidden md:table-cell">Categories</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800/30">
                {% for d in result.drafts %}
                <tr class="draft-row">
                    {% if is_admin %}
                    <!-- Compare checkbox -->
                    <td class="px-2 py-3 text-center">
                        <input type="checkbox" class="compare-check rounded border-slate-600 bg-slate-800 text-blue-500 focus:ring-blue-500/30 focus:ring-offset-0 w-3.5 h-3.5 cursor-pointer"
                            data-name="{{ d.name }}" onchange="updateCompare()">
                    </td>
                    {% endif %}
                    <!-- Score badge -->
                    <td class="px-4 py-3">
                        <span class="score-badge {% if d.score >= 3.5 %}score-high{% elif d.score >= 2.5 %}score-mid{% else %}score-low{% endif %}">
                            {{ d.score }}
                        </span>
                    </td>
                    <!-- Draft name + title + source badge -->
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1.5">
                            <a href="/drafts/{{ d.name }}" class="text-blue-400 hover:text-blue-300 font-medium text-sm transition">
                                {{ d.title }}
                            </a>
                            <span class="source-badge source-{{ d.source|default('ietf') }}">{{ (d.source|default('ietf'))|upper }}</span>
                        </div>
                        <div class="text-xs text-slate-600 mt-0.5 font-mono">{{ d.name }}</div>
                        {% if d.summary %}
                        <div class="text-xs text-slate-500 mt-1 line-clamp-1 max-w-lg">{{ d.summary }}</div>
                        {% endif %}
                    </td>
                    <!-- Date -->
                    <td class="px-4 py-3 text-xs text-slate-500 hidden md:table-cell whitespace-nowrap">{{ d.date }}</td>
                    <!-- Dimension bars -->
                    {% macro dim_cell(value) %}
                    <td class="px-4 py-3 hidden lg:table-cell">
                        <div class="flex items-center gap-1.5">
                            <span class="dim-bar-bg">
                                <span class="dim-bar-fill {% if value >= 4 %}dim-fill-high{% elif value >= 3 %}dim-fill-mid{% else %}dim-fill-low{% endif %}"
                                      style="width: {{ (value / 5 * 100)|int }}%"></span>
                            </span>
                            <span class="text-xs text-slate-500 font-mono w-4 text-right">{{ value }}</span>
                        </div>
                    </td>
                    {% endmacro %}
                    {{ dim_cell(d.novelty) }}
                    {{ dim_cell(d.maturity) }}
                    {{ dim_cell(d.relevance) }}
                    <td class="px-4 py-3 hidden xl:table-cell">
                        <div class="flex items-center gap-1.5">
                            <span class="dim-bar-bg">
                                <span class="dim-bar-fill {% if d.momentum >= 4 %}dim-fill-high{% elif d.momentum >= 3 %}dim-fill-mid{% else %}dim-fill-low{% endif %}"
                                      style="width: {{ (d.momentum / 5 * 100)|int }}%"></span>
                            </span>
                            <span class="text-xs text-slate-500 font-mono w-4 text-right">{{ d.momentum }}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 hidden xl:table-cell">
                        <div class="flex items-center gap-1.5">
                            <span class="dim-bar-bg">
                                <span class="dim-bar-fill {% if d.overlap <= 2 %}dim-fill-high{% elif d.overlap <= 3 %}dim-fill-mid{% else %}dim-fill-low{% endif %}"
                                      style="width: {{ (d.overlap / 5 * 100)|int }}%"></span>
                            </span>
                            <span class="text-xs text-slate-500 font-mono w-4 text-right">{{ d.overlap }}</span>
                        </div>
                    </td>
                    <!-- Readiness -->
                    <td class="px-4 py-3 hidden xl:table-cell">
                        <div class="flex items-center gap-1.5">
                            <span class="dim-bar-bg" style="width: 50px;">
                                <span class="dim-bar-fill {% if d.readiness >= 50 %}dim-fill-high{% elif d.readiness >= 25 %}dim-fill-mid{% else %}dim-fill-low{% endif %}"
                                      style="width: {{ (d.readiness)|int }}%"></span>
                            </span>
                            <span class="text-xs text-slate-500 font-mono w-6 text-right">{{ d.readiness|int }}</span>
                        </div>
                    </td>
                    <!-- Categories -->
                    <td class="px-4 py-3 hidden md:table-cell">
                        <div class="flex flex-wrap gap-1">
                            {% for cat in d.categories[:3] %}
                            <span class="cat-pill">{{ cat }}</span>
                            {% endfor %}
                            {% if d.categories|length > 3 %}
                            <span class="cat-pill opacity-50">+{{ d.categories|length - 3 }}</span>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
                {% if not result.drafts %}
                <tr>
                    <td colspan="{{ 11 if is_admin else 10 }}" class="px-4 py-12 text-center text-slate-500">
                        <svg class="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        <p class="text-sm">No drafts match your filters.</p>
                        <a href="/drafts" class="text-blue-400 text-sm hover:text-blue-300 mt-1 inline-block">Clear all filters</a>
                    </td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Pagination -->
{% if result.pages > 1 %}
<nav class="flex items-center justify-center gap-1.5 mt-6">
    {% if result.page > 1 %}
    <a href="/drafts?page={{ result.page - 1 }}&q={{ search | urlencode }}&cat={{ current_cat | urlencode }}&min_score={{ min_score }}&sort={{ sort }}&dir={{ sort_dir }}&source={{ current_source }}"
       class="page-btn page-btn-inactive">
        <svg class="w-4 h-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        Prev
    </a>
    {% endif %}

    {% set start_page = [1, result.page - 2]|max %}
    {% set end_page = [result.pages, result.page + 2]|min %}

    {% if start_page > 1 %}
    <a href="/drafts?page=1&q={{ search | urlencode }}&cat={{ current_cat | urlencode }}&min_score={{ min_score }}&sort={{ sort }}&dir={{ sort_dir }}&source={{ current_source }}"
       class="page-btn page-btn-inactive">1</a>
    {% if start_page > 2 %}<span class="text-slate-600 px-1">...</span>{% endif %}
    {% endif %}

    {% for p in range(start_page, end_page + 1) %}
    {% if p == result.page %}
    <span class="page-btn page-btn-active">{{ p }}</span>
    {% else %}
    <a href="/drafts?page={{ p }}&q={{ search | urlencode }}&cat={{ current_cat | urlencode }}&min_score={{ min_score }}&sort={{ sort }}&dir={{ sort_dir }}&source={{ current_source }}"
       class="page-btn page-btn-inactive">{{ p }}</a>
    {% endif %}
    {% endfor %}

    {% if end_page < result.pages %}
    {% if end_page < result.pages - 1 %}<span class="text-slate-600 px-1">...</span>{% endif %}
    <a href="/drafts?page={{ result.pages }}&q={{ search | urlencode }}&cat={{ current_cat | urlencode }}&min_score={{ min_score }}&sort={{ sort }}&dir={{ sort_dir }}&source={{ current_source }}"
       class="page-btn page-btn-inactive">{{ result.pages }}</a>
    {% endif %}

    {% if result.page < result.pages %}
    <a href="/drafts?page={{ result.page + 1 }}&q={{ search | urlencode }}&cat={{ current_cat | urlencode }}&min_score={{ min_score }}&sort={{ sort }}&dir={{ sort_dir }}&source={{ current_source }}"
       class="page-btn page-btn-inactive">
        Next
        <svg class="w-4 h-4 inline" 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>
    </a>
    {% endif %}
</nav>
{% endif %}

{% endblock %}

{% block extra_scripts %}
<script>
function updateCompare() {
    const checks = document.querySelectorAll('.compare-check:checked');
    const btn = document.getElementById('compareBtn');
    const count = document.getElementById('compareCount');
    const num = document.getElementById('compareNum');
    const n = checks.length;
    num.textContent = n;

    if (n >= 2) {
        btn.classList.remove('hidden', 'bg-slate-800', 'text-slate-500', 'cursor-not-allowed');
        btn.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-500', 'cursor-pointer');
        btn.disabled = false;
        count.classList.remove('hidden');
    } else {
        btn.classList.add('hidden');
        count.classList.add('hidden');
        btn.disabled = true;
    }
    // Show button area once at least 1 is selected
    if (n >= 1) {
        btn.classList.remove('hidden');
        count.classList.remove('hidden');
        if (n < 2) {
            btn.classList.add('bg-slate-800', 'text-slate-500', 'cursor-not-allowed');
            btn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-500', 'cursor-pointer');
        }
    }
}

function goCompare() {
    const checks = document.querySelectorAll('.compare-check:checked');
    const names = Array.from(checks).map(c => c.dataset.name);
    if (names.length >= 2) {
        window.location.href = '/compare?drafts=' + encodeURIComponent(names.join(','));
    }
}
</script>
{% endblock %}