{% extends "base.html" %}

{% block title %}{{ seo.title if seo is defined and seo else 'news48 — Fact-Checked News, 48 Hours at a Time'
}}{% 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-index{% endblock %}

{% block content %}
<header class="page-hero page-hero--home">
    <h1 class="masthead">verified news that disappears in 48 hours</h1>
    <div class="tagline">Clear summaries, live fact-checks, and grouped topics — refreshed around the clock, gone by
        design.</div>
    <div class="status-line">
        <span><span class="live-dot"></span><strong>{{ stats.live_stories }}</strong> stories</span>
        {% if stats.verified %}<a href="/all?fact_check_status=verified" class="count-verified"><strong>{{
                stats.verified }}</strong> verified</a>{%
        endif %}
        {% if stats.mixed %}<a href="/all?fact_check_status=mixed" class="count-mixed"><strong>{{ stats.mixed
                }}</strong> mixed</a>{% endif %}
        {% if stats.disputed %}<a href="/all?fact_check_status=disputed" class="count-disputed"><strong>{{
                stats.disputed }}</strong> disputed</a>{%
        endif %}
        {% if stats.unverifiable %}<a href="/all?fact_check_status=unverifiable" class="count-unverifiable"><strong>{{
                stats.unverifiable }}</strong>
            unverifiable</a>{% endif %}
        <span><strong>{{ stats.clusters }}</strong> clusters</span>
        <span><strong>{{ stats.sources }}</strong> sources</span>
        {% if stats.last_updated %}
        <span>updated <strong>{{ stats.last_updated | relative_time }}</strong></span>
        {% endif %}
        <span><a href="/live/monitor">view live monitor</a></span>
    </div>
</header>

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

    <nav class="sentiment-filter filter-panel" aria-label="Filter by mood">
        <div class="filter-panel__header">
            <h2 class="section-label" id="homepage-mood-label">filter by tone</h2>
        </div>
        {% set base_url = "/" %}
        {% if active_sentiment == "positive" %}
        <a href="{{ base_url }}" class="sentiment-pill active-positive">positive</a>
        {% else %}
        <a href="{{ base_url }}?sentiment=positive" class="sentiment-pill">positive</a>
        {% endif %}
        {% if active_sentiment == "neutral" %}
        <a href="{{ base_url }}" class="sentiment-pill active-neutral">neutral</a>
        {% else %}
        <a href="{{ base_url }}?sentiment=neutral" class="sentiment-pill">neutral</a>
        {% endif %}
        {% if active_sentiment == "negative" %}
        <a href="{{ base_url }}" class="sentiment-pill active-negative">negative</a>
        {% else %}
        <a href="{{ base_url }}?sentiment=negative" class="sentiment-pill">negative</a>
        {% endif %}
    </nav>
</section>

<section class="section" aria-labelledby="now-label">
    <h2 class="section-label" id="now-label">live stories</h2>
    <div class="story-list">
        {% for story in stories %}
        <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>
                    {% elif story.fact_check_status == "disputed" %}
                    <span class="badge disputed">✗ Disputed</span>
                    {% elif story.fact_check_status == "mixed" %}
                    <span class="badge mixed">~ Mixed</span>
                    {% elif story.fact_check_status == "unverifiable" %}
                    <span class="badge unverifiable">? Unverifiable</span>
                    {% endif %}
                    {% if story.is_breaking %}
                    <span class="badge breaking">Breaking</span>
                    {% endif %}
                    {% for tag in story.tags | parse_tags %}
                    <span class="pill">{{ tag }}</span>
                    {% endfor %}
                    {% if story.sentiment %}
                    <span
                        class="sentiment {{ 'positive' if story.sentiment == 'positive' else 'negative' if story.sentiment == 'negative' else 'neutral' }}">
                        {% if story.sentiment == 'positive' %}▲{% elif story.sentiment == 'negative' %}▼{% else %}—{%
                        endif %}
                        {{ story.sentiment }}
                    </span>
                    {% endif %}
                </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 live stories are available in the current 48-hour window.</p>
        {% endfor %}
    </div>
    {% if stories | length >= 10 %}
    <div class="view-all-link">
        <a href="/all{% if active_sentiment %}?sentiment={{ active_sentiment }}{% endif %}">→ view all stories</a>
    </div>
    {% endif %}
</section>

<section class="section" aria-labelledby="clusters-label">
    <h2 class="section-label" id="clusters-label">trending topics</h2>
    {% if clusters %}
    <div class="cluster-list">
        {% for cluster in clusters %}
        <a class="cluster" href="/cluster/{{ cluster.slug }}">
            <div class="cluster-main">
                <div class="cluster-name">{{ cluster.name }}</div>
                <div class="cluster-desc">
                    {% if cluster.articles and cluster.articles[0].summary %}
                    {{ cluster.articles[0].summary[:120] }}...
                    {% endif %}
                </div>
                {% if cluster.articles and cluster.articles[0].title %}
                <div class="cluster-lead">→ {{ cluster.articles[0].title }}</div>
                {% endif %}
            </div>
            <div class="cluster-meta">
                <div class="cluster-count">{{ cluster.article_count }} stories</div>
                <span class="cluster-bar">{{ cluster.article_count | cluster_bar(max_cluster_count, 20) }}</span>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <p class="empty-state">No topic clusters are available in the current 48-hour window.</p>
    {% endif %}
</section>

<section class="section expiring" aria-labelledby="expiring-label">
    <h2 class="section-label" id="expiring-label">expiring soon</h2>
    <p class="section-hint">Catch these stories before they leave the 48-hour window.</p>
    {% if expiring %}
    <div class="expiring-list">
        {% for item in expiring %}
        <div class="expiring-item">
            <a href="/article/{{ item.id }}/{{ item.slug or '' }}">{{ item.title }}</a>
            <span class="expiring-time">{{ item.created_at | hours_remaining }}h left</span>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="empty-state">No stories are close to expiry right now.</p>
    {% endif %}
</section>

<p class="footnote">Everything on news48 self-destructs after 48 hours. No archive, no stale links — just what matters
    now.</p>
{% endblock %}