{% extends "base.html" %}

{% block title %}Archive — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-8 flex items-start justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-white">Claims Archive</h1>
        <p class="mt-1 text-sm text-slate-400">
            Permanently stored claims + articles. Consumed by the future claims-api
            to serve gather responses without network search.
        </p>
    </div>
    <div class="flex items-center gap-4 text-xs">
        <div class="text-center">
            <p class="text-2xl font-bold text-white">{{ total_claims }}</p>
            <p class="text-slate-400">claims</p>
        </div>
        <div class="text-center">
            <p class="text-2xl font-bold text-white">{{ total_articles }}</p>
            <p class="text-slate-400">articles</p>
        </div>
    </div>
</div>

<form method="get" class="mb-6">
    <input type="text" name="q" value="{{ query }}" placeholder="Search claims..."
           class="w-full bg-slate-900 text-white text-sm rounded-md border border-slate-800 px-4 py-2.5 focus:outline-none focus:border-indigo-600">
</form>

<div class="space-y-3">
    {% for claim in claims %}
    <a href="/archive/{{ claim.id }}" class="block bg-slate-900 rounded-xl border border-slate-800 p-4 hover:border-slate-700 transition">
        <div class="flex items-start justify-between gap-4">
            <div class="min-w-0 flex-1">
                <p class="text-white font-medium">{{ claim.claim }}</p>
                <div class="flex items-center gap-3 mt-2 text-xs text-slate-400">
                    {% if claim.primary_country %}<span>🌍 {{ claim.primary_country }}</span>{% endif %}
                    {% if claim.detected_language %}<span>💬 {{ claim.detected_language }}</span>{% endif %}
                    {% if claim.promoted_by %}<span>👤 {{ claim.promoted_by }}</span>{% endif %}
                    {% if claim.created_at %}<span>🕐 {{ claim.created_at.strftime('%Y-%m-%d %H:%M') }}</span>{% endif %}
                </div>
            </div>
            {% if claim.verdict %}
            <span class="inline-flex px-2 py-0.5 text-xs rounded-full bg-emerald-900/50 text-emerald-300 border border-emerald-800 shrink-0">
                {{ claim.verdict }}
            </span>
            {% endif %}
        </div>
    </a>
    {% else %}
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-12 text-center text-slate-500">
        No claims archived yet. Promote a gather from the <a href="/history" class="text-indigo-400 hover:text-indigo-300">History</a> page.
    </div>
    {% endfor %}
</div>
{% endblock %}