{% extends "base.html" %}

{% block title %}{{ seo.title if seo is defined and seo else article.title ~ ' | news48' }}{% endblock %}

{% block body_class %}page-article{% endblock %}

{% block json_ld %}
{% if seo is defined and seo and seo.json_ld %}
{% for item in seo.json_ld %}
<script type="application/ld+json">{{ item | tojson }}</script>
{% endfor %}
{% endif %}
{% endblock %}

{% block content %}
<a class="back-link" href="/live">← back to live feed</a>
<article class="article-shell">
    <header class="page-hero page-hero--article">
        <h1 class="headline">{{ article.title }}</h1>
        {% if article.summary %}
        <p class="standfirst">{{ article.summary }}</p>
        {% endif %}
        <div class="reading-meta">
            {% set wc = article.content | word_count %}
            <span>{{ wc | read_time }} min read · {{ wc }} words</span>
            {% for tag in article.tags | parse_tags %}
            <span class="pill">{{ tag }}</span>
            {% endfor %}
            {% if article.sentiment %}
            <span
                class="sentiment {{ 'positive' if article.sentiment == 'positive' else 'negative' if article.sentiment == 'negative' else 'neutral' }}">
                {% if article.sentiment == 'positive' %}▲{% elif article.sentiment == 'negative' %}▼{% else %}—{% endif
                %}
                {{ article.sentiment }}
            </span>
            {% endif %}
            <span class="freshness" title="Available for 48 hours from ingestion"
                aria-label="{{ article.created_at | hours_remaining }} hours remaining. Available for 48 hours from ingestion.">
                {{ article.created_at | hours_remaining }}h left
                <span class="freshness-bar {{ article.created_at | hours_remaining | freshness_class }}"></span>
            </span>
        </div>
    </header>

    <div class="meta-bar content-panel">
        <span><strong>source</strong> {{ article.source_name or "Unknown" }}</span>
        <span><strong>published</strong> {{ article.published_at | relative_time if article.published_at else
            article.created_at | relative_time }}</span>
        <a href="{{ article.url }}" target="_blank" rel="noopener" title="Opens the original source in a new tab">Open
            original source ↗</a>
        {% if article.fact_check_status == "verified" %}
        <span class="badge verified">✓ Verified</span>
        {% elif article.fact_check_status == "disputed" %}
        <span class="badge disputed">✗ Disputed</span>
        {% elif article.fact_check_status == "mixed" %}
        <span class="badge mixed">~ Mixed</span>
        {% elif article.fact_check_status == "unverifiable" %}
        <span class="badge unverifiable">? Unverifiable</span>
        {% endif %}
        {% if article.is_breaking %}
        <span class="badge breaking">Breaking</span>
        {% endif %}
    </div>

    <div class="stats-strip">
        {% set wc = article.content | word_count %}
        <div class="mini-stat">
            <div class="label">words</div>
            <div class="value">{{ wc }}</div>
        </div>
        <div class="mini-stat">
            <div class="label">read time</div>
            <div class="value">{{ wc | read_time }}m</div>
        </div>
        <div class="mini-stat">
            <div class="label">views</div>
            <div class="value">{{ article.view_count or 0 }}</div>
        </div>
        <div class="mini-stat{% if article.created_at | hours_remaining < 12 %} highlighted{% endif %}">
            <div class="label">expires</div>
            <div class="value">{{ article.created_at | hours_remaining }}h</div>
            <div class="note">of 48h window</div>
        </div>
    </div>

    <div class="body content-panel content-panel--article-body">
        {% for paragraph in (article.content or '').split('\n\n') %}
        {% if paragraph.strip() %}
        <p>{{ paragraph.strip() }}</p>
        {% endif %}
        {% endfor %}
    </div>
</article>

