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

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

{% block extra_head %}
<style>
    .status-pill { cursor: pointer; transition: all 0.2s; }
    .status-pill:hover { opacity: 0.9; }
    .status-pill.active { ring: 2px; }
</style>
{% endblock %}

{% block content %}
<div class="mb-6 flex items-start justify-between">
    <div>
        <h1 class="text-2xl font-bold text-white">Proposals</h1>
        <p class="text-slate-400 text-sm mt-1">{{ proposals | length }} draft proposal{{ 's' if proposals | length != 1 }} tracking ideas for new Internet-Drafts linked to identified gaps.</p>
    </div>
    <div class="flex gap-2 shrink-0">
        <a href="/proposals/intake" 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>
            Intake
        </a>
        <a href="/proposals/new" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-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="M12 4v16m8-8H4"/></svg>
            New
        </a>
    </div>
</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 ({{ proposals | length }})
    </button>
    {% set ns = namespace(idea=0, outline=0, draft=0, submitted=0, merged=0, abandoned=0) %}
    {% for p in proposals %}
        {% if p.status == 'idea' %}{% set ns.idea = ns.idea + 1 %}
        {% elif p.status == 'outline' %}{% set ns.outline = ns.outline + 1 %}
        {% elif p.status == 'draft' %}{% set ns.draft = ns.draft + 1 %}
        {% elif p.status == 'submitted' %}{% set ns.submitted = ns.submitted + 1 %}
        {% elif p.status == 'merged' %}{% set ns.merged = ns.merged + 1 %}
        {% elif p.status == 'abandoned' %}{% set ns.abandoned = ns.abandoned + 1 %}
        {% endif %}
    {% endfor %}
    <button onclick="filterStatus('idea')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-purple-500/20 text-purple-400 ring-1 ring-purple-500/30" data-status="idea">
        Idea ({{ ns.idea }})
    </button>
    <button onclick="filterStatus('outline')" 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="outline">
        Outline ({{ ns.outline }})
    </button>
    <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('submitted')" 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="submitted">
        Submitted ({{ ns.submitted }})
    </button>
    <button onclick="filterStatus('merged')" class="status-pill px-3 py-1.5 rounded-full text-xs font-semibold bg-emerald-500/20 text-emerald-400 ring-1 ring-emerald-500/30" data-status="merged">
        Merged ({{ ns.merged }})
    </button>
    <button onclick="filterStatus('abandoned')" 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="abandoned">
        Abandoned ({{ ns.abandoned }})
    </button>
</div>

<!-- Search -->
<div class="mb-6">
    <input type="text" id="searchInput" placeholder="Search proposals..." oninput="filterProposals()"
        class="w-full md:w-96 px-4 py-2 bg-slate-900 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition">
</div>

<!-- Proposal cards -->
<div class="space-y-4" id="proposalList">
    {% for p in proposals %}
    <a href="/proposals/{{ p.id }}" class="proposal-card block bg-slate-900 rounded-xl border border-slate-800 hover:border-slate-600 p-5 transition group"
       data-status="{{ p.status }}" data-title="{{ p.title | lower }}" data-desc="{{ p.description | lower }}">
        <div class="flex items-start justify-between gap-3 mb-3">
            <h2 class="text-base font-semibold text-white group-hover:text-blue-400 transition">{{ p.title }}</h2>
            <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 p.status == 'idea' %}bg-purple-500/20 text-purple-400 ring-1 ring-purple-500/30
                    {% elif p.status == 'outline' %}bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30
                    {% elif p.status == 'draft' %}bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30
                    {% elif p.status == 'submitted' %}bg-green-500/20 text-green-400 ring-1 ring-green-500/30
                    {% elif p.status == 'merged' %}bg-emerald-500/20 text-emerald-400 ring-1 ring-emerald-500/30
                    {% else %}bg-slate-600/20 text-slate-500 ring-1 ring-slate-600/30{% endif %}">
                    {{ p.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>

        {% if p.description %}
        <p class="text-sm text-slate-400 leading-relaxed mb-3">{{ p.description[:200] }}{% if p.description | length > 200 %}...{% endif %}</p>
        {% endif %}

        <div class="flex flex-wrap items-center gap-3 text-xs text-slate-500">
            {% if p.gaps %}
            <div class="flex flex-wrap gap-1.5">
                {% for gap in p.gaps %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-slate-800 text-slate-400">
                    <span class="w-1.5 h-1.5 rounded-full
                        {% if gap.severity == 'critical' %}bg-red-400
                        {% elif gap.severity == 'high' %}bg-orange-400
                        {% elif gap.severity == 'medium' %}bg-yellow-400
                        {% else %}bg-green-400{% endif %}"></span>
                    {{ gap.topic[:30] }}{% if gap.topic | length > 30 %}...{% endif %}
                </span>
                {% endfor %}
            </div>
            {% endif %}

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

            {% if p.intended_wg %}
            <span class="text-slate-600">|</span>
            <span>WG: {{ p.intended_wg }}</span>
            {% endif %}

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

    {% if not proposals %}
    <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="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>
        <p class="text-slate-400 mb-4">No proposals yet. Start tracking your draft ideas.</p>
        <a href="/proposals/new" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-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="M12 4v16m8-8H4"/></svg>
            Create First Proposal
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}

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

function filterStatus(status) {
    currentStatus = status;
    // Update pill styling
    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';
        }
    });
    filterProposals();
}

function filterProposals() {
    const query = document.getElementById('searchInput').value.toLowerCase();
    document.querySelectorAll('.proposal-card').forEach(card => {
        const matchStatus = currentStatus === 'all' || card.dataset.status === currentStatus;
        const matchSearch = !query || card.dataset.title.includes(query) || card.dataset.desc.includes(query);
        card.style.display = (matchStatus && matchSearch) ? 'block' : 'none';
    });
}

// Initialize with "all" active
filterStatus('all');
</script>
{% endblock %}
