{% extends "base.html" %}

{% block title %}404 - Strona nie znaleziona{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        text-align: center;
        padding: var(--spacing-2xl) 0;
        max-width: 600px;
        margin: 0 auto;
    }

    .error-code {
        font-size: 120px;
        font-weight: 700;
        color: var(--primary);
        line-height: 1;
        margin-bottom: var(--spacing-md);
    }

    .error-title {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    .error-message {
        font-size: var(--font-size-lg);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-xl);
        line-height: 1.6;
    }

    .error-actions {
        display: flex;
        gap: var(--spacing-md);
        justify-content: center;
        flex-wrap: wrap;
    }

    .error-illustration {
        margin: var(--spacing-2xl) 0;
        opacity: 0.5;
    }
</style>
{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-code">404</div>
    <h1 class="error-title">Strona nie znaleziona</h1>
    <p class="error-message">
        Przepraszamy, ale strona której szukasz nie istnieje lub została przeniesiona.
    </p>

    <div class="error-illustration">
        <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="100" cy="100" r="80" stroke="currentColor" stroke-width="4" opacity="0.2"/>
            <path d="M70 90 L70 90M130 90 L130 90M60 130 Q100 160 140 130" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.3"/>
        </svg>
    </div>

    <div class="error-actions">
        <a href="{{ url_for('index') }}" class="btn btn-primary">
            Strona główna
        </a>
        <a href="javascript:history.back()" class="btn btn-outline">
            Wróć
        </a>
    </div>
</div>
{% endblock %}