{% extends "base.html" %}

{% block title %}Raporty - Norda Biznes Partner{% endblock %}

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

    .reports-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .reports-header p {
        color: var(--text-secondary);
        font-size: var(--font-size-lg);
    }

    .reports-info-banner {
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        border: 1px solid #7dd3fc;
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .reports-info-banner svg {
        width: 24px;
        height: 24px;
        color: #0284c7;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .reports-info-banner .info-content {
        flex: 1;
    }

    .reports-info-banner .info-title {
        font-weight: 600;
        color: #0c4a6e;
        margin-bottom: var(--spacing-xs);
    }

    .reports-info-banner .info-text {
        color: #0369a1;
        font-size: var(--font-size-sm);
    }

    .reports-grid {
        display: grid;
        gap: var(--spacing-lg);
    }

    .report-card {
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        transition: all 0.2s ease;
        display: flex;
        gap: var(--spacing-lg);
    }

    .report-card:hover {
        border-color: var(--primary);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

    .report-icon {
        font-size: 2.5rem;
        flex-shrink: 0;
    }

    .report-content {
        flex: 1;
    }

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

    .report-description {
        color: var(--text-secondary);
        margin-bottom: var(--spacing-md);
        line-height: 1.6;
    }

    .report-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
        font-size: var(--font-size-sm);
    }

    .report-link:hover {
        color: var(--primary-dark);
    }

    .report-link svg {
        width: 16px;
        height: 16px;
        transition: transform 0.2s;
    }

    .report-card:hover .report-link svg {
        transform: translateX(4px);
    }

    @media (max-width: 640px) {
        .report-card {
            flex-direction: column;
            text-align: center;
        }

        .report-link {
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="reports-header">
        <h1>Raporty</h1>
        <p>Analizy i statystyki członków Izby NORDA</p>
    </div>

    <div class="reports-info-banner">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <div class="info-content">
            <div class="info-title">Raporty generowane w czasie rzeczywistym</div>
            <div class="info-text">
                Wszystkie raporty są generowane na bieżąco z danych systemu nordabiznes.pl.
                Każdy raport zawiera informację o czasie wygenerowania i źródle danych.
            </div>
        </div>
    </div>

    <div class="reports-grid">
        {% for report in reports %}
        <div class="report-card">
            <div class="report-icon">{{ report.icon }}</div>
            <div class="report-content">
                <div class="report-title">{{ report.title }}</div>
                <div class="report-description">{{ report.description }}</div>
                <a href="{{ report.url }}" class="report-link">
                    Zobacz raport
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                    </svg>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}