<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex,nofollow" />
  <title>智引未来 · 洞察内容后台</title>
  <link rel="stylesheet" href="/admin/style.css" />
</head>
<body>
  <section id="login" class="login hidden">
    <form id="login-form" class="login-card">
      <div class="brand-mark">智引</div>
      <h1>洞察内容后台</h1>
      <p>输入管理密码和图片验证码，管理官网文章内容。</p>
      <label>管理密码<input id="password" type="password" autocomplete="current-password" required /></label>
      <label>图片验证码</label>
      <div class="captcha-row">
        <input id="captcha" autocomplete="off" maxlength="4" inputmode="text" aria-label="图片验证码" required />
        <img id="captcha-image" alt="图片验证码，点击可更换" title="看不清？点击换一张" />
      </div>
      <button class="primary" type="submit">登录后台</button>
      <div id="login-error" class="error"></div>
    </form>
  </section>

  <div id="app" class="hidden">
    <header class="topbar">
      <div><strong>智引未来</strong><span>洞察内容后台</span></div>
      <div class="top-actions">
        <span id="pending-badge" class="pending-badge hidden"></span>
        <a class="button ghost" href="/articles/" target="_blank" rel="noopener">查看前台</a>
        <button id="change-password" class="ghost" type="button">修改密码</button>
        <button id="logout" class="ghost">退出</button>
      </div>
    </header>

    <main id="list-view" class="view">
      <div class="view-head"><div><p>CONTENT</p><h1>洞察中心</h1></div><div class="view-actions"><button id="manage-categories" class="ghost">管理分类</button><button id="import-article" class="ghost">导入文件</button><button id="new-article" class="primary">＋ 新建文章</button></div></div>
      <input id="article-file" class="hidden" type="file" accept=".md,.docx,text/markdown,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
      <p id="import-status" class="import-status" aria-live="polite"></p>
      <div id="article-list" class="article-list"></div>
    </main>

    <main id="edit-view" class="view hidden">
      <div class="view-head editor-titlebar">
        <div><button id="back" class="back-button" type="button">← 返回文章列表</button><h1 id="edit-heading">编辑文章</h1></div>
        <span id="editor-status" class="status"></span>
      </div>
      <div id="version-note" class="version-note"></div>
      <form id="edit-form">
        <section class="field-panel">
          <label>文章标题<input id="title" required /></label>
          <div class="field-label">
            <span>文章分类</span>
            <div id="category-select" class="custom-select">
              <input id="category" type="hidden" />
              <button id="category-trigger" class="select-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
                <span id="category-value"></span><span class="select-chevron" aria-hidden="true">⌄</span>
              </button>
              <div id="category-menu" class="select-menu hidden">
                <div id="category-options" class="select-options" role="listbox" aria-label="文章分类"></div>
                <div class="category-create">
                  <span>添加新分类</span>
                  <div><input id="new-category" maxlength="20" placeholder="输入分类名称" /><button id="add-category" class="primary small" type="button">添加</button></div>
                  <p id="category-error" class="error"></p>
                </div>
              </div>
            </div>
          </div>
          <p class="auto-meta">文章网址、摘要、作者和 SEO 信息将由系统自动生成，无需填写。</p>
        </section>
        <section class="editor-panel">
          <div class="editor-head"><div><strong>文章正文</strong><small>右侧会自动显示预览</small></div><div><span id="upload-status"></span><button id="upload-button" class="ghost small" type="button">插入图片</button></div></div>
          <input id="file" class="hidden" type="file" accept="image/png,image/jpeg,image/webp,image/gif" />
          <div class="editor-grid"><textarea id="body" required spellcheck="false" placeholder="在这里撰写文章正文……"></textarea><div id="preview" class="preview" aria-live="polite"></div></div>
        </section>
        <div class="edit-actions">
          <button class="ghost save-button" type="submit">保存草稿</button>
          <button id="publish" class="primary" type="button">发布到官网</button>
          <details id="more-actions" class="more-actions hidden">
            <summary>更多操作</summary>
            <div class="action-menu">
              <button id="discard" class="menu-action hidden" type="button">放弃未发布修改</button>
              <button id="unpublish" class="menu-action danger hidden" type="button">下架文章</button>
              <button id="delete-article" class="menu-action danger hidden" type="button">删除文章</button>
            </div>
          </details>
          <span id="message"></span>
        </div>
      </form>
    </main>
  </div>

  <div id="category-modal" class="modal hidden">
    <div class="modal-card category-manager">
      <div class="modal-head"><div><strong>文章分类管理</strong><small>重命名会同步更新该分类下的文章</small></div><button id="close-category-modal" class="ghost small" type="button">关闭</button></div>
      <div class="category-manager-body">
        <div class="manager-create"><input id="manager-new-category" maxlength="20" placeholder="输入新分类名称" /><button id="manager-add-category" class="primary" type="button">添加分类</button></div>
        <p id="manager-category-error" class="error"></p>
        <div id="category-manager-list" class="category-manager-list"></div>
      </div>
    </div>
  </div>
  <div id="password-modal" class="modal hidden">
    <div class="modal-card password-card">
      <div class="modal-head"><div><strong>修改后台密码</strong><small>修改成功后需要使用新密码重新登录</small></div><button id="close-password-modal" class="ghost small" type="button">关闭</button></div>
      <form id="password-form" class="password-form">
        <label>当前密码<input id="current-password" type="password" autocomplete="current-password" required /></label>
        <label>新密码<input id="new-password" type="password" autocomplete="new-password" minlength="5" maxlength="128" required /></label>
        <label>确认新密码<input id="confirm-password" type="password" autocomplete="new-password" minlength="5" maxlength="128" required /></label>
        <p class="password-hint">新密码至少 5 个字符。</p>
        <p id="password-error" class="error"></p>
        <div class="password-actions"><button id="cancel-password" class="ghost" type="button">取消</button><button class="primary" type="submit">确认修改</button></div>
      </form>
    </div>
  </div>
  <div id="build-modal" class="modal hidden">
    <div class="modal-card build-card">
      <div><strong id="build-title">正在处理</strong><button id="close-modal" class="ghost small hidden" type="button">关闭</button></div>
      <pre id="build-log">系统正在更新官网，请稍候。</pre>
    </div>
  </div>
  <script is:inline src="/admin/app.js"></script>
</body>
</html>
