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

{% block title %}{{ gap.topic }} — Gap Explorer{% endblock %}

{% block extra_head %}{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="mb-6 text-sm">
    <a href="/gaps" class="text-blue-400 hover:text-blue-300 transition">Gap Explorer</a>
    <span class="text-slate-600 mx-2">/</span>
    <span class="text-slate-400">{{ gap.topic }}</span>
</nav>

<!-- Gap header -->
<div class="bg-slate-900 rounded-xl border
    {% if gap.severity == 'critical' %}border-red-500/40
    {% elif gap.severity == 'high' %}border-orange-500/30
    {% elif gap.severity == 'medium' %}border-yellow-500/20
    {% else %}border-slate-800{% endif %}
    p-6 mb-6">

    <div class="flex items-start justify-between gap-4 mb-4">
        <h1 class="text-2xl font-bold text-white">{{ gap.topic }}</h1>
        <span class="px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap
            {% if gap.severity == 'critical' %}bg-red-500/20 text-red-400 ring-1 ring-red-500/30
            {% elif gap.severity == 'high' %}bg-orange-500/20 text-orange-400 ring-1 ring-orange-500/30
            {% elif gap.severity == 'medium' %}bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30
            {% else %}bg-green-500/20 text-green-400 ring-1 ring-green-500/30{% endif %}">
            {{ gap.severity | upper }}
        </span>
    </div>

    {% if gap.category %}
    <span class="inline-block px-2.5 py-0.5 rounded text-xs bg-slate-800 text-slate-400 mb-4 font-medium">{{ gap.category }}</span>
    {% endif %}

    <div class="space-y-4">
        <div>
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Description</h3>
            <p class="text-sm text-slate-300 leading-relaxed">{{ gap.description }}</p>
        </div>

        {% if gap.evidence %}
        <div class="bg-slate-800/50 rounded-lg p-4">
            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Evidence</h3>
            <p class="text-sm text-slate-400 leading-relaxed">{{ gap.evidence }}</p>
        </div>
        {% endif %}
    </div>

    <!-- Links -->
    {% if gap.category %}
    <div class="mt-4 pt-4 border-t border-slate-800/50">
        <a href="/drafts?cat={{ gap.category | urlencode }}" class="inline-flex items-center gap-1.5 text-xs text-blue-400/70 hover:text-blue-400 transition">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            Browse {{ gap.category }} drafts
        </a>
    </div>
    {% endif %}
</div>

<!-- Related Drafts -->
{% if related_drafts %}
<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 flex items-center gap-2">
        <svg class="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        Related Drafts <span class="text-sm text-slate-500 font-normal">({{ related_drafts|length }})</span>
    </h2>
    <div class="space-y-3">
        {% for d in related_drafts[:15] %}
        <a href="/drafts/{{ d.name }}" class="block bg-slate-800/50 rounded-lg border border-slate-700 hover:border-slate-600 p-4 transition group">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <h3 class="text-sm font-semibold text-white group-hover:text-blue-400 transition truncate">{{ d.title }}</h3>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="text-xs text-slate-500 font-mono">{{ d.name }}</span>
                        {% if d.date %}
                        <span class="text-xs text-slate-600">{{ d.date }}</span>
                        {% endif %}
                    </div>
                    {% if d.categories %}
                    <div class="flex flex-wrap gap-1 mt-2">
                        {% for cat in d.categories[:3] %}
                        <span class="px-2 py-0.5 rounded-full text-[10px] bg-slate-700/60 text-slate-400 border border-slate-600">{{ cat }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                {% if d.score is not none %}
                <span class="flex-shrink-0 px-2 py-1 rounded text-sm font-bold
                    {% if d.score >= 3.5 %}text-green-400
                    {% elif d.score >= 2.5 %}text-amber-400
                    {% else %}text-red-400{% endif %}">
                    {{ d.score }}
                </span>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>
    {% if related_drafts|length > 15 %}
    <p class="text-xs text-slate-500 mt-3">Showing 15 of {{ related_drafts|length }} related drafts.</p>
    {% endif %}
</div>
{% endif %}

<!-- Linked Proposals -->
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6 mb-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Linked Proposals</h2>
        <a href="/proposals/new?gap_id={{ gap.id }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-medium rounded-lg transition">
            <svg class="w-3.5 h-3.5" 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 Proposal
        </a>
    </div>
    {% if proposals %}
    <div class="space-y-3">
        {% for p in proposals %}
        <a href="/proposals/{{ p.id }}" class="block bg-slate-800/50 rounded-lg border border-slate-700 hover:border-slate-600 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">{{ p.title }}</h3>
                    {% if p.description %}
                    <p class="text-xs text-slate-400 mt-1">{{ p.description[:120] }}{% if p.description | length > 120 %}...{% endif %}</p>
                    {% endif %}
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold whitespace-nowrap shrink-0
                    {% if p.status == 'idea' %}bg-purple-500/20 text-purple-400
                    {% elif p.status == 'outline' %}bg-blue-500/20 text-blue-400
                    {% elif p.status == 'draft' %}bg-yellow-500/20 text-yellow-400
                    {% elif p.status == 'submitted' %}bg-green-500/20 text-green-400
                    {% elif p.status == 'merged' %}bg-emerald-500/20 text-emerald-400
                    {% else %}bg-slate-600/20 text-slate-500{% endif %}">
                    {{ p.status | upper }}
                </span>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-slate-500">No proposals yet -- <a href="/proposals/new?gap_id={{ gap.id }}" class="text-blue-400 hover:text-blue-300 transition">create one?</a></p>
    {% endif %}
</div>

<!-- Pre-generated examples -->
{% if generated_drafts %}
<div class="bg-slate-900 rounded-xl border border-slate-800 p-6">
    <h2 class="text-lg font-semibold text-white mb-2">Generated Drafts</h2>
    <p class="text-xs text-slate-500 mb-4">
        {{ generated_drafts | length }} pre-generated example{{ 's' if generated_drafts | length != 1 }}.
        <a href="/gaps/demo" class="text-blue-400 hover:text-blue-300 transition">View all</a>
    </p>
</div>
{% endif %}
{% endblock %}

{% block extra_scripts %}{% endblock %}