{% extends "base.html" %}

{% block title %}Error {{ status_code }}{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        max-width: 600px;
        margin: 100px auto;
        padding: 40px;
        text-align: center;
    }
    
    .error-code {
        font-size: 72px;
        font-weight: bold;
        color: #dc3545;
        margin: 0;
    }
    
    .error-message {
        font-size: 24px;
        color: #555;
        margin: 20px 0;
    }
    
    .error-detail {
        color: #777;
        margin: 20px 0;
    }
    
    .error-actions {
        margin-top: 40px;
    }
    
    .error-actions a {
        display: inline-block;
        padding: 12px 24px;
        background: #0066cc;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        margin: 0 10px;
    }
    
    .error-actions a:hover {
        background: #0052a3;
        text-decoration: none;
    }
</style>
{% endblock %}

{% block body %}
<div class="error-container">
    <h1 class="error-code">{{ status_code }}</h1>
    <p class="error-message">{{ message }}</p>
    
    {% if detail %}
    <p class="error-detail">{{ detail }}</p>
    {% endif %}
    
    <div class="error-actions">
        <a href="/">Go to Home</a>
        {% if show_back %}
        <a href="javascript:history.back()">Go Back</a>
        {% endif %}
    </div>
</div>
{% endblock %}