{% if claims %}
<section class="claims-section" aria-labelledby="claims-label">
    <h2 class="section-label" id="claims-label">fact-check breakdown</h2>
    {% if claims_summary.verified == 0 and claims_summary.disputed == 0 and claims_summary.mixed == 0 %}
    <p class="section-hint">No independent sources were found to verify these claims. This does not mean the claims are
        false — only that corroborating evidence was not available.</p>
    {% else %}
    <p class="section-hint">Each claim shows its verdict and supporting evidence.</p>
    {% endif %}
    <div class="claims-rollup" role="status" aria-live="polite">
        <span class="claims-rollup__item"><strong>{{ claims_summary.total }}</strong> claims checked</span>
        {% if claims_summary.verified > 0 %}
        <span class="claims-rollup__item count-verified"><strong>{{ claims_summary.verified }}</strong> verified</span>
        {% endif %}
        {% if claims_summary.mixed > 0 %}
        <span class="claims-rollup__item count-mixed"><strong>{{ claims_summary.mixed }}</strong> mixed</span>
        {% endif %}
        {% if claims_summary.disputed > 0 %}
        <span class="claims-rollup__item count-disputed"><strong>{{ claims_summary.disputed }}</strong> disputed</span>
        {% endif %}
        {% if claims_summary.unverifiable > 0 %}
        <span class="claims-rollup__item count-unverifiable"><strong>{{ claims_summary.unverifiable }}</strong>
            unverifiable</span>
        {% endif %}
    </div>
    <div class="claims-list">
        {% for claim in claims %}
        <div class="claim-row">
            <div class="claim-row__header">
                <div class="claim-text">{{ claim.claim_text }}</div>
                <div class="claim-verdict v-{{ claim.verdict }}">
                    {% if claim.verdict == "verified" %}✓ verified
                    {% elif claim.verdict == "disputed" %}✗ disputed
                    {% elif claim.verdict == "mixed" %}~ mixed
                    {% else %}? unverifiable
                    {% endif %}
                </div>
            </div>
            {% if claim.evidence_summary %}
            <div class="claim-evidence">{{ claim.evidence_summary }}</div>
            {% endif %}
            {% if claim.sources %}
            <div class="claim-sources">
                <span class="sources-label">sources</span>
                {% for source in claim.sources | parse_tags %}
                <span class="claim-source">{{ source }}</span>
                {% endfor %}
            </div>
            {% else %}
            <div class="claim-sources">
                <span class="sources-label">sources</span>
                <span class="claim-source-empty">No sources found</span>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<section class="section" aria-labelledby="related-label">
    <h2 class="section-label" id="related-label">related coverage</h2>
    {% if related %}
    <div class="related-list">
        {% for item in related %}
        <article class="related-item">
            <h3><a href="/article/{{ item.id }}/{{ item.slug or '' }}">{{ item.title }}</a></h3>
            {% if item.summary %}
            <p>{{ item.summary[:200] }}{% if item.summary|length > 200 %}...{% endif %}</p>
            {% endif %}
            <div class="related-meta">
                <span>{{ item.source_name or "Unknown" }} · {{ item.created_at | relative_time }}</span>
                {% if item.fact_check_status == "verified" %}
                <span class="badge verified">✓ Verified</span>
                {% elif item.fact_check_status == "disputed" %}
                <span class="badge disputed">✗ Disputed</span>
                {% elif item.fact_check_status == "mixed" %}
                <span class="badge mixed">~ Mixed</span>
                {% elif item.fact_check_status == "unverifiable" %}
                <span class="badge unverifiable">? Unverifiable</span>
                {% endif %}
            </div>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <p class="empty-state">No related stories are available in the current 48-hour window.</p>
    {% endif %}
</section>

<section class="section" aria-labelledby="article-categories-label">
    <h2 class="section-label" id="article-categories-label">browse by category</h2>
    <nav class="category-nav filter-panel" aria-label="Categories">
        <a href="/all" class="category-pill">all</a>
        {% for cat in categories %}
        <a href="/category/{{ cat.slug }}"
            class="category-pill{% if active_category == cat.slug %} active{% endif %}">{{
            cat.name | format_category_name }}</a>
        {% endfor %}
    </nav>
</section>
{% endblock %}