nordabiz/templates/calendar/index.html

{% extends "base.html" %}

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

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

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

    .events-section {
        margin-bottom: var(--spacing-2xl);
    }

    .events-section h2 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-lg);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .event-card {
        background: var(--surface);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
        box-shadow: var(--shadow);
        display: flex;
        gap: var(--spacing-lg);
        transition: var(--transition);
    }

    .event-card:hover {
        box-shadow: var(--shadow-md);
    }

    .event-card.featured {
        border-left: 4px solid var(--primary);
    }

    .event-card.past {
        opacity: 0.7;
    }

    .event-date-box {
        min-width: 70px;
        text-align: center;
        background: var(--primary);
        color: white;
        border-radius: var(--radius);
        padding: var(--spacing-sm);
    }

    .event-date-box .day {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        line-height: 1;
    }

    .event-date-box .month {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
    }

    .event-info {
        flex: 1;
    }

    .event-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

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

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

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

    .event-meta span {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .event-description {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
    }

    .event-actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .attendee-count {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

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

    .badge-type {
        display: inline-block;
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 500;
        text-transform: uppercase;
    }

    .badge-type.meeting { background: #dbeafe; color: #1e40af; }
    .badge-type.webinar { background: #dcfce7; color: #166534; }
    .badge-type.networking { background: #fef3c7; color: #92400e; }
</style>
{% endblock %}

{% block content %}
<div class="calendar-header">
    <h1>Kalendarz wydarzen</h1>
    <p class="text-muted">Spotkania i wydarzenia Norda Biznes</p>
</div>

<!-- Nadchodzące wydarzenia -->
<div class="events-section">
    <h2>Nadchodzace wydarzenia</h2>

    {% if upcoming_events %}
        {% for event in upcoming_events %}
        <div class="event-card {% if event.is_featured %}featured{% endif %}">
            <div class="event-date-box">
                <div class="day">{{ event.event_date.day }}</div>
                <div class="month">{{ event.event_date.strftime('%b') }}</div>
            </div>
            <div class="event-info">
                <div class="event-title">
                    <a href="{{ url_for('calendar_event', event_id=event.id) }}">{{ event.title }}</a>
                </div>
                <div class="event-meta">
                    <span class="badge-type {{ event.event_type }}">{{ event.event_type }}</span>
                    {% if event.time_start %}
                    <span>{{ event.time_start.strftime('%H:%M') }}{% if event.time_end %} - {{ event.time_end.strftime('%H:%M') }}{% endif %}</span>
                    {% endif %}
                    {% if event.location %}
                    <span>{{ event.location }}</span>
                    {% endif %}
                    {% if event.speaker_name %}
                    <span>Prelegent: {{ event.speaker_name }}</span>
                    {% endif %}
                </div>
                {% if event.description %}
                <div class="event-description">{{ event.description[:150] }}{% if event.description|length > 150 %}...{% endif %}</div>
                {% endif %}
            </div>
            <div class="event-actions">
                <span class="attendee-count">{{ event.attendee_count }} uczestnikow</span>
                <a href="{{ url_for('calendar_event', event_id=event.id) }}" class="btn btn-primary btn-sm">Szczegoly</a>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <p>Brak nadchodzacych wydarzen</p>
        </div>
    {% endif %}
</div>

<!-- Przeszłe wydarzenia -->
{% if past_events %}
<div class="events-section">
    <h2>Ostatnie wydarzenia</h2>

    {% for event in past_events %}
    <div class="event-card past">
        <div class="event-date-box" style="background: var(--secondary);">
            <div class="day">{{ event.event_date.day }}</div>
            <div class="month">{{ event.event_date.strftime('%b') }}</div>
        </div>
        <div class="event-info">
            <div class="event-title">
                <a href="{{ url_for('calendar_event', event_id=event.id) }}">{{ event.title }}</a>
            </div>
            <div class="event-meta">
                <span class="badge-type {{ event.event_type }}">{{ event.event_type }}</span>
                {% if event.location %}
                <span>{{ event.location }}</span>
                {% endif %}
            </div>
        </div>
        <div class="event-actions">
            <span class="attendee-count">{{ event.attendee_count }} uczestnikow</span>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

{% if current_user.is_admin %}
<div style="margin-top: var(--spacing-xl);">
    <a href="{{ url_for('admin_calendar') }}" class="btn btn-secondary">Zarzadzaj wydarzeniami</a>
</div>
{% endif %}
{% endblock %}