{% extends "error_base.html.j2" %}

{% block title %}500 — Server Error{% endblock %}

{% block content %}
<div class="empty">
    <div class="empty-header">500</div>
    <p class="empty-title">Something went wrong</p>
    <p class="empty-subtitle text-secondary">
        An unexpected error occurred while processing your request.
    </p>

    {% if error_message %}
    <div class="mt-3 mb-2" style="max-width: 520px; margin-inline: auto;">
        <div class="alert alert-danger d-flex align-items-start gap-2 text-start mb-0">
            <i class="ti ti-alert-circle flex-shrink-0 mt-1"></i>
            <span>{{ error_message }}</span>
        </div>
    </div>
    {% endif %}

    {% if traceback %}
    <div class="mt-3 text-start" style="max-width: 720px; margin-inline: auto;">
        <p class="text-uppercase text-muted fw-semibold small mb-1">Traceback</p>
        <pre class="rounded p-3 small mb-0" style="
            background: var(--c-elevated);
            color: var(--c-danger);
            max-height: 380px;
            overflow: auto;
            border: 1px solid var(--c-border);
            font-family: var(--font-mono, 'JetBrains Mono', monospace);
        ">{{ traceback | e }}</pre>
    </div>
    {% endif %}

    <div class="empty-action">
        <a href="{{ fp_admin_base_url | default('/') }}" class="btn btn-primary">
            <i class="ti ti-home me-1"></i>
            Take me home
        </a>
        <button onclick="history.back()" class="btn btn-outline-secondary ms-2">
            <i class="ti ti-arrow-left me-1"></i>
            Go back
        </button>
    </div>
</div>
{% endblock %}
