{% extends "base_example.html" %}
{% block title %}{{ _('Error') }}{% endblock %}
{% block content %}
    <div class="flex items-center justify-center">
        <div class="w-full max-w-md rounded-xl bg-white shadow-lg border border-slate-200 p-8 text-center">
            <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                ⚠️
            </div>

            <h2 class="text-2xl font-semibold text-slate-800">
                {{ _('An error occurred') }}
            </h2>

            <p class="mt-2 text-slate-600">
                {{ _('Something went wrong, please try again later.') }}
            </p>

            <a href="/"
               class="inline-block mt-6 px-5 py-2 rounded-lg
                  bg-primary text-light font-medium
                  hover:bg-primary/90 transition shadow">
                {{ _('Back Home') }}
            </a>
        </div>
    </div>
{% endblock %}