{% extends "./layout.html" %}
{% block content %}
<style>
    .error-wrapper {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: radial-gradient(circle at center, rgba(255, 107, 0, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    }

    .error-card {
        max-width: 500px;
        width: 100%;
        text-align: center;
        padding: 40px 30px;
        border: 2px solid var(--border-orange);
        background: var(--glass-medium);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
        animation: slideUp 0.5s ease-out;
    }

    @keyframes slideUp {
        from {
            transform: translateY(50px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .error-icon {
        font-size: 5rem;
        margin-bottom: 20px;
        color: var(--yellow-glow);
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    .error-code {
        font-size: 4rem;
        font-weight: 900;
        line-height: 1;
        background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 10px;
    }

    .error-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 15px;
    }

    .error-desc {
        color: var(--text-secondary);
        font-size: 0.95rem;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    .troubleshoot-box {
        text-align: left;
        background: rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 25px;
        border: 1px solid var(--border-primary);
    }

    .troubleshoot-title {
        color: var(--yellow-bright);
        font-weight: 600;
        margin-bottom: 10px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .troubleshoot-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .troubleshoot-list li {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 8px;
        padding-left: 20px;
        position: relative;
    }

    .troubleshoot-list li::before {
        content: '•';
        color: var(--orange-primary);
        position: absolute;
        left: 5px;
        font-weight: bold;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .btn-secondary {
        padding: 12px 24px;
        border-radius: 12px;
        border: 2px solid var(--border-primary);
        background: transparent;
        color: var(--text-accent);
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-secondary:hover {
        border-color: var(--yellow-glow);
        color: var(--yellow-glow);
        transform: translateY(-2px);
    }
</style>

<div class="error-wrapper">
    <div class="error-card">
        <div class="error-icon">
            {% if code == 404 %}
            <i class="fas fa-map-signs"></i>
            {% elif code == 500 %}
            <i class="fas fa-cogs"></i>
            {% else %}
            <i class="fas fa-exclamation-circle"></i>
            {% endif %}
        </div>

        <div class="error-code">{{ code }}</div>
        <div class="error-title">{{ name }}</div>
        <div class="error-desc">{{ description }}</div>

        <div class="troubleshoot-box">
            <div class="troubleshoot-title">
                <i class="fas fa-tools"></i> Что можно сделать?
            </div>
            <ul class="troubleshoot-list">
                <li>Проверьте адрес страницы (URL)</li>
                <li>Попробуйте обновить страницу (F5)</li>
                <li>Если ошибка повторяется — сервер может перезагружаться</li>
                <li>Свяжитесь с админом, если проблема не исчезает</li>
            </ul>
        </div>

        <div class="action-buttons">
            {% if username %}
            <a href="/user/{{ username }}" class="btn-orange"
                style="padding: 12px 24px; border-radius: 12px; text-decoration: none;">
                <i class="fas fa-home"></i> На домашнюю
            </a>
            {% else %}
            <a href="/" class="btn-orange" style="padding: 12px 24px; border-radius: 12px; text-decoration: none;">
                <i class="fas fa-home"></i> На главную
            </a>
            {% endif %}
            <button onclick="window.location.reload()" class="btn-secondary"
                style="cursor: pointer; font-size: inherit; font-family: inherit;">
                <i class="fas fa-sync-alt"></i> Обновить
            </button>
            <a href="https://t.me/rezwift" target="_blank" class="btn-secondary">
                <i class="fab fa-telegram"></i> Поддержка
            </a>
        </div>
    </div>
</div>
{% endblock %}