<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ error_code }} 错误 - Amrita Dashboard</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="stylesheet" href="/static/css/base.css" />

    <style>
      :root {
        --error-404: #ff6b6b;
        --error-403: #ff9f43;
        --error-500: #ee5253;
        --error-503: #0abde3;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
      }

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      body.dark-mode {
        background-color: var(--dark-bg-color);
        color: var(--dark-text-color);
      }

      .error-container {
        text-align: center;
        max-width: 800px;
        width: 100%;
        padding: 40px;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }

      body.dark-mode .error-container {
        background: var(--dark-card-bg);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }

      .error-icon {
        font-size: 120px;
        margin-bottom: 30px;
        animation: bounce 2s infinite;
      }

      .error-404 .error-icon {
        color: var(--error-404);
      }

      .error-403 .error-icon {
        color: var(--error-403);
      }

      .error-500 .error-icon {
        color: var(--error-500);
      }

      .error-503 .error-icon {
        color: var(--error-503);
      }

      .error-code {
        font-size: 100px;
        font-weight: 800;
        margin-bottom: 10px;
        line-height: 1;
      }

      .error-404 .error-code {
        color: var(--error-404);
      }

      .error-403 .error-code {
        color: var(--error-403);
      }

      .error-500 .error-code {
        color: var(--error-500);
      }

      .error-503 .error-code {
        color: var(--error-503);
      }

      .error-title {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
      }

      body.dark-mode .error-title {
        color: #f0f0f0;
      }

      .error-message {
        font-size: 18px;
        color: #666;
        margin-bottom: 30px;
        line-height: 1.6;
      }

      body.dark-mode .error-message {
        color: #ccc;
      }

      .error-actions {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 20px;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        padding: 12px 24px;
        background: linear-gradient(
          135deg,
          var(--primary-color),
          var(--secondary-color)
        );
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
      }

      body.dark-mode .btn {
        background: linear-gradient(
          135deg,
          var(--primary-color),
          var(--accent-color)
        );
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(138, 43, 226, 0.3);
      }

      body.dark-mode .btn:hover {
        box-shadow: 0 6px 15px rgba(186, 85, 211, 0.3);
      }

      .btn-outline {
        background: transparent;
        border: 2px solid var(--primary-color);
        color: #ffffff;
      }

      body.dark-mode .btn-outline {
        border: 2px solid var(--accent-color);
        color: #ffffff;
      }

      .btn-outline:hover {
        background: var(--primary-color);
        color: white;
      }

      body.dark-mode .btn-outline:hover {
        background: var(--accent-color);
        color: white;
      }

      .btn i {
        margin-right: 8px;
      }

      .error-details {
        margin-top: 30px;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 8px;
        text-align: left;
      }

      body.dark-mode .error-details {
        background: #1e1e1e;
      }

      .error-details summary {
        cursor: pointer;
        font-weight: 500;
        color: #666;
      }

      body.dark-mode .error-details summary {
        color: #ccc;
      }

      .error-details pre {
        margin-top: 15px;
        padding: 15px;
        background: #f1f1f1;
        border-radius: 6px;
        overflow-x: auto;
        font-size: 14px;
      }

      body.dark-mode .error-details pre {
        background: #121212;
        color: #f0f0f0;
      }

      @keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-30px);
        }
        60% {
          transform: translateY(-15px);
        }
      }

      @media (max-width: 768px) {
        .error-container {
          padding: 30px 20px;
        }

        .error-icon {
          font-size: 80px;
        }

        .error-code {
          font-size: 80px;
        }

        .error-title {
          font-size: 24px;
        }

        .error-message {
          font-size: 16px;
        }

        .error-actions {
          flex-direction: column;
          width: 100%;
        }

        .btn {
          width: 100%;
          justify-content: center;
        }
      }

      .footer {
        margin-top: 30px;
        text-align: center;
        color: #888;
        font-size: 14px;
      }

      body.dark-mode .footer {
        color: #aaa;
      }

      .footer a {
        color: var(--primary-color);
        text-decoration: none;
      }

      body.dark-mode .footer a {
        color: var(--accent-color);
      }

      .footer a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body class="error-{{ error_code }}">
    <div class="error-container">
      <div class="error-icon">
        {% if error_code == 404 %}
        <i class="fas fa-exclamation-triangle"></i>
        {% elif error_code == 403 %}
        <i class="fas fa-ban"></i>
        {% elif error_code == 500 %}
        <i class="fas fa-bug"></i>
        {% elif error_code == 503 %}
        <i class="fas fa-tools"></i>
        {% else %}
        <i class="fas fa-exclamation-circle"></i>
        {% endif %}
      </div>
      <h1 class="error-code">{{ error_code }}</h1>
      <h2 class="error-title">
        {% if error_code == 404 %} 页面未找到 {% elif error_code == 403 %}
        访问被拒绝 {% elif error_code == 500 %} 服务器内部错误 {% elif
        error_code == 503 %} 服务暂时不可用 {% else %} 出错了 {% endif %}
      </h2>
      <p class="error-message">
        {% if error_code == 404 %}
        抱歉，您要查找的页面不存在。可能已被移动或删除。 {% elif error_code ==
        403 %} 抱歉，您没有权限访问此页面。 {% elif error_code == 500 %}
        抱歉，服务器遇到了意外错误。请查看日志以了解详情。 {% elif error_code ==
        503 %} 抱歉，服务暂时不可用。 {% else %} 抱歉，发生了意外错误。 {% endif
        %}
      </p>
      <div class="error-actions">
        <a href="/" class="btn"> <i class="fas fa-home"></i> 返回首页 </a>
        <a href="javascript:history.back()" class="btn btn-outline">
          <i class="fas fa-arrow-left"></i> 返回上一页
        </a>
      </div>
      {% if debug and error_details %}
      <details class="error-details">
        <summary>错误详情 (仅开发模式显示)</summary>
        <pre>{{ error_details }}</pre>
      </details>
      {% endif %}
    </div>
    <div class="footer">
      <p>
        &copy; 2025-<span id="fullYear"></span>Powered by NoneBot2 and Amrita.
        使用GPL-3.0协议开源。
      </p>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get("token_expired") === "true") {
          alert("您的登录会话已过期，请重新登录。");
        }

        function setTheme(theme) {
          if (theme === "dark") {
            document.body.classList.add("dark-mode");
            localStorage.setItem("theme", "dark");
          } else {
            document.body.classList.remove("dark-mode");
            localStorage.setItem("theme", "light");
          }
        }

        function detectSystemTheme() {
          if (
            window.matchMedia &&
            window.matchMedia("(prefers-color-scheme: dark)").matches
          ) {
            return "dark";
          }
          return "light";
        }

        function initTheme() {
          const savedTheme = localStorage.getItem("theme");

          if (savedTheme) {
            setTheme(savedTheme);
          } else {
            const systemTheme = detectSystemTheme();
            setTheme(systemTheme);
          }

          window
            .matchMedia("(prefers-color-scheme: dark)")
            .addEventListener("change", (e) => {
              if (!localStorage.getItem("theme")) {
                setTheme(e.matches ? "dark" : "light");
              }
            });
        }

        initTheme();
      });
      const currentYear = new Date().getFullYear();
      document.getElementById("fullYear").textContent = currentYear;
    </script>
  </body>
</html>
