{% extends "base.html" %}

{% block title %}Claim #{{ claim.id }} — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="/archive" class="text-sm text-slate-400 hover:text-white">← Back to archive</a>
</div>

<div class="mb-8">
    <h1 class="text-xl font-bold text-white">{{ claim.claim }}</h1>
    <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 %}
        {% if claim.source_request_id %}
            <a href="/history/{{ claim.source_request_id }}" class="text-indigo-400 hover:text-indigo-300">source request →</a>
        {% endif %}
    </div>
</div>

{% if claim.summary %}
<section class="mb-8">
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Summary</h2>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-4 text-slate-200">{{ claim.summary }}</div>
</section>
{% endif %}

{% if claim.entities %}
<section class="mb-8">
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Entities</h2>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-4 text-xs text-slate-300 grid grid-cols-3 gap-4">
        {% for key in ['persons', 'institutions', 'locations'] %}
        <div>
            <p class="uppercase text-slate-500 font-semibold mb-1">{{ key }}</p>
            <ul class="space-y-1">
                {% for item in (claim.entities.get(key) or []) %}<li>{{ item }}</li>{% else %}<li class="text-slate-600">—</li>{% endfor %}
            </ul>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<section>
    <h2 class="text-sm font-semibold text-slate-400 uppercase mb-2">Articles ({{ articles|length }})</h2>
    <div class="space-y-3">
        {% for link in articles %}
        {% set a = link.article %}
        <div class="bg-slate-900 rounded-xl border border-slate-800 p-4">
            <div class="flex items-start justify-between gap-4 mb-2">
                <div class="min-w-0 flex-1">
                    <a href="{{ a.url }}" target="_blank" rel="noopener" class="text-white font-medium hover:text-indigo-300">{{ a.title or a.url }}</a>
                    <p class="text-xs text-slate-500 mt-0.5 truncate">{{ a.publisher or a.url }}</p>
                </div>
                {% if link.link.relevance_score %}
                <span class="shrink-0 text-xs font-mono text-slate-400">rel: {{ '%.2f'|format(link.link.relevance_score|float) }}</span>
                {% endif %}
                {% if a.credibility_score %}
                <span class="shrink-0 text-xs font-mono text-slate-400">cred: {{ '%.2f'|format(a.credibility_score|float) }}</span>
                {% endif %}
            </div>
            {% if link.link.snippet %}
            <p class="text-xs text-slate-300 italic">"{{ link.link.snippet[:300] }}{% if link.link.snippet|length > 300 %}…{% endif %}"</p>
            {% endif %}
            {% if a.full_text %}
            <details class="mt-2 text-xs text-slate-400">
                <summary class="cursor-pointer hover:text-white">View full text ({{ a.full_text|length }} chars)</summary>
                <pre class="mt-2 p-3 bg-slate-800/50 rounded whitespace-pre-wrap text-[11px]">{{ a.full_text[:3000] }}{% if a.full_text|length > 3000 %}…{% endif %}</pre>
            </details>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endblock %}