nordabiz/templates/announcements/list.html

{% extends "base.html" %}

{% block title %}Aktualnosci - Norda Biznes Hub{% endblock %}

{% block meta_description %}Aktualnosci i ogloszenia dla czlonkow Norda Biznes. Wydarzenia, okazje biznesowe, informacje od czlonkow.{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        text-align: center;
        padding: var(--spacing-2xl) 0;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: white;
        margin-bottom: var(--spacing-xl);
    }

    .page-header h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--spacing-sm);
    }

    .page-header p {
        font-size: var(--font-size-lg);
        opacity: 0.9;
    }

    .filters-bar {
        display: flex;
        justify-content: center;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
        margin-bottom: var(--spacing-xl);
    }

    .filter-btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--radius-full);
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .filter-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .filter-btn.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .announcements-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-2xl);
    }

    .announcement-card {
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        flex-direction: column;
    }

    .announcement-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .announcement-card.pinned {
        border: 2px solid var(--primary);
    }

    .announcement-card.featured {
        background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
    }

    .card-image {
        width: 100%;
        height: 180px;
        object-fit: cover;
        background: var(--background);
    }

    .card-image-placeholder {
        width: 100%;
        height: 180px;
        background: linear-gradient(135deg, var(--primary-bg) 0%, var(--background) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3em;
        color: var(--primary);
        opacity: 0.3;
    }

    .card-body {
        padding: var(--spacing-lg);
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .card-meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }

    .category-badge {
        display: inline-block;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
        background: var(--primary-bg);
        color: var(--primary);
    }

    .category-event { background: #e0f2fe; color: #0369a1; }
    .category-opportunity { background: #dcfce7; color: #15803d; }
    .category-member_news { background: #fef3c7; color: #b45309; }
    .category-partnership { background: #f3e8ff; color: #7c3aed; }

    .pinned-badge {
        background: var(--primary);
        color: white;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
    }

    .card-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
        line-height: 1.3;
    }

    .card-title a {
        color: inherit;
        text-decoration: none;
    }

    .card-title a:hover {
        color: var(--primary);
    }

    .card-excerpt {
        color: var(--text-secondary);
        font-size: var(--font-size-base);
        line-height: 1.6;
        flex: 1;
        margin-bottom: var(--spacing-md);
    }

    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border);
    }

    .card-date {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
    }

    .card-link {
        color: var(--primary);
        font-weight: 500;
        text-decoration: none;
        font-size: var(--font-size-sm);
    }

    .card-link:hover {
        text-decoration: underline;
    }

    .empty-state {
        text-align: center;
        padding: var(--spacing-3xl);
        background: var(--surface);
        border-radius: var(--radius-lg);
    }

    .empty-state-icon {
        font-size: 4em;
        margin-bottom: var(--spacing-md);
        opacity: 0.3;
    }

    .empty-state h3 {
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .empty-state p {
        color: var(--text-secondary);
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xl);
    }

    .pagination a,
    .pagination span {
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        text-decoration: none;
        font-weight: 500;
    }

    .pagination a {
        background: var(--surface);
        color: var(--text-primary);
        border: 1px solid var(--border);
    }

    .pagination a:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .pagination .current {
        background: var(--primary);
        color: white;
    }

    .pagination .disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    @media (max-width: 768px) {
        .announcements-grid {
            grid-template-columns: 1fr;
        }

        .page-header h1 {
            font-size: var(--font-size-2xl);
        }

        .filters-bar {
            padding: 0 var(--spacing-md);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <h1>Aktualnosci Norda Biznes</h1>
        <p>Informacje, wydarzenia i okazje dla czlonkow</p>
    </div>
</div>

<div class="container">
    <!-- Category filters -->
    <div class="filters-bar">
        <a href="{{ url_for('announcements_list') }}"
           class="filter-btn {% if not current_category %}active{% endif %}">
            Wszystkie
        </a>
        {% for cat in categories %}
        <a href="{{ url_for('announcements_list', category=cat) }}"
           class="filter-btn {% if current_category == cat %}active{% endif %}">
            {{ category_labels.get(cat, cat) }}
        </a>
        {% endfor %}
    </div>

    {% if announcements %}
    <div class="announcements-grid">
        {% for ann in announcements %}
        <article class="announcement-card {% if ann.is_pinned %}pinned{% endif %} {% if ann.is_featured %}featured{% endif %}">
            {% if ann.image_url %}
            <img src="{{ ann.image_url }}" alt="{{ ann.title }}" class="card-image"
                 onerror="this.outerHTML='<div class=\'card-image-placeholder\'>&#128240;</div>'">
            {% else %}
            <div class="card-image-placeholder">&#128240;</div>
            {% endif %}

            <div class="card-body">
                <div class="card-meta">
                    <span class="category-badge category-{{ ann.category }}">
                        {{ category_labels.get(ann.category, ann.category) }}
                    </span>
                    {% if ann.is_pinned %}
                    <span class="pinned-badge">&#128204; Przypiete</span>
                    {% endif %}
                </div>

                <h2 class="card-title">
                    <a href="{{ url_for('announcement_detail', slug=ann.slug) }}">
                        {{ ann.title }}
                    </a>
                </h2>

                <p class="card-excerpt">
                    {% if ann.excerpt %}
                        {{ ann.excerpt }}
                    {% else %}
                        {{ ann.content|striptags|truncate(150) }}
                    {% endif %}
                </p>

                <div class="card-footer">
                    <span class="card-date">
                        {{ ann.published_at.strftime('%d.%m.%Y') if ann.published_at else '' }}
                    </span>
                    <a href="{{ url_for('announcement_detail', slug=ann.slug) }}" class="card-link">
                        Czytaj wiecej &rarr;
                    </a>
                </div>
            </div>
        </article>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <nav class="pagination">
        {% if page > 1 %}
        <a href="{{ url_for('announcements_list', page=page-1, category=current_category) }}">&laquo; Poprzednia</a>
        {% else %}
        <span class="disabled">&laquo; Poprzednia</span>
        {% endif %}

        {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
            <span class="current">{{ p }}</span>
            {% elif p <= 3 or p >= total_pages - 2 or (p >= page - 1 and p <= page + 1) %}
            <a href="{{ url_for('announcements_list', page=p, category=current_category) }}">{{ p }}</a>
            {% elif p == 4 or p == total_pages - 3 %}
            <span>...</span>
            {% endif %}
        {% endfor %}

        {% if page < total_pages %}
        <a href="{{ url_for('announcements_list', page=page+1, category=current_category) }}">Nastepna &raquo;</a>
        {% else %}
        <span class="disabled">Nastepna &raquo;</span>
        {% endif %}
    </nav>
    {% endif %}

    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">&#128240;</div>
        <h3>Brak ogloszen</h3>
        <p>
            {% if current_category %}
            Nie ma jeszcze ogloszen w kategorii "{{ category_labels.get(current_category, current_category) }}".
            <br><a href="{{ url_for('announcements_list') }}">Zobacz wszystkie ogloszenia</a>
            {% else %}
            Nie ma jeszcze zadnych ogloszen. Wkrotce pojawia sie nowe informacje.
            {% endif %}
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}