nordabiz/templates/pej/news.html

{% extends "base.html" %}

{% block title %}Aktualności PEJ - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .pej-news-header {
        margin-bottom: var(--spacing-lg);
    }
    .pej-news-header h1 { font-size: 1.5rem; color: #1a365d; }
    .pej-news-header-row {
        display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: var(--spacing-sm);
    }
    .pej-read-stats {
        font-size: var(--font-size-sm); color: var(--text-secondary);
        display: flex; align-items: center; gap: var(--spacing-sm);
    }
    .pej-read-stats .read-count { color: #059669; font-weight: 600; }

    .pej-news-item {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); padding: var(--spacing-md);
        margin-bottom: var(--spacing-md); transition: var(--transition);
        position: relative;
    }
    .pej-news-item:hover { border-color: #1a365d; }
    .pej-news-item.is-read { opacity: 0.6; border-left: 3px solid #059669; }
    .pej-news-item.is-read:hover { opacity: 0.85; }
    .pej-news-item h2 { font-size: var(--font-size-md); margin-bottom: var(--spacing-xs); }
    .pej-news-item h2 a { color: var(--text-primary); text-decoration: none; }
    .pej-news-item h2 a:hover { color: #1a365d; }
    .pej-news-item .meta {
        font-size: var(--font-size-sm); color: var(--text-secondary);
        margin-bottom: var(--spacing-sm);
    }
    .pej-news-item .summary { font-size: var(--font-size-sm); color: var(--text-secondary); }
    .pej-read-badge {
        display: none; font-size: 0.7rem; color: #059669; font-weight: 600;
        margin-left: var(--spacing-sm);
    }
    .pej-news-item.is-read .pej-read-badge { display: inline; }

    .pej-pagination { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
    .pej-pagination a {
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--border); border-radius: var(--radius);
        text-decoration: none; color: var(--text-primary); font-size: var(--font-size-sm);
    }
    .pej-pagination a:hover { border-color: #1a365d; color: #1a365d; }
    .pej-pagination a.active { background: #1a365d; color: #fff; border-color: #1a365d; }
</style>
{% endblock %}

{% block content %}
<div class="pej-news-header">
    <h1>Aktualności — Elektrownia Jądrowa</h1>
    <div class="pej-news-header-row">
        <a href="{{ url_for('pej_index') }}" style="font-size: var(--font-size-sm); color: var(--text-secondary);">&larr; Powrót do PEJ</a>
        <div class="pej-read-stats">
            <span>{{ total }} artykułów</span>
            <span>&middot;</span>
            <span>Przeczytane: <span class="read-count" id="pejReadCount">0</span></span>
        </div>
    </div>
</div>

{% for item in news %}
<div class="pej-news-item" data-news-id="{{ item.id }}">
    <h2>
        <a href="{{ item.url }}" target="_blank" rel="noopener" onclick="markPejRead({{ item.id }})">{{ item.title }}</a>
        <span class="pej-read-badge">przeczytane</span>
    </h2>
    <div class="meta">
        {{ item.source_name or item.source_domain or 'Źródło nieznane' }}
        {% if item.published_at %} &middot; {{ item.published_at|local_time('%d.%m.%Y') }}{% endif %}
        {% if item.ai_relevance_score %}
        &middot; <span title="Trafność AI">{% for i in range(item.ai_relevance_score) %}&#9733;{% endfor %}{% for i in range(5 - item.ai_relevance_score) %}&#9734;{% endfor %}</span>
        {% endif %}
    </div>
    {% if item.summary %}
    <div class="summary">{{ item.summary[:200] }}{% if item.summary|length > 200 %}...{% endif %}</div>
    {% endif %}
</div>
{% else %}
<div style="text-align: center; padding: var(--spacing-xl); color: var(--text-secondary);">
    Brak aktualności nuklearnych.
</div>
{% endfor %}

{% if total_pages > 1 %}
<div class="pej-pagination">
    {% if page > 1 %}
    <a href="?page={{ page - 1 }}">&laquo; Poprzednia</a>
    {% endif %}
    {% for p in range(1, total_pages + 1) %}
        {% if p == page %}
        <a class="active">{{ p }}</a>
        {% elif p <= 3 or p > total_pages - 2 or (p >= page - 1 and p <= page + 1) %}
        <a href="?page={{ p }}">{{ p }}</a>
        {% endif %}
    {% endfor %}
    {% if page < total_pages %}
    <a href="?page={{ page + 1 }}">Następna &raquo;</a>
    {% endif %}
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
    var PEJ_READ_KEY = 'pej_news_read';

    function getPejReadIds() {
        try {
            return JSON.parse(localStorage.getItem(PEJ_READ_KEY) || '[]');
        } catch(e) { return []; }
    }

    function markPejRead(newsId) {
        var ids = getPejReadIds();
        if (ids.indexOf(newsId) === -1) {
            ids.push(newsId);
            localStorage.setItem(PEJ_READ_KEY, JSON.stringify(ids));
        }
        var el = document.querySelector('[data-news-id="' + newsId + '"]');
        if (el) el.classList.add('is-read');
        updatePejReadCount();
    }

    function updatePejReadCount() {
        var ids = getPejReadIds();
        var items = document.querySelectorAll('.pej-news-item[data-news-id]');
        var count = 0;
        items.forEach(function(item) {
            var id = parseInt(item.dataset.newsId);
            if (ids.indexOf(id) !== -1) {
                item.classList.add('is-read');
                count++;
            }
        });
        var counter = document.getElementById('pejReadCount');
        if (counter) counter.textContent = count;
    }

    document.addEventListener('DOMContentLoaded', updatePejReadCount);
{% endblock %}