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

{% block title %}{{ proposal.title }} — Proposals{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="mb-6 text-sm">
    <a href="/proposals" class="text-blue-400 hover:text-blue-300 transition">Proposals</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-slate-400">{{ proposal.title }}</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-4">
        <h1 class="text-2xl font-bold text-white">{{ proposal.title }}</h1>
        <span class="px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap
            {% if proposal.status == 'idea' %}bg-purple-500/20 text-purple-400 ring-1 ring-purple-500/30
            {% elif proposal.status == 'outline' %}bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30
            {% elif proposal.status == 'draft' %}bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30
            {% elif proposal.status == 'submitted' %}bg-green-500/20 text-green-400 ring-1 ring-green-500/30
            {% elif proposal.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 %}">
            {{ proposal.status | upper }}
        </span>
    </div>

    {% if proposal.description %}
    <p class="text-sm text-slate-300 leading-relaxed mb-4">{{ proposal.description }}</p>
    {% endif %}

    <!-- Metadata grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        {% if proposal.intended_wg %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Working Group</h3>
            <p class="text-sm text-slate-300">{{ proposal.intended_wg }}</p>
        </div>
        {% endif %}
        {% if proposal.draft_name %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Draft Name</h3>
            <p class="text-sm text-slate-300 font-mono text-xs">{{ proposal.draft_name }}</p>
        </div>
        {% endif %}
        {% if proposal.source_paper %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Source Paper</h3>
            {% if proposal.source_url %}
            <a href="{{ proposal.source_url }}" target="_blank" class="text-sm text-blue-400 hover:text-blue-300 transition">{{ proposal.source_paper }}</a>
            {% else %}
            <p class="text-sm text-slate-300">{{ proposal.source_paper }}</p>
            {% endif %}
        </div>
        {% endif %}
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Dates</h3>
            <p class="text-xs text-slate-400">Created: {{ proposal.created_at[:10] if proposal.created_at else 'N/A' }}</p>
            <p class="text-xs text-slate-400">Updated: {{ proposal.updated_at[:10] if proposal.updated_at else 'N/A' }}</p>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-3 pt-4 border-t border-slate-800/50">
        <a href="/proposals/{{ proposal.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>
        <form method="POST" action="/proposals/{{ proposal.id }}/delete" onsubmit="return confirm('Delete this proposal? 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>

<!-- Linked Gaps -->
{% if proposal.gaps %}
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
    <h2 class="text-lg font-semibold text-white mb-4">Linked Gaps ({{ proposal.gaps | length }})</h2>
    <div class="space-y-3">
        {% for gap in proposal.gaps %}
        <a href="/gaps/{{ gap.id }}" class="block bg-slate-800/50 rounded-lg border
            {% if gap.severity == 'critical' %}border-red-500/30 hover:border-red-500/50
            {% elif gap.severity == 'high' %}border-orange-500/20 hover:border-orange-500/40
            {% elif gap.severity == 'medium' %}border-yellow-500/15 hover:border-yellow-500/30
            {% else %}border-slate-700 hover:border-slate-600{% endif %}
            p-4 transition group">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="text-sm font-semibold text-white group-hover:text-blue-400 transition">{{ gap.topic }}</h3>
                    <p class="text-xs text-slate-400 mt-1">{{ gap.description[:120] }}{% if gap.description | length > 120 %}...{% endif %}</p>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold whitespace-nowrap shrink-0
                    {% if gap.severity == 'critical' %}bg-red-500/20 text-red-400
                    {% elif gap.severity == 'high' %}bg-orange-500/20 text-orange-400
                    {% elif gap.severity == 'medium' %}bg-yellow-500/20 text-yellow-400
                    {% else %}bg-green-500/20 text-green-400{% endif %}">
                    {{ gap.severity | upper }}
                </span>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Content -->
{% if proposal.content_md %}
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
    <h2 class="text-lg font-semibold text-white mb-4">Content</h2>
    <div class="bg-slate-950 rounded-lg border border-slate-800 p-4">
        <pre class="text-sm text-slate-300 font-mono leading-relaxed whitespace-pre-wrap">{{ proposal.content_md }}</pre>
    </div>
</div>
{% endif %}
{% endblock %}