{% extends "base.html" %}
{% block page %}
    <div class="bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle">
        <div class="login-background d-flex justify-content-center align-items-center min-vh-100">
            <div class="container-xxl">
                <div class="authentication-wrapper authentication-basic container-p-y">
                    <div class="container-xxl d-flex justify-content-center align-items-center">
                        <div class="authentication-inner py-4">
                            <div class="layout-main-wrapper mt-0 mb-0">
                                <div class="layout-main-placeholder d-flex justify-content-center align-items-center">
                                    <div class="text-center">
                                        <div class="mb-4">
                                            {% if error_code == 404 %}
                                                <i class="bx bx-error text-warning fs-1 display-1"></i>
                                            {% elif error_code >= 500 %}
                                                <i class="bx bx-server-down text-danger fs-1 display-1"></i>
                                            {% elif error_code == 401 %}
                                                <i class="bx bx-shield-quarter text-danger fs-1 display-1"></i>
                                            {% else %}
                                                <i class="bx bx-lock-alt text-danger fs-1 display-1"></i>
                                            {% endif %}
                                        </div>
                                        <div class="mb-4">
                                            <div class="alert alert-danger p-3">
                                                <h2 class="alert-heading">
                                                    {% if error_code == 404 %}
                                                        <span data-i18n="error.404.title">Not Found</span>
                                                    {% elif error_code >= 500 %}
                                                        <span data-i18n="error.5xx.title">Server Error</span>
                                                    {% elif error_code == 401 %}
                                                        <span data-i18n="error.401.title">Authentication Required</span>
                                                    {% else %}
                                                        <span data-i18n="error.403.title">Access Denied</span>
                                                    {% endif %}
                                                </h2>
                                                <p class="mb-0">
                                                    {% if error_code == 404 %}
                                                        <span data-i18n="error.404.message">The requested resource could not be found.</span>
                                                    {% elif error_code >= 500 %}
                                                        <span data-i18n="error.5xx.message">An unexpected server error occurred.</span>
                                                    {% elif error_code == 401 %}
                                                        <span data-i18n="error.401.message">Please log in to continue.</span>
                                                    {% else %}
                                                        <span data-i18n="error.403.message">You don't have permission to access this page.</span>
                                                    {% endif %}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layout-main-info mt-3 mb-1 text-center">
                                    <h3 class="mb-0 don-jose text-danger">{{ message|default("Unauthorized Access") }}</h3>
                                    {% if detail %}
                                        <p class="mb-3 mt-2 text-{% if theme == 'light' %}dark{% else %}light{% endif %}-emphasis">{{ detail }}</p>
                                    {% else %}
                                        <p class="mb-3 mt-2 text-{% if theme == 'light' %}dark{% else %}light{% endif %}-emphasis">
                                            {% if error_code == 404 %}
                                                <span data-i18n="error.404.help">Please check that the URL is correct or contact an administrator if you believe this is an error.</span>
                                            {% elif error_code >= 500 %}
                                                <span data-i18n="error.5xx.help">Please try again later or contact an administrator if the problem persists.</span>
                                            {% elif error_code == 401 %}
                                                <span data-i18n="error.401.help">You must be logged in to access this resource.</span>
                                            {% else %}
                                                <span data-i18n="error.403.help">Please verify your credentials or contact an administrator if you believe this is an error.</span>
                                            {% endif %}
                                        </p>
                                    {% endif %}
                                    <div class="mt-3">
                                        <div class="d-flex gap-2">
                                            <button id="go-back-btn" class="btn btn-outline-secondary flex-fill">
                                                <i class="bx bx-chevron-left me-2"></i><span data-i18n="button.go_back">Go Back</span>
                                            </button>
                                            {% if next %}
                                                <a href="{{ next }}" class="btn btn-primary flex-fill">
                                                    <i class="bx bx-home me-2"></i><span data-i18n="button.return_to_safety">Return to Safety</span>
                                                </a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if next %}<input type="hidden" id="next-endpoint" value="{{ next }}" />{% endif %}
    {% if auto_redirect %}
        <script nonce="{{ script_nonce }}" defer>
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                window.location.href = "{{ next }}";
            }, {{ redirect_delay|default(3000) }});
        });
        </script>
    {% endif %}
{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='js/pages/unauthorized.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}