{% extends "base.html" %}

{% block title %}500 - Błąd serwera{% 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(--error);
        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">500</div>
    <h1 class="error-title">Błąd serwera</h1>
    <p class="error-message">
        Przepraszamy, wystąpił nieoczekiwany błąd. Nasz zespół został powiadomiony i pracuje nad rozwiązaniem problemu.
    </p>

    <div class="error-illustration">
        <img src="{{ url_for('static', filename='img/norda-logo.svg') }}" alt="Norda Biznes" style="height:80px;opacity:0.4;">
    </div>

    <div class="error-actions">
        <a href="{{ url_for('index') }}" class="btn btn-primary">
            Strona główna
        </a>
        <a href="javascript:location.reload()" class="btn btn-outline">
            Odśwież stronę
        </a>
    </div>
</div>
{% endblock %}