{% extends "base.html" %}

{% block title %}{{ seo.title if seo is defined and seo else cluster_name ~ ' | news48' }}{% 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 body_class %}page-cluster{% endblock %}

{% block content %}
<a class="back-link" href="/all">← back to all stories</a>

<header class="page-hero">
    <h1 class="page-heading">{{ cluster_name }}</h1>
    <div class="tagline">{{ total }} stories covering {{ cluster_name }} from multiple angles.</div>
</header>

<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 class="section" aria-labelledby="cluster-stories-label">
    <h2 class="section-label" id="cluster-stories-label">{{ cluster_name }} — all angles</h2>
    <div class="story-list">
        {% for story in articles %}
        <article
            class="story{% if story.sentiment %} sentiment-{{ story.sentiment }}{% endif %}{% if story.is_breaking %} is-breaking{% endif %}">
            <div class="story-index">[{{ "%02d" | format(loop.index) }}]</div>
            <div class="story-body">
                <h3 class="story-headline">
                    <a href="/article/{{ story.id }}/{{ story.slug or '' }}">{{ story.title }}</a>
                </h3>
                {% if story.summary %}
                <p class="standfirst">{{ story.summary }}</p>
                {% endif %}
                <div class="meta">
                    <span><strong>{{ story.source_name or story.feed_source_name or "Unknown" }}</strong></span>
                    <span>{{ story.created_at | relative_time }}</span>
                    {% if story.fact_check_status == "verified" %}
                    <span class="badge verified">Verified</span>
                    {% endif %}
                    {% if story.fact_check_status == "disputed" %}
                    <span class="badge disputed">Disputed</span>
                    {% endif %}
                    {% for tag in story.tags | parse_tags %}
                    <span class="pill">{{ tag }}</span>
                    {% endfor %}
                </div>
                <div class="story-links">
                    <a href="/article/{{ story.id }}/{{ story.slug or '' }}">Read more →</a>
                    <a href="{{ story.url }}" target="_blank" rel="noopener"
                        title="Opens the original source in a new tab">Open original source ↗</a>
                </div>
            </div>
        </article>
        {% else %}
        <p class="empty-state">No stories are available in this cluster right now.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}