{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/news.css">
{% endblock %}
{% block content %}
<div class="news-page">
    <div class="news-header">
        <h1>Developer News</h1>
        <p class="news-subtitle">Curated signals for developers. Updated hourly.</p>
    </div>

    {% if articles %}
    <div class="news-grid">
        {% for item in articles %}
        <article class="news-card">
            {% if item.image_url %}
            <div class="news-card-image">
                <img src="{{ item.image_url }}" alt="" loading="lazy" class="image-fallback">
            </div>
            {% endif %}
            <div class="news-card-body">
                <div class="news-card-meta">
                    <span class="news-source">{{ item.article['source_name'] }}</span>
                    {% if item.grade >= 9 %}
                    <span class="news-grade news-grade-top">Grade {{ item.grade }}</span>
                    {% elif item.grade >= 7 %}
                    <span class="news-grade news-grade-high">Grade {{ item.grade }}</span>
                    {% else %}
                    <span class="news-grade">Grade {{ item.grade }}</span>
                    {% endif %}
                    <span class="news-time">{{ item.time_ago }}</span>
                </div>
                <h3 class="news-card-title">
                    <a href="/news/{{ item.article['slug'] or item.article['uid'] }}">{{ item.article['title'] }}</a>
                </h3>
                {% if item.article.get('description') %}
                <p class="news-card-desc">{{ item.article['description'][:250] }}{% if item.article['description']|length > 250 %}...{% endif %}</p>
                {% endif %}
                <a href="{{ item.article['url'] }}" target="_blank" rel="noopener" class="news-read-link">
                    Read on {{ item.article['source_name'] }} &#x2197;
                </a>
            </div>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <div class="news-empty">
        <div class="news-empty-icon">&#x1F4F0;</div>
        <h2>No news yet</h2>
        <p>Check back soon for curated developer news.</p>
    </div>
    {% endif %}
</div>
{% endblock %}