{% extends "base.html" %}

{% block title %}{{ error_code }} - {{ error_title }}{% endblock %}
{% block meta_description %}{{ error_message }}{% endblock %}

{% block content %}
<div class="error-page" data-testid="error-page">
    <div class="error-content" data-testid="error-content">
        <div class="error-icon" data-testid="error-icon">
            {% if error_code == 404 %}
            🔍
            {% elif error_code == 403 %}
            🚫
            {% elif error_code == 500 %}
            ⚠️
            {% else %}
            ❌
            {% endif %}
        </div>
        
        <h1 class="error-code" data-testid="error-code">{{ error_code }}</h1>
        <h2 class="error-title" data-testid="error-title">{{ error_title }}</h2>
        <p class="error-message" data-testid="error-message">{{ error_message }}</p>
        
        <div class="error-actions" data-testid="error-actions">
            <a href="/" class="btn btn-primary" data-testid="btn-error-home">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;">
                    <path d="M2 8L8 2L14 8M4 6V13H12V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Go Home
            </a>
            
            {% if error_code == 403 %}
            <a href="/auth/login" class="btn" data-testid="btn-error-login">
                Sign In
            </a>
            {% endif %}
            
            <button onclick="window.history.back()" class="btn btn-ghost" data-testid="btn-error-back">
                Go Back
            </button>
        </div>
    </div>
</div>

<style>
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.error-content {
    text-align: center;
    max-width: 500px;
}

.error-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.error-code {
    font-size: 6rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1;
}

.error-title {
    font-size: 1.5rem;
    color: var(--color-text-dark);
    margin: 1rem 0 0.5rem;
}

.error-message {
    color: var(--color-text-light);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .error-code {
        font-size: 4rem;
    }
    
    .error-icon {
        font-size: 3.5rem;
    }
    
    .error-actions {
        flex-direction: column;
    }
    
    .error-actions .btn {
        width: 100%;
    }
}
</style>
{% endblock %}