{% extends "layout.html" %}

{% block title %}数据库连接失败 - 知了数学题库系统{% endblock %}

{% block content %}
<div class="apple-card p-10">
  <div class="flex items-start justify-between gap-6">
    <div>
      <h1 class="text-2xl font-bold mb-2">数据库连接失败</h1>
      <p class="text-gray-500">网页能打开，但数据库没连上，所以暂时取不到题目数据。</p>
    </div>
    <button class="btn-apple bg-blue-600 text-white hover:bg-blue-700 no-print" onclick="window.location.reload()">
      重新加载
    </button>
  </div>

  <div class="mt-8 grid grid-cols-1 {% if db_host %}md:grid-cols-2{% endif %} gap-6">
    {% if db_host %}
    <div class="bg-gray-50 rounded-2xl p-6 border border-gray-100">
      <div class="text-sm font-bold text-gray-400 uppercase mb-3">当前数据库配置</div>
      <div class="text-sm text-gray-700 space-y-1 font-mono">
        <div>host: {{ db_host }}</div>
        <div>port: {{ db_port }}</div>
        <div>db:   {{ db_name }}</div>
        <div>user: {{ db_user }}</div>
      </div>
    </div>
    {% endif %}

    <div class="bg-gray-50 rounded-2xl p-6 border border-gray-100">
      <div class="text-sm font-bold text-gray-400 uppercase mb-3">错误信息</div>
      <pre class="text-xs text-red-600 whitespace-pre-wrap break-words font-mono">{{ error }}</pre>
    </div>
  </div>

  {% if db_host %}
  <div class="mt-8 text-sm text-gray-600 leading-relaxed">
    <div class="font-bold mb-2">你可以按这个顺序检查：</div>
    <ul class="list-disc pl-6 space-y-1">
      <li>网络是否能访问数据库（公司/校园网可能拦截 3306）</li>
      <li>账号密码是否正确（root / csqz@20255）</li>
      <li>数据库名是否正确（math-online）</li>
      <li>如果 SSL 握手失败，可临时设置环境变量：DB_USE_SSL=false</li>
    </ul>
  </div>
  {% endif %}
</div>
{% endblock %}