{% extends "base.html" %}

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

{% block extra_css %}
<style>
    .page-header {
        margin-bottom: var(--spacing-2xl);
    }

    .page-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
    }

    .page-header p {
        color: var(--text-secondary);
        margin-top: var(--spacing-sm);
    }

    .announcements-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .announcement-card {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        border-left: 4px solid var(--primary);
    }

    .announcement-card.pinned {
        border-left-color: var(--warning);
        background: linear-gradient(to right, var(--warning-bg), var(--surface));
    }

    .announcement-card.type-fees {
        border-left-color: var(--warning);
    }

    .announcement-card.type-important {
        border-left-color: var(--error);
    }

    .announcement-card.type-urgent {
        border-left-color: var(--error);
        background: var(--error-bg);
    }

    .announcement-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-md);
        gap: var(--spacing-md);
        flex-wrap: wrap;
    }

    .announcement-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .announcement-meta {
        display: flex;
        gap: var(--spacing-md);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .announcement-content {
        color: var(--text-primary);
        line-height: 1.6;
    }

    .announcement-content p {
        margin-bottom: var(--spacing-md);
    }

    .type-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;
        text-transform: uppercase;
    }

    .type-badge.fees { background: var(--warning-bg); color: var(--warning); }
    .type-badge.important { background: var(--error-bg); color: var(--error); }
    .type-badge.urgent { background: var(--error); color: white; }
    .type-badge.event { background: var(--info-bg); color: var(--info); }
    .type-badge.general { background: var(--primary-bg); color: var(--primary); }

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

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

    .empty-state p {
        font-size: var(--font-size-lg);
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Ogloszenia</h1>
        <p>Aktualnosci i komunikaty od zarzadu Norda Biznes</p>
    </div>

    {% if announcements %}
    <div class="announcements-list">
        {% for ann in announcements %}
        <article class="announcement-card {% if ann.is_pinned %}pinned{% endif %} type-{{ ann.announcement_type }}">
            <div class="announcement-header">
                <h2 class="announcement-title">
                    {% if ann.is_pinned %}<span class="pinned-badge">Przypiete</span>{% endif %}
                    <span class="type-badge {{ ann.announcement_type }}">
                        {% if ann.announcement_type == 'fees' %}Skladki
                        {% elif ann.announcement_type == 'important' %}Wazne
                        {% elif ann.announcement_type == 'urgent' %}Pilne
                        {% elif ann.announcement_type == 'event' %}Wydarzenie
                        {% else %}Ogolne
                        {% endif %}
                    </span>
                    {{ ann.title }}
                </h2>
                <div class="announcement-meta">
                    <span>{{ ann.created_at.strftime('%d.%m.%Y') if ann.created_at else '' }}</span>
                    <span>{{ ann.author.name if ann.author else 'Zarzad' }}</span>
                </div>
            </div>
            <div class="announcement-content">
                {{ ann.content|safe }}
            </div>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>Brak aktualnych ogloszen.</p>
    </div>
    {% endif %}
</div>
{% endblock %}