{% extends "base.html" %}

{% block title %}Error - {{ app_name }}{% endblock %}
{% block page_title %}Error{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-icon">
        <i class="fas fa-exclamation-triangle"></i>
    </div>
    <h2>Oops! Something went wrong</h2>
    <p class="error-message">{{ error }}</p>
    <div class="error-actions">
        <a href="/" class="btn btn-primary">
            <i class="fas fa-home"></i> Go to Dashboard
        </a>
        <button onclick="history.back()" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Go Back
        </button>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}
.error-icon {
    font-size: 4rem;
    color: var(--danger);
    margin-bottom: 1rem;
}
.error-container h2 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.error-message {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 500px;
}
.error-actions {
    display: flex;
    gap: 1rem;
}
</style>
{% endblock %}