<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      {% block title %}Amrita Dashboard - Amrita Bot管理后台{% endblock %}
    </title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="shortcut icon" href="/static/images/Amrita.png" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
      :root {
          --primary-color: #8a2be2;
          --secondary-color: #9370db;
          --accent-color: #ba55d3;
          --text-color: #333;
          --text-light: #fff;
          --bg-color: #f8f9fa;
          --sidebar-bg: #2c3e50;
          --sidebar-hover: #34495e;
          --header-height: 60px;
          --transition-speed: 0.3s;
      }

      * {
          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);
          overflow-x: hidden;
      }

      /* 布局 */
      .dashboard-container {
          display: flex;
          min-height: 100vh;
      }

      /* 侧边栏 */
      .sidebar {
          width: 250px;
          background: var(--sidebar-bg);
          color: var(--text-light);
          transition: width var(--transition-speed);
          overflow-y: auto;
          height: 100vh;
          position: fixed;
          left: 0;
          top: 0;
          z-index: 1000;
      }

      .sidebar.collapsed {
          width: 60px;
      }

      .sidebar-header {
          padding: 20px 15px;
          display: flex;
          align-items: center;
          height: var(--header-height);
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .sidebar-logo {
          width: 35px;
          height: 35px;
          background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          flex-shrink: 0;
      }

      .sidebar-title {
          font-weight: 600;
          font-size: 18px;
          white-space: nowrap;
          overflow: hidden;
      }

      .sidebar.collapsed .sidebar-title {
          display: none;
      }

      .sidebar-menu {
          padding: 15px 0;
      }

      .menu-item {
          position: relative;
      }

      .menu-link {
          display: flex;
          align-items: center;
          padding: 12px 15px;
          color: var(--text-light);
          text-decoration: none;
          transition: all 0.3s;
          border-left: 3px solid transparent;
      }

      .menu-link:hover, .menu-link.active {
          background: var(--sidebar-hover);
          border-left-color: var(--accent-color);
      }

      .menu-icon {
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          flex-shrink: 0;
      }

      .menu-text {
          white-space: nowrap;
          overflow: hidden;
      }

      .sidebar.collapsed .menu-text {
          display: none;
      }

      .menu-arrow {
          margin-left: auto;
          transition: transform 0.3s;
      }

      .sidebar.collapsed .menu-arrow {
          display: none;
      }

      .menu-item.open .menu-arrow {
          transform: rotate(90deg);
      }

      .submenu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
          background: rgba(0, 0, 0, 0.2);
      }

      .menu-item.open .submenu {
          max-height: 500px;
      }

      .submenu-item {
          padding: 10px 15px 10px 45px;
      }

      .submenu-link {
          color: var(--text-light);
          text-decoration: none;
          display: block;
          opacity: 0.8;
          transition: opacity 0.3s;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .submenu-link:hover, .submenu-link.active {
          opacity: 1;
          color: var(--accent-color);
      }

      .sidebar.collapsed .submenu {
          display: none;
      }

      /* 主内容区域 */
      .main-content {
          flex: 1;
          margin-left: 250px;
          transition: margin-left var(--transition-speed);
      }

      .main-content.expanded {
          margin-left: 60px;
      }

      /* 顶部导航栏 */
      .topbar {
          height: var(--header-height);
          background: #fff;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          position: sticky;
          top: 0;
          z-index: 999;
      }

      .topbar-left {
          display: flex;
          align-items: center;
      }

      .toggle-sidebar {
          background: none;
          border: none;
          color: var(--text-color);
          font-size: 20px;
          cursor: pointer;
          margin-right: 15px;
          padding: 5px;
          border-radius: 4px;
          transition: background 0.3s;
      }

      .toggle-sidebar:hover {
          background: #f0f0f0;
      }

      .topbar-title {
          font-size: 18px;
          font-weight: 600;
          color: var(--primary-color);
      }

      .topbar-right {
          display: flex;
          align-items: center;
      }

      .user-info {
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 5px 10px;
          border-radius: 20px;
          transition: background 0.3s;
      }

      .user-info:hover {
          background: #f0f0f0;
      }

      .user-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: bold;
          margin-right: 10px;
      }

      .user-name {
          margin-right: 10px;
          font-size: 14px;
      }

      .logout-btn {
          background: none;
          border: none;
          color: var(--text-color);
          cursor: pointer;
          padding: 5px;
          border-radius: 4px;
          transition: background 0.3s;
      }

      .logout-btn:hover {
          background: #f0f0f0;
      }

      /* 页面加载指示条 */
      .loading-bar {
          position: fixed;
          top: 0;
          left: 0;
          width: 0%;
          height: 3px;
          background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
          z-index: 9999;
          transition: width 0.3s ease;
          box-shadow: 0 0 5px rgba(138, 43, 226, 0.5);
      }

      .loading-bar.hidden {
          opacity: 0;
          transition: opacity 0.3s ease;
      }

      /* 内容区域 */
      .content {
          padding: 20px;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
          .sidebar {
              width: 60px;
          }

          .sidebar-title, .menu-text, .submenu {
              display: none;
          }

          .main-content {
              margin-left: 60px;
          }
      }

      @media (max-width: 480px) {
          .topbar {
              padding: 0 10px;
          }

          .user-name {
              display: none;
          }
      }

      /* 额外的样式块 */
      {% block extra_css %}{% endblock %}
    </style>
    {% block head_extra %}{% endblock %}
  </head>
  <body>
    <!-- 页面加载指示条 -->
    <div class="loading-bar" id="loadingBar"></div>

    <div class="dashboard-container">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <div class="sidebar-logo">
            <i class="fas fa-robot"></i>
          </div>
          <div class="sidebar-title">Amrita Dashboard</div>
        </div>
        <div class="sidebar-menu">
          {% for item in sidebar_items %}
          <div class="menu-item">
            <a
              href="{{ item.url }}"
              class="menu-link{% if item.active %} active{% endif %}"
            >
              <div class="menu-icon">
                <i class="{{ item.icon }}"></i>
              </div>
              <div class="menu-text">{{ item.name }}</div>
              {% if item.children %}
              <div class="menu-arrow">
                <i class="fas fa-chevron-right"></i>
              </div>
              {% endif %}
            </a>
            {% if item.children %}
            <div class="submenu">
              {% for child in item.children %}
              <div class="submenu-item">
                <a
                  href="{{ child.url }}"
                  class="submenu-link{% if child.active %} active{% endif %}"
                  >{{ child.name }}</a
                >
              </div>
              {% endfor %}
            </div>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
          <div class="topbar-left">
            <button class="toggle-sidebar">
              <i class="fas fa-bars"></i>
            </button>
            <div class="topbar-title">
              {% block topbar_title %}控制台{% endblock %}
            </div>
          </div>
          <div class="topbar-right">
            <div class="user-info">
              <div class="user-avatar">A</div>
              <div class="user-name">Admin</div>
            </div>
            <form action="/logout" method="post">
              <button type="submit" class="logout-btn" title="退出登录">
                <i class="fas fa-sign-out-alt"></i>
              </button>
            </form>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">{% block content %}{% endblock %}</div>
      </div>
    </div>

    <script>
      // 页面加载指示条
      const loadingBar = document.getElementById("loadingBar");

      // 显示加载条
      function showLoading() {
        loadingBar.style.width = "30%";
        loadingBar.classList.remove("hidden");
      }

      // 更新加载条
      function updateLoading(progress) {
        loadingBar.style.width = progress + "%";
      }

      // 隐藏加载条
      function hideLoading() {
        loadingBar.style.width = "100%";
        setTimeout(() => {
          loadingBar.classList.add("hidden");
          loadingBar.style.width = "0%";
        }, 300);
      }

      // 页面开始加载时显示加载条
      showLoading();

      // 模拟加载进度
      let progress = 30;
      const interval = setInterval(() => {
        progress += Math.random() * 15;
        if (progress >= 90) {
          progress = 90;
          clearInterval(interval);
        }
        updateLoading(progress);
      }, 200);

      // 页面加载完成时隐藏加载条
      window.addEventListener("load", () => {
        clearInterval(interval);
        hideLoading();
      });

      // 侧边栏切换
      document
        .querySelector(".toggle-sidebar")
        .addEventListener("click", function () {
          document.querySelector(".sidebar").classList.toggle("collapsed");
          document.querySelector(".main-content").classList.toggle("expanded");
        });

      // 添加子菜单切换功能
      document.querySelectorAll(".menu-link").forEach((link) => {
        link.addEventListener("click", function (e) {
          const parentItem = this.parentElement;
          const submenu = parentItem.querySelector(".submenu");
          const arrow = parentItem.querySelector(".menu-arrow");

          if (submenu) {
            e.preventDefault();
            parentItem.classList.toggle("open");
          }
        });
      });

      // 检查是否有令牌失效的提示信息
      function checkTokenExpired() {
        // 这里可以通过查询参数或其他方式传递令牌失效信息
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get("token_expired") === "true") {
          Swal.fire({
            title: "认证失效",
            text: "您的登录会话已过期，请重新登录。",
            icon: "warning",
            confirmButtonText: "确定",
          });
        }
      }

      // 页面加载完成后执行
      document.addEventListener("DOMContentLoaded", function () {
        checkTokenExpired();
      });
    </script>

    {% block scripts %}{% endblock %}
  </body>
</html>
