{% extends "base.html" %}

{% block title %}{{ error_title | default('Error') }} - certmesh Dashboard{% endblock %}

{% block content %}
<div class="row justify-content-center align-items-center min-vh-75">
    <div class="col-sm-10 col-md-8 col-lg-6">
        <div class="card shadow">
            <div class="card-body p-4 p-md-5 text-center">
                <!-- Error icon -->
                <div class="mb-4">
                    {% if error_code == 401 or error_code == 403 %}
                    <i class="bi bi-shield-exclamation text-warning" style="font-size: 4rem;"></i>
                    {% elif error_code == 404 %}
                    <i class="bi bi-question-circle text-secondary" style="font-size: 4rem;"></i>
                    {% elif error_code == 503 %}
                    <i class="bi bi-gear text-info" style="font-size: 4rem;"></i>
                    {% else %}
                    <i class="bi bi-exclamation-triangle text-danger" style="font-size: 4rem;"></i>
                    {% endif %}
                </div>

                <!-- Error details -->
                <h3 class="fw-bold mb-3">{{ error_title | default('Something went wrong') | e }}</h3>
                <p class="text-body-secondary mb-4">{{ error_message | default('An unexpected error occurred.') | e }}</p>

                {% if error_code %}
                <p class="text-body-secondary small mb-4">Error code: {{ error_code }}</p>
                {% endif %}

                <!-- Actions -->
                <div class="d-flex justify-content-center gap-3">
                    <a href="/dashboard" class="btn btn-primary">
                        <i class="bi bi-house me-1"></i>Go to Dashboard
                    </a>
                    <a href="/dashboard/login" class="btn btn-outline-secondary">
                        <i class="bi bi-box-arrow-in-right me-1"></i>Sign In
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}