{% extends "base.html" %}
{% set title = "后台" %}
{% set page = "admin" %}

{% block content %}
  <div class="admin-layout">
    <aside class="sider">
      <div class="sider-title">控制台</div>
      <nav class="menu" id="adminMenu">
        <a href="#" class="menu-item active" data-section="overview">概览</a>
        <a href="#" class="menu-item" data-section="plans">会员方案</a>
        <a href="#" class="menu-item" data-section="resources">资源管理</a>
        <a href="#" class="menu-item" data-section="uploads">上传管理</a>
        <a href="#" class="menu-item" data-section="orders">订单管理</a>
        <a href="#" class="menu-item" data-section="users">用户管理</a>
        <a href="#" class="menu-item" data-section="download-logs">下载记录</a>
        <a href="#" class="menu-item" data-section="messages">消息管理</a>
        <a href="#" class="menu-item" data-section="settings">第三方配置</a>
      </nav>
      <div class="sider-footer">
        <button id="adminLogoutBtn" type="button" class="btn btn-block">退出登录</button>
      </div>
    </aside>
    <section class="content">
      <div class="content-header">
        <h1 id="contentTitle">概览</h1>
      </div>

      <section id="sec-overview" class="content-section">
        <div class="toolbar">
          <button id="overviewRefreshBtn" type="button" class="btn">刷新</button>
          <span id="overviewUpdatedAt" class="muted"></span>
        </div>
        <div class="grid" style="margin-top: 12px">
          <div class="card metric-card">
            <div class="muted metric-label">用户</div>
            <div class="metric-value" id="ovUsersTotal">-</div>
            <div class="muted metric-sub" id="ovUsersSub">-</div>
          </div>
          <div class="card metric-card">
            <div class="muted metric-label">资源</div>
            <div class="metric-value" id="ovResourcesTotal">-</div>
            <div class="muted metric-sub" id="ovResourcesSub">-</div>
          </div>
          <div class="card metric-card">
            <div class="muted metric-label">订单</div>
            <div class="metric-value" id="ovOrdersTotal">-</div>
            <div class="muted metric-sub" id="ovOrdersSub">-</div>
          </div>
          <div class="card metric-card">
            <div class="muted metric-label">收入</div>
            <div class="metric-value" id="ovRevenueTotal">-</div>
            <div class="muted metric-sub" id="ovRevenueSub">-</div>
          </div>
          <div class="card metric-card">
            <div class="muted metric-label">下载</div>
            <div class="metric-value" id="ovDownloadsTotal">-</div>
            <div class="muted metric-sub" id="ovDownloadsSub">-</div>
          </div>
          <div class="card metric-card">
            <div class="muted metric-label">消息</div>
            <div class="metric-value" id="ovMessagesTotal">-</div>
            <div class="muted metric-sub" id="ovMessagesSub">-</div>
          </div>
        </div>
        <div class="card" style="margin-top: 16px">
          <h3 style="margin:0">系统</h3>
          <div class="muted" style="margin-top: 10px" id="ovSystemInfo">-</div>
        </div>
      </section>

      <section id="sec-plans" class="content-section" style="display:none">
        <div class="toolbar">
          <button id="createPlanOpenBtn" type="button" class="btn btn-primary">新增方案</button>
        </div>
        <div class="table-wrap">
          <table class="table" id="planTable">
            <colgroup>
              <col style="width:6%" />
              <col style="width:28%" />
              <col style="width:12%" />
              <col style="width:12%" />
              <col style="width:10%" />
              <col style="width:10%" />
              <col style="width:22%" />
            </colgroup>
            <thead>
              <tr>
                <th>ID</th><th>名称</th><th>时长(天)</th><th>价格</th><th>启用</th><th>排序</th><th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </section>

      <section id="sec-resources" class="content-section" style="display:none">
        <div class="toolbar">
          <input id="resQ" class="input" placeholder="搜索标题/简介/仓库" />
          <select id="resTypeFilter" class="input">
            <option value="">全部类型</option>
            <option value="FREE">免费</option>
            <option value="VIP">VIP</option>
          </select>
          <select id="resStatusFilter" class="input">
            <option value="">全部状态</option>
            <option value="ONLINE">上架</option>
            <option value="OFFLINE">下架</option>
            <option value="DRAFT">草稿</option>
          </select>
          <button id="resSearchBtn" type="button" class="btn">搜索</button>
          <button id="createResOpenBtn" type="button" class="btn btn-primary">新增资源</button>
        </div>
        <div class="table-wrap">
          <table class="table" id="resourceTable">
            <colgroup>
              <col style="width:6%" />
              <col style="width:24%" />
              <col style="width:6%" />
              <col style="width:6%" />
              <col style="width:18%" />
              <col style="width:15%" />
              <col style="width:6%" />
              <col style="width:19%" />
            </colgroup>
            <thead>
              <tr>
                <th>ID</th><th>标题</th><th>类型</th><th>状态</th><th>仓库 / 分支</th><th>更新</th><th>缓存</th><th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div class="pager">
          <button id="resPrevPage" class="btn">上一页</button>
          <span id="resPageInfo" class="muted"></span>
          <button id="resNextPage" class="btn">下一页</button>
        </div>
      </section>

      <section id="sec-uploads" class="content-section" style="display:none">
        <div class="toolbar">
          <input id="uploadsQ" class="input" placeholder="搜索文件名" />
          <div class="btn-group">
            <button id="uploadsFilterAll" type="button" class="btn btn-toggle active">全部</button>
            <button id="uploadsFilterUnused" type="button" class="btn btn-toggle">未引用</button>
            <button id="uploadsFilterUsed" type="button" class="btn btn-toggle">已引用</button>
          </div>
          <button id="uploadsRefreshBtn" type="button" class="btn">刷新</button>
          <button id="uploadsUploadBtn" type="button" class="btn btn-primary">上传文件</button>
          <input id="uploadsFile" type="file" style="display:none" multiple />
          <button id="uploadsCleanupBtn" type="button" class="btn btn-danger">一键清理未使用</button>
        </div>
        <div id="uploadsStats" class="muted" style="margin: 8px 0;"></div>
        <div class="table-wrap">
          <table class="table" id="uploadTable">
            <colgroup>
              <col style="width:10%" />
              <col style="width:38%" />
              <col style="width:10%" />
              <col style="width:14%" />
              <col style="width:8%" />
              <col style="width:20%" />
            </colgroup>
            <thead>
              <tr>
                <th>预览</th><th>文件</th><th>大小</th><th>修改</th><th>引用</th><th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </section>

      <section id="sec-orders" class="content-section" style="display:none">
        <div class="toolbar">
          <input id="orderQ" class="input" placeholder="搜索订单号/手机号" />
          <select id="orderStatusFilter" class="input">
            <option value="">全部状态</option>
            <option value="PENDING">待支付</option>
            <option value="PAID">已支付</option>
            <option value="CLOSED">已关闭</option>
            <option value="FAILED">失败</option>
          </select>
          <button id="orderCreateBtn" type="button" class="btn btn-primary">新建订单</button>
          <button id="orderRefreshBtn" type="button" class="btn">刷新</button>
        </div>
        <div class="table-wrap">
          <table class="table" id="orderTable">
            <colgroup>
              <col style="width:21%" />
              <col style="width:6%" />
              <col style="width:7%" />
              <col style="width:16%" />
              <col style="width:6%" />
              <col style="width:14%" />
              <col style="width:14%" />
              <col style="width:12%" />
            </colgroup>
            <thead>
              <tr>
                <th>ID</th><th>状态</th><th>金额</th><th>用户</th><th>方案</th><th>创建</th><th>支付</th><th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div class="pager">
          <button id="orderPrevPage" class="btn">上一页</button>
          <span id="orderPageInfo" class="muted"></span>
          <button id="orderNextPage" class="btn">下一页</button>
        </div>
      </section>

      <section id="sec-users" class="content-section" style="display:none">
        <div class="toolbar">
          <input id="userQ" class="input" placeholder="搜索手机号" />
          <select id="userStatusFilter" class="input">
            <option value="">全部状态</option>
            <option value="ACTIVE">启用</option>
            <option value="DISABLED">禁用</option>
          </select>
          <select id="userVipFilter" class="input">
            <option value="">全部会员</option>
            <option value="VIP">仅 VIP</option>
            <option value="NONVIP">仅非 VIP</option>
          </select>
          <button id="userSearchBtn" type="button" class="btn">搜索</button>
        </div>
        <div class="table-wrap">
          <table class="table" id="userTable">
            <colgroup>
              <col style="width:6%" />
              <col style="width:16%" />
              <col style="width:10%" />
              <col style="width:14%" />
              <col style="width:18%" />
              <col style="width:18%" />
              <col style="width:16%" />
            </colgroup>
            <thead>
              <tr>
                <th>ID</th><th>手机号</th><th>状态</th><th>会员</th><th>会员到期</th><th>注册时间</th><th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div class="pager">
          <button id="userPrevPage" class="btn">上一页</button>
          <span id="userPageInfo" class="muted"></span>
          <button id="userNextPage" class="btn">下一页</button>
        </div>
      </section>

      <section id="sec-download-logs" class="content-section" style="display:none">
        <div class="toolbar">
          <input id="dlQ" class="input" placeholder="搜索手机号/资源/Ref/IP" />
          <select id="dlTypeFilter" class="input">
            <option value="">全部类型</option>
            <option value="FREE">免费</option>
            <option value="VIP">VIP</option>
          </select>
          <select id="dlStateFilter" class="input">
            <option value="">全部状态</option>
            <option value="ONLINE">资源在线</option>
            <option value="OFFLINE">资源下架</option>
            <option value="DELETED">资源已删除</option>
          </select>
          <button id="dlSearchBtn" type="button" class="btn">搜索</button>
        </div>
        <div class="table-wrap">
          <table class="table" id="downloadLogTable">
            <colgroup>
              <col style="width:6%" />
              <col style="width:12%" />
              <col style="width:14%" />
              <col style="width:26%" />
              <col style="width:8%" />
              <col style="width:8%" />
              <col style="width:8%" />
              <col style="width:10%" />
              <col style="width:8%" />
            </colgroup>
            <thead>
              <tr>
                <th>ID</th><th>下载时间</th><th>用户</th><th>资源</th><th>下载时</th><th>当前</th><th>状态</th><th>IP</th><th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div class="pager">
          <button id="dlPrevPage" class="btn">上一页</button>
          <span id="dlPageInfo" class="muted"></span>
          <button id="dlNextPage" class="btn">下一页</button>
        </div>
      </section>

      <section id="sec-messages" class="content-section" style="display:none">
        <div class="toolbar">
          <input id="msgQ" class="input" placeholder="搜索手机号/标题" />
          <select id="msgReadFilter" class="input">
            <option value="">全部状态</option>
            <option value="unread">未读</option>
            <option value="read">已读</option>
          </select>
          <select id="msgSenderFilter" class="input">
            <option value="">全部来源</option>
            <option value="ADMIN">管理员</option>
            <option value="SYSTEM">系统</option>
          </select>
          <button id="msgSearchBtn" type="button" class="btn">搜索</button>
          <button id="msgSendBtn" type="button" class="btn btn-primary">发送消息</button>
          <button id="msgBroadcastBtn" type="button" class="btn">群发</button>
        </div>
        <div class="table-wrap">
          <table class="table" id="msgTable">
            <colgroup>
              <col style="width:6%" />
              <col style="width:14%" />
              <col style="width:26%" />
              <col style="width:16%" />
              <col style="width:10%" />
              <col style="width:10%" />
              <col style="width:18%" />
            </colgroup>
            <thead>
              <tr>
                <th>ID</th><th>用户</th><th>标题</th><th>发送时间</th><th>已读</th><th>来源</th><th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div class="pager">
          <button id="msgPrevPage" class="btn">上一页</button>
          <span id="msgPageInfo" class="muted"></span>
          <button id="msgNextPage" class="btn">下一页</button>
        </div>
      </section>

      <section id="sec-settings" class="content-section" style="display:none">
        <div class="toolbar">
          <button id="settingsRefreshBtn" type="button" class="btn">刷新</button>
          <button id="settingsSaveBtn" type="button" class="btn btn-primary">保存</button>
        </div>
        <div class="card settings-card">
          <div class="toolbar settings-toolbar" style="margin:0 0 12px 0">
            <input id="cfgSearch" class="input settings-search" placeholder="搜索配置项（例如：gogs / token / mysql）" />
          </div>
          <div id="cfgGroupNav" class="segmented nowrap settings-nav" style="margin:0 0 12px 0">
            <button type="button" class="btn active" data-target="#cfgGroupGogs">Gogs</button>
            <button type="button" class="btn" data-target="#cfgGroupPay">支付</button>
            <button type="button" class="btn" data-target="#cfgGroupLlm">大模型</button>
            <button type="button" class="btn" data-target="#cfgGroupCache">缓存</button>
            <button type="button" class="btn" data-target="#cfgGroupStorage">存储</button>
            <button type="button" class="btn" data-target="#cfgGroupDb">数据库</button>
          </div>
          <div id="settingsGroups">
            <div id="cfgGroupGogs" class="collapse settings-group" data-open="1">
              <button type="button" class="collapse-head">
                <div class="collapse-head-left">
                  <div class="settings-group-title">Gogs</div>
                  <div class="muted settings-group-desc">仓库读取、分支/标签查询</div>
                </div>
                <i class="ri-arrow-down-s-line collapse-icon"></i>
              </button>
              <div class="collapse-body">
                <div class="toolbar settings-group-toolbar">
                  <button id="cfgGogsSaveBtn" type="button" class="btn btn-primary">保存本组</button>
                  <button id="cfgGogsResetBtn" type="button" class="btn">重置本组</button>
                </div>
                <div class="form-grid">
                  <div style="grid-column: 1 / -1">
                    <div class="label">Base URL</div>
                    <input id="cfgGogsBaseUrl" class="input" placeholder="例如：https://gogs.example.com" />
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">Token</div>
                    <input id="cfgGogsToken" class="input" type="password" placeholder="留空保持不变" />
                    <label class="muted checkbox-row settings-checkbox">
                      <input id="cfgClearGogsToken" type="checkbox" />
                      清除 Token
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div id="cfgGroupPay" class="collapse settings-group" data-open="0">
              <button type="button" class="collapse-head">
                <div class="collapse-head-left">
                  <div class="settings-group-title">支付</div>
                  <div class="muted settings-group-desc">支持 Mock 与支付宝真实支付</div>
                </div>
                <i class="ri-arrow-down-s-line collapse-icon"></i>
              </button>
              <div class="collapse-body">
                <div class="toolbar settings-group-toolbar">
                  <button id="cfgPaySaveBtn" type="button" class="btn btn-primary">保存本组</button>
                  <button id="cfgPayResetBtn" type="button" class="btn">重置本组</button>
                </div>
                <div class="form-grid">
                  <div>
                    <div class="label">Provider</div>
                    <select id="cfgPayProvider" class="input">
                      <option value="MOCK">MOCK</option>
                      <option value="ALIPAY">ALIPAY</option>
                      <option value="WECHAT">WECHAT</option>
                    </select>
                    <label class="muted checkbox-row settings-checkbox">
                      <input id="cfgEnableMockPay" type="checkbox" />
                      启用 Mock 支付
                    </label>
                  </div>
                  <div>
                    <div class="label">API Key</div>
                    <input id="cfgPayApiKey" class="input" type="password" placeholder="留空保持不变" />
                    <label class="muted checkbox-row settings-checkbox">
                      <input id="cfgClearPayApiKey" type="checkbox" />
                      清除 API Key
                    </label>
                  </div>
                </div>

                <div id="cfgAlipayFields" style="margin-top: 12px; display: none;">
                  <div class="form-grid">
                    <div>
                      <div class="label">App ID</div>
                      <input id="cfgAlipayAppId" class="input" placeholder="例如：2021000123456789" />
                    </div>
                    <div>
                      <div class="label">Gateway</div>
                      <input id="cfgAlipayGateway" class="input" placeholder="https://openapi.alipay.com/gateway.do" />
                    </div>
                    <div style="grid-column: 1 / -1">
                      <div class="label" style="display:flex; align-items:center; justify-content: space-between; gap: 8px;">
                        <span>Notify URL</span>
                        <button id="cfgAlipayUseCurrentNotify" type="button" class="btn btn-ghost">使用当前域名</button>
                      </div>
                      <input id="cfgAlipayNotifyUrl" class="input" placeholder="必须公网可达，例如：https://example.com/pay/callback" />
                    </div>
                    <div style="grid-column: 1 / -1">
                      <div class="label" style="display:flex; align-items:center; justify-content: space-between; gap: 8px;">
                        <span>Return URL</span>
                        <button id="cfgAlipayUseCurrentReturn" type="button" class="btn btn-ghost">使用当前域名</button>
                      </div>
                      <input id="cfgAlipayReturnUrl" class="input" placeholder="可选，例如：https://example.com/ui/me" />
                    </div>
                    <div style="grid-column: 1 / -1">
                      <div class="label">应用私钥（PKCS8 / RSA2）</div>
                      <textarea id="cfgAlipayPrivateKey" class="input secret-textarea" rows="6" placeholder="留空保持不变"></textarea>
                      <label class="muted checkbox-row settings-checkbox">
                        <input id="cfgClearAlipayPrivateKey" type="checkbox" />
                        清除私钥
                      </label>
                      <label class="muted checkbox-row settings-checkbox">
                        <input id="cfgShowAlipayPrivateKey" type="checkbox" />
                        显示私钥
                      </label>
                    </div>
                    <div style="grid-column: 1 / -1">
                      <div class="label">支付宝公钥</div>
                      <textarea id="cfgAlipayPublicKey" class="input secret-textarea" rows="6" placeholder="留空保持不变"></textarea>
                      <label class="muted checkbox-row settings-checkbox">
                        <input id="cfgClearAlipayPublicKey" type="checkbox" />
                        清除公钥
                      </label>
                      <label class="muted checkbox-row settings-checkbox">
                        <input id="cfgShowAlipayPublicKey" type="checkbox" />
                        显示公钥
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div id="cfgGroupLlm" class="collapse settings-group" data-open="0">
              <button type="button" class="collapse-head">
                <div class="collapse-head-left">
                  <div class="settings-group-title">大模型</div>
                  <div class="muted settings-group-desc">智能摘要/检索等能力预留</div>
                </div>
                <i class="ri-arrow-down-s-line collapse-icon"></i>
              </button>
              <div class="collapse-body">
                <div class="toolbar settings-group-toolbar">
                  <button id="cfgLlmSaveBtn" type="button" class="btn btn-primary">保存本组</button>
                  <button id="cfgLlmResetBtn" type="button" class="btn">重置本组</button>
                </div>
                <div class="form-grid">
                  <div>
                    <div class="label">Provider</div>
                    <input id="cfgLlmProvider" class="input" placeholder="例如：OpenAI / Azure / DeepSeek" />
                  </div>
                  <div>
                    <div class="label">Model</div>
                    <input id="cfgLlmModel" class="input" placeholder="例如：gpt-4.1-mini" />
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">Base URL</div>
                    <input id="cfgLlmBaseUrl" class="input" placeholder="例如：https://api.example.com" />
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">API Key</div>
                    <input id="cfgLlmApiKey" class="input" type="password" placeholder="留空保持不变" />
                    <label class="muted checkbox-row settings-checkbox">
                      <input id="cfgClearLlmApiKey" type="checkbox" />
                      清除 API Key
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div id="cfgGroupCache" class="collapse settings-group" data-open="0">
              <button type="button" class="collapse-head">
                <div class="collapse-head-left">
                  <div class="settings-group-title">缓存</div>
                  <div class="muted settings-group-desc">可选 Redis 共享缓存（例如：Gogs 相关接口）</div>
                </div>
                <i class="ri-arrow-down-s-line collapse-icon"></i>
              </button>
              <div class="collapse-body">
                <div class="toolbar settings-group-toolbar">
                  <button id="cfgCacheSaveBtn" type="button" class="btn btn-primary">保存本组</button>
                  <button id="cfgCacheResetBtn" type="button" class="btn">重置本组</button>
                </div>
                <div class="form-grid">
                  <div style="grid-column: 1 / -1">
                    <div class="label">Redis URL</div>
                    <input id="cfgRedisUrl" class="input" placeholder="例如：redis://:password@127.0.0.1:6379/0" />
                    <label class="muted checkbox-row settings-checkbox">
                      <input id="cfgClearRedisUrl" type="checkbox" />
                      清除 Redis URL
                    </label>
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="toolbar" style="margin: 0">
                      <button id="cfgRedisTestBtn" type="button" class="btn">测试连接</button>
                    </div>
                    <div id="cfgCacheMsg" class="muted" style="margin-top:8px"></div>
                  </div>
                </div>
              </div>
            </div>

            <div id="cfgGroupStorage" class="collapse settings-group" data-open="0">
              <button type="button" class="collapse-head">
                <div class="collapse-head-left">
                  <div class="settings-group-title">存储</div>
                  <div class="muted settings-group-desc">可选阿里云 OSS，用于后台上传文件管理</div>
                </div>
                <i class="ri-arrow-down-s-line collapse-icon"></i>
              </button>
              <div class="collapse-body">
                <div class="toolbar settings-group-toolbar">
                  <button id="cfgStorageSaveBtn" type="button" class="btn btn-primary">保存本组</button>
                  <button id="cfgStorageResetBtn" type="button" class="btn">重置本组</button>
                </div>
                <div class="form-grid">
                  <div>
                    <div class="label">Provider</div>
                    <select id="cfgStorageProvider" class="input">
                      <option value="AUTO">AUTO</option>
                      <option value="LOCAL">LOCAL</option>
                      <option value="OSS">OSS</option>
                    </select>
                  </div>
                  <div></div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">OSS Endpoint</div>
                    <input id="cfgOssEndpoint" class="input" placeholder="例如：https://oss-cn-hangzhou.aliyuncs.com" />
                  </div>
                  <div>
                    <div class="label">Bucket</div>
                    <input id="cfgOssBucket" class="input" placeholder="例如：my-bucket" />
                  </div>
                  <div>
                    <div class="label">AccessKeyId</div>
                    <input id="cfgOssAccessKeyId" class="input" placeholder="例如：LTAI..." />
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">AccessKeySecret</div>
                    <input id="cfgOssAccessKeySecret" class="input" type="password" placeholder="留空保持不变" />
                    <label class="muted checkbox-row settings-checkbox">
                      <input id="cfgClearOssAccessKeySecret" type="checkbox" />
                      清除 Secret
                    </label>
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">Upload Prefix</div>
                    <input id="cfgOssUploadPrefix" class="input" placeholder="例如：uploads/" />
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">Public Base URL</div>
                    <input id="cfgOssPublicBaseUrl" class="input" placeholder="例如：https://cdn.example.com 或 https://bucket.oss-cn-hangzhou.aliyuncs.com" />
                  </div>
                </div>
              </div>
            </div>

            <div id="cfgGroupDb" class="collapse settings-group" data-open="1">
              <button type="button" class="collapse-head">
                <div class="collapse-head-left">
                  <div class="settings-group-title">数据库</div>
                  <div id="cfgDbActive" class="muted settings-group-desc">当前连接：-</div>
                </div>
                <i class="ri-arrow-down-s-line collapse-icon"></i>
              </button>
              <div class="collapse-body">
                <div class="toolbar settings-group-toolbar">
                  <button id="cfgDbSaveBtn" type="button" class="btn btn-primary">保存本组</button>
                  <button id="cfgDbResetBtn" type="button" class="btn">重置本组</button>
                </div>
                <div class="form-grid">
                  <div style="grid-column: 1 / -1">
                    <div class="label">MySQL Host</div>
                    <input id="cfgMysqlHost" class="input" placeholder="例如：localhost / 127.0.0.1 / mysql.internal" />
                  </div>
                  <div>
                    <div class="label">MySQL Port</div>
                    <input id="cfgMysqlPort" class="input" placeholder="例如：3306" />
                  </div>
                  <div>
                    <div class="label">MySQL User</div>
                    <input id="cfgMysqlUser" class="input" placeholder="例如：root" />
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">MySQL Password</div>
                    <input id="cfgMysqlPassword" class="input" type="password" placeholder="留空保持不变" />
                    <label class="muted checkbox-row settings-checkbox">
                      <input id="cfgClearMysqlPassword" type="checkbox" />
                      清除 Password
                    </label>
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="label">MySQL Database</div>
                    <input id="cfgMysqlDatabase" class="input" placeholder="例如：sourceshare" />
                  </div>
                  <div style="grid-column: 1 / -1">
                    <div class="toolbar" style="margin: 0">
                      <button id="cfgMysqlTestBtn" type="button" class="btn">测试连接</button>
                      <button id="cfgDbSwitchMysqlBtn" type="button" class="btn btn-primary">切换到 MySQL（迁移）</button>
                      <button id="cfgDbSwitchSqliteBtn" type="button" class="btn">切换到 SQLite（迁移）</button>
                    </div>
                    <div id="settingsMsg" class="muted" style="margin-top:8px"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </section>
  </div>

  <div id="adminModalBackdrop" class="modal-backdrop" style="display:none">
    <div class="modal">
      <div class="modal-header">
        <div id="adminModalTitle" class="modal-title"></div>
        <div class="modal-header-right">
          <div id="adminModalHeaderActions"></div>
          <button id="adminModalClose" type="button" class="btn btn-ghost" style="padding: 4px; min-width: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;"><i class="ri-close-line" style="font-size: 1.25rem;"></i></button>
        </div>
      </div>
      <div id="adminModalBody"></div>
      <div id="adminModalFooter" class="modal-footer"></div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='app_common.js') }}"></script>
  <script src="{{ url_for('static', filename='app_admin.js') }}"></script>
{% endblock %}