{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/news.css">
<link rel="stylesheet" href="/static/css/post.css">
{% endblock %}
{% block content %}
<div class="news-detail">
    <article class="news-detail-card">
        {% if image_url %}
        <div class="news-detail-image">
            <img src="{{ image_url }}" alt="{{ article['title'] }}" loading="lazy" class="image-fallback">
        </div>
        {% endif %}

        <div class="news-detail-body">
            <div class="news-detail-meta">
                <span class="news-source">{{ article['source_name'] }}</span>
                {% if grade >= 9 %}
                <span class="news-grade news-grade-top">Grade {{ grade }}</span>
                {% elif grade >= 7 %}
                <span class="news-grade news-grade-high">Grade {{ grade }}</span>
                {% else %}
                <span class="news-grade">Grade {{ grade }}</span>
                {% endif %}
                <span class="news-time">{{ time_ago }}</span>
            </div>

            <h1 class="news-detail-title">{{ article['title'] }}</h1>

            {% if article.get('description') %}
            <p class="news-detail-desc">{{ article['description'] }}</p>
            {% endif %}

            {% if article.get('content') %}
            <div class="news-detail-content rendered-content" data-render>{{ article['content'] }}</div>
            {% endif %}

            <div class="news-detail-actions">
                <a href="{{ article['url'] }}" target="_blank" rel="noopener" class="news-detail-read-link">
                    Read on {{ article['source_name'] }} &#x2197;
                </a>
                <button type="button" class="news-detail-back" data-share="/news/{{ article['slug'] or article['uid'] }}">&#x1F517; Share</button>
                {% set _type = "news" %}{% set _uid = article['uid'] %}{% set _bookmarked = bookmarked %}{% include "_bookmark_button.html" %}
                <a href="/news" class="news-detail-back">&larr; Back to News</a>
            </div>
        </div>
    </article>

    {% with target_uid=article['uid'], target_type="news", comments=comments %}
    {% include "_comment_section.html" %}
    {% endwith %}
</div>
{% endblock %}