{% extends "base.html" %}

{% block title %}{{ error_info.title if error_info else error.code }} {{ error.name }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-[60vh] px-4 py-8">
    <div class="w-full max-w-md text-center">
        <div class="bg-card-light dark:bg-card-dark rounded-xl border border-border-light dark:border-border-dark shadow-sm p-6 sm:p-8">
            <div class="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
                <i class="fas fa-exclamation-triangle text-2xl sm:text-3xl text-red-500"></i>
            </div>
            <h1 class="text-5xl font-bold text-text-light/20 dark:text-text-dark/20 mb-2">{{ error.code }}</h1>
            <h2 class="text-lg font-semibold text-text-light dark:text-text-dark mb-2">
                {{ error_info.title if error_info else error.name }}
            </h2>
            <p class="text-sm text-text-light/60 dark:text-text-dark/60 mb-6">
                {{ error_info.message if error_info else (error.description if error.description else _('An error occurred while processing your request.')) }}
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
                {% if error_info and error_info.recovery %}
                    {% for action in error_info.recovery %}
                        {% if 'Dashboard' in action %}
                            <a href="{{ url_for('main.dashboard') }}" class="btn btn-primary">
                                <i class="fas fa-home"></i> {{ _('Go to Dashboard') }}
                            </a>
                        {% elif 'Back' in action %}
                            <button onclick="history.back()" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> {{ _('Go Back') }}
                            </button>
                        {% elif 'Refresh' in action %}
                            <button onclick="location.reload()" class="btn btn-primary">
                                <i class="fas fa-redo"></i> {{ _('Refresh Page') }}
                            </button>
                        {% elif 'Login' in action %}
                            <a href="{{ url_for('auth.login') }}" class="btn btn-primary">
                                <i class="fas fa-sign-in-alt"></i> {{ _('Go to Login') }}
                            </a>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <a href="{{ url_for('main.dashboard') }}" 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>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
