{% extends "base.html" %}

{% block title %}{{ seo.title if seo is defined and seo else category_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-category{% endblock %}

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

<header class="page-hero">
    <h1 class="page-heading">{% if fact_check_status %}{{ fact_check_status | title }} — {{ category_name }}{% else %}{{
        category_name }}{% endif %}</h1>
    <div class="tagline">{{ total }} stories{% if fact_check_status %}, verification: {{ fact_check_status }}{% else %}
        in {{ category_name }}, refreshed every 48 hours{% endif %}.</div>
</header>

<section class="filter-stack" aria-labelledby="category-mood-label">
    <nav class="category-nav filter-panel" aria-label="Categories">
        <a href="/all{% if active_sentiment %}?sentiment={{ active_sentiment }}{% endif %}"
            class="category-pill{% if not active_category or active_category == 'all' %} active{% endif %}">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="category-mood-label">filter by tone</h2>
        </div>
        {% set base_url = "/category/" ~ category_slug %}
        {% 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>

    <nav class="factcheck-filter filter-panel" aria-label="Filter by fact-check status">
        <div class="filter-panel__header">
            <h2 class="section-label" id="category-factcheck-label">filter by verification</h2>
        </div>
        {% set fc_base = "/category/" ~ category_slug %}
        {% if fact_check_status %}
        <a href="{{ fc_base }}" class="category-pill">any</a>
        {% else %}
        <a href="{{ fc_base }}" class="category-pill active">any</a>
        {% endif %}
        {% if fact_check_status == "verified" %}
        <a href="{{ fc_base }}" class="category-pill count-verified active">✓ verified</a>
        {% else %}
        <a href="{{ fc_base }}?fact_check_status=verified" class="category-pill count-verified">✓ verified</a>
        {% endif %}
        {% if fact_check_status == "disputed" %}
        <a href="{{ fc_base }}" class="category-pill count-disputed active">✗ disputed</a>
        {% else %}
        <a href="{{ fc_base }}?fact_check_status=disputed" class="category-pill count-disputed">✗ disputed</a>
        {% endif %}
        {% if fact_check_status == "mixed" %}
        <a href="{{ fc_base }}" class="category-pill count-mixed active">~ mixed</a>
        {% else %}
        <a href="{{ fc_base }}?fact_check_status=mixed" class="category-pill count-mixed">~ mixed</a>
        {% endif %}
        {% if fact_check_status == "unverifiable" %}
        <a href="{{ fc_base }}" class="category-pill count-unverifiable active">? unverifiable</a>
        {% else %}
        <a href="{{ fc_base }}?fact_check_status=unverifiable" class="category-pill count-unverifiable">?
            unverifiable</a>
        {% endif %}
    </nav>
</section>

<section class="section" aria-labelledby="category-stories-label">
    <h2 class="section-label" id="category-stories-label">{{ category_name }} — live now</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>
                    {% 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 %}
                    {% 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 stories are available in this category right now.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}