{% extends "base.html" %}

{% block title %}发生错误{% endblock %}
{% block header %}发生错误{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="bg-red-50 border border-red-200 p-8 rounded-lg shadow-lg">
        <div class="flex items-start space-x-4">
            <div class="flex-shrink-0">
                <svg class="h-10 w-10 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                </svg>
            </div>

            <div class="flex-1 min-w-0">
                <h3 class="text-xl font-bold text-red-800 mb-2">抱歉，程序遇到了一个问题</h3>
                <div class="bg-red-100 p-4 rounded-md text-gray-700 break-words">
                    <p class="font-semibold">错误详情:</p>
                    <p class="mt-1 text-sm">{{ message or '未提供具体错误信息。' }}</p>
                </div>
            </div>
        </div>

        <div class="mt-8 text-center">
            <a href="/" class="inline-block px-6 py-2 bg-amber-500 text-white rounded-md hover:bg-amber-600 transition-colors shadow-sm">
                返回首页
            </a>
            <a href="javascript:window.history.back()" class="inline-block ml-4 px-6 py-2 text-gray-800 bg-zinc-200 rounded-md hover:bg-zinc-300 transition-colors shadow-sm">
                返回上一页
            </a>
        </div>
    </div>
</div>
{% endblock %}