<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>500 - 服务器错误 | 智队中枢</title>
    
    {# Tailwind CSS #}
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
    <div class="text-center px-4">
        {# 500 数字 #}
        <div class="text-[150px] font-bold text-red-200 dark:text-red-900/30 leading-none select-none">
            500
        </div>
        
        {# 错误信息 #}
        <div class="mt-[-20px] mb-8">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">服务器错误</h1>
            <p class="text-gray-500 dark:text-gray-400">抱歉，服务器遇到了一个意外情况</p>
        </div>
        
        {# 操作按钮 #}
        <div class="flex items-center justify-center gap-4">
            <button onclick="location.reload()" class="btn btn-secondary flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
                刷新页面
            </button>
            <a href="/" class="btn btn-primary flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                返回首页
            </a>
        </div>
        
        {# 错误详情 #}
        {% if error %}
        <div class="mt-8 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg max-w-2xl mx-auto text-left">
            <h3 class="font-semibold text-red-700 dark:text-red-400 mb-2">错误信息</h3>
            <pre class="text-sm text-red-600 dark:text-red-300 overflow-auto">{{ error }}</pre>
        </div>
        {% endif %}
        
        {# 建议 #}
        <div class="mt-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm max-w-md mx-auto">
            <h3 class="font-semibold text-gray-900 dark:text-white mb-3">如果问题持续存在</h3>
            <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2 text-left">
                <li class="flex items-start gap-2">
                    <svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>稍后再试</span>
                </li>
                <li class="flex items-start gap-2">
                    <svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>清除浏览器缓存</span>
                </li>
                <li class="flex items-start gap-2">
                    <svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>联系管理员报告问题</span>
                </li>
            </ul>
        </div>
        
        {# 页脚 #}
        <div class="mt-8 text-sm text-gray-400 dark:text-gray-500">
            智队中枢 v0.7.0 | <a href="https://github.com/yunxiafei/pit-router" class="hover:text-primary-500">GitHub</a>
        </div>
    </div>
    
    <script>
        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', savedTheme);
    </script>
</body>
</html>
