{% extends "base.html.jinja" %}

{% block content %}
<section class="max-w-lg mx-auto px-4 pt-24 text-center">
    <p class="text-6xl font-bold text-gray-300">{{ status }}</p>
    <h1 class="mt-4 text-2xl font-bold">{{ heading }}</h1>
    <p class="mt-2 text-gray-600">{{ message }}</p>
    {% if detail %}
    <details class="mt-6 text-left border border-gray-200 rounded-lg">
        <summary class="px-4 py-2 text-sm text-gray-500 cursor-pointer hover:text-gray-700">Error details</summary>
        <pre class="px-4 py-3 text-xs text-red-700 bg-gray-50 overflow-x-auto whitespace-pre-wrap break-words border-t border-gray-200">{{ detail }}</pre>
    </details>
    {% endif %}
    <a href="/" class="inline-block mt-8 text-sm text-gray-500 hover:text-gray-700">&larr; Back to home</a>
</section>
{% endblock %}