{% extends "base.html" %}

{% block title %}Error - Cook{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto mt-12">
    <div class="bg-red-50 border border-red-200 rounded-2xl p-6 shadow-lg">
        <div class="flex items-start gap-4">
            <div class="flex-shrink-0 text-red-500">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-red-700 mb-2">{{ tr.t("error-title") }}</h2>
                <p class="text-red-600 font-mono text-sm whitespace-pre-wrap">{{ error_message }}</p>
            </div>
        </div>
        <div class="mt-6">
            <a href="{{ prefix }}/" class="inline-block px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-all">
                {{ tr.t("error-back-home") }}
            </a>
        </div>
    </div>
</div>
{% endblock %}