{{/* ============ 首页：瀑布流 + 无限滚动 ============ */}}
{{define "pg_index"}}
<div class="page-head">
  {{if .topics}}<div class="topic-bar">
    <div class="topic-chips" id="topic-chips">
      <a class="chip {{if not .topic}}active{{end}}" href="/">全部</a>
      {{range .topics}}<a class="chip {{if eq $.topic .name}}active{{end}}" href="/?topic={{.name}}"># {{.name}}</a>{{end}}
    </div>
    {{/* 话题较多时由脚本收起为单行，此处按钮用于展开全部 */}}
    <button type="button" class="chip-toggle" id="topic-toggle" hidden aria-expanded="false" aria-controls="topic-chips">
      <span>展开</span>
      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
    </button>
  </div>{{end}}
</div>
<div class="masonry" id="masonry" data-topic="{{.topic}}" aria-live="polite"></div>
<div class="load-state" id="load-state">加载中...</div>
<div id="sentinel" class="sentinel"></div>
{{end}}

{{/* ============ 帖子详情 ============ */}}
{{define "pg_detail"}}
{{with .post}}
<article class="detail-card card">
  <div class="card-head">
    <span class="avatar">{{substr0 .Nickname}}</span>
    <div class="meta">
      <div class="nick-row">
        {{if .UserID}}<a class="nickname" href="/u/{{.UserID}}">{{.Nickname}}</a>{{else}}<span class="nickname">{{.Nickname}}</span>{{end}}
        {{range .Badges}}<span class="post-badge" title="该帖带有管理员或插件标识">{{.}}</span>{{end}}
      </div>
      <time>{{datefmt .CreatedAt}}</time>
    </div>
    {{if $.canEdit}}
    <div class="row-actions">
      <a class="mini-btn" href="/post/{{.ID}}/edit">编辑</a>
      <form method="post" action="/post/{{.ID}}/delete" class="inline-form" data-confirm="确定删除该帖子吗？">
        <input type="hidden" name="_csrf" value="{{$.csrf}}">
        <button class="mini-btn danger" type="submit">删除</button>
      </form>
    </div>
    {{end}}
  </div>
  {{if .Topic}}<a class="chip" href="/?topic={{.Topic}}"># {{.Topic}}</a>{{end}}
  <div class="detail-content">{{nl2br .Content}}</div>
  <div class="media-grid media-{{len .Images}}">
    {{range .Images}}<img class="media" loading="lazy" src="{{.}}" alt="帖子图片">{{end}}
  </div>
  {{range .Videos}}<video class="video" src="{{.}}" controls preload="metadata"></video>{{end}}
  <div class="card-actions">
    <button class="act like-btn" data-id="{{.ID}}">
      <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-8-5.2-8-10.4C4 7 6.2 5 8.8 5c1.6 0 2.7.8 3.2 1.7C12.5 5.8 13.6 5 15.2 5 17.8 5 20 7 20 10.6 20 15.8 12 21 12 21z"/></svg>
      <span class="like-count">{{.Likes}}</span>
    </button>
    <span class="act"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a8 8 0 1 1-3.2-6.4L21 4l-1 4.4c.6 1.1 1 2.3 1 3.6z"/></svg>{{.CommentCount}}</span>
    <button class="act report-btn" data-id="{{.ID}}" type="button">举报</button>
  </div>
  {{$.detail_actions_after}}
</article>
{{$.detail_after}}
{{end}}

<section class="comments card">
  <h3>全部评论（{{len .comments}}）</h3>
  <div class="comment-list" id="comment-list">
    {{range .comments}}
    <div class="comment-item">
      <span class="avatar small">{{substr0 .nickname}}</span>
      <div class="comment-body">
        <span class="nickname">{{.nickname}}</span>
        <p>{{nl2br .content}}</p>
        <time>{{datefmt .created_at}}</time>
      </div>
    </div>
    {{else}}<p class="empty">还没有评论，来抢沙发</p>{{end}}
  </div>
  <form class="comment-form" id="comment-form" data-post="{{.post.ID}}">
    <input type="text" name="nickname" maxlength="20" placeholder="昵称（可留空为匿名）">
    <textarea name="content" maxlength="500" required placeholder="写下你的评论（500字以内）"></textarea>
    <button class="btn btn-primary" type="submit">发表评论</button>
  </form>
</section>
{{.comments_after}}

{{if .rules}}
<details class="rules card">
  <summary>社区守则</summary>
  <p>{{nl2br .rules}}</p>
</details>
{{end}}
{{end}}

{{/* ============ 发帖页 ============ */}}
{{define "pg_compose"}}
<form class="compose card" id="compose-form" method="post" action="/compose" enctype="multipart/form-data"
      data-admin-nicks="{{.adminNicks}}">
  <h2>发布新帖</h2>
  <input type="hidden" name="_csrf" value="{{.csrf}}">
  <label>昵称
    <input type="text" name="nickname" maxlength="20" placeholder="留空则显示为匿名" {{if and .user .requireLogin}}value="匿名"{{end}}>
  </label>
  <label>内容（3000 字以内）
    <textarea name="content" maxlength="3000" rows="7" required placeholder="写下你想说的..."></textarea>
  </label>
  <label>话题（可选）
    <select name="topic_id">
      <option value="0">不选择话题</option>
      {{range .topics}}<option value="{{.id}}"># {{.name}}</option>{{end}}
    </select>
  </label>
  <label>或新建话题（可选）
    <input type="text" name="topic_new" maxlength="30" placeholder="输入新话题名称">
  </label>
  {{/* 图片 / 视频合并上传区：PC 拖拽，移动端点击选择 */}}
  <div class="media-field">
    <span class="field-title">图片 / 视频</span>
    <div class="drop-zone" id="drop-zone" role="button" tabindex="0"
         data-max-images="{{.maxImages}}" data-max-videos="{{.maxVideos}}"
         aria-label="点击选择或拖拽上传图片和视频">
      <input type="file" id="media-input" accept="image/*,video/*" multiple hidden>
      <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
        <path d="M4 15.5V18a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2.5"/>
        <path d="M12 3v12"/><path d="M7.5 7.5 12 3l4.5 4.5"/>
      </svg>
      <p class="drop-title">点击上传，或将文件拖拽到此处</p>
      <p class="drop-hint">图片最多 {{.maxImages}} 张（自动转 WebP，单张 ≤10MB）；视频最多 {{.maxVideos}} 个（单个 ≤70MB）</p>
    </div>
    <div class="media-previews" id="media-previews"></div>
    <div class="progress" id="upload-progress" hidden><span></span></div>
  </div>

  <p class="form-err" id="compose-err" hidden></p>
  <button class="btn btn-primary btn-block" type="submit" id="compose-submit">发布</button>
  {{if .aiPrecheck}}<p class="muted ai-note"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z"/></svg>发布后 AI 将自动审核内容，违规内容会被拦截</p>{{end}}
</form>

{{/* 发布前验证码弹窗：点击发布后弹出，验证通过再提交 */}}
<div class="modal" id="captcha-modal" hidden>
  <div class="modal-mask"></div>
  <div class="modal-box captcha-modal-box">
    <h3>安全验证</h3>
    <p class="muted">请输入下方 4 位数字验证码后完成发布</p>
    <div class="captcha-row modal-captcha">
      <input type="text" id="captcha-code" inputmode="numeric" maxlength="4" autocomplete="off" placeholder="验证码">
      <div class="captcha-box" id="captcha-box" title="点击刷新"></div>
    </div>
    <p class="form-err" id="captcha-err" hidden></p>
    <div class="btn-row">
      <button type="button" class="btn btn-ghost btn-block" id="captcha-cancel">取消</button>
      <button type="button" class="btn btn-primary btn-block" id="captcha-confirm">确认发布</button>
    </div>
  </div>
</div>

{{/* 管理员专享昵称：点击发布后弹出后台账号验证 */}}
<div class="modal" id="admin-verify-modal" hidden>
  <div class="modal-mask"></div>
  <div class="modal-box admin-verify-box">
    <h3>管理员身份验证</h3>
    <p class="muted">昵称「<b id="admin-verify-nick"></b>」为管理员专享，请验证后台账号后发布</p>
    <label>后台账号
      <input type="text" id="admin-user" maxlength="64" autocomplete="off" placeholder="管理员用户名">
    </label>
    <label>后台密码
      <input type="password" id="admin-pass" maxlength="128" autocomplete="off" placeholder="管理员密码">
    </label>
    <p class="form-err" id="admin-verify-err" hidden></p>
    <div class="btn-row">
      <button type="button" class="btn btn-ghost btn-block" id="admin-verify-cancel">取消</button>
      <button type="button" class="btn btn-primary btn-block" id="admin-verify-ok">验证并继续</button>
    </div>
  </div>
</div>

{{if .aiPrecheck}}
{{/* 发帖 AI 预审加载动画 */}}
<div class="scan-overlay" id="ai-scan" hidden>
  <div class="scan-mask"></div>
  <div class="scan-card compact">
    <div class="scan-rings">
      <svg class="ring" viewBox="0 0 120 120" width="108" height="108" aria-hidden="true">
        <circle class="ring-bg" cx="60" cy="60" r="52"></circle>
        <circle class="ring-fg spin" cx="60" cy="60" r="52"></circle>
      </svg>
      <div class="scan-sweep"></div>
      <div class="ring-center">
        <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z"/><path d="M18.5 15.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z"/></svg>
      </div>
    </div>
    <h3 class="scan-title">AI 智能审核中</h3>
    <p class="scan-sub" id="ai-scan-sub">正在提取内容特征</p>
    <div class="scan-bar"><span class="indeterminate"></span></div>
    <p class="scan-hint">审核通过后将自动发布，请勿关闭页面</p>
  </div>
</div>
{{end}}
{{.compose_after}}
{{end}}

{{/* ============ 编辑帖子 ============ */}}
{{define "pg_edit"}}
<form class="compose card" method="post" action="/post/{{.post.ID}}/edit">
  <h2>编辑帖子</h2>
  <input type="hidden" name="_csrf" value="{{.csrf}}">
  <label>内容（3000 字以内）
    <textarea name="content" maxlength="3000" rows="8" required>{{.post.Content}}</textarea>
  </label>
  <div class="btn-row">
    <a class="btn btn-ghost" href="/post/{{.post.ID}}">取消</a>
    <button class="btn btn-primary" type="submit">保存</button>
  </div>
</form>
{{end}}

{{/* ============ 登录 ============ */}}
{{define "pg_login"}}
<form class="auth card" method="post" action="/login">
  <h2>登录</h2>
  <input type="hidden" name="_csrf" value="{{.csrf}}">
  {{with .err}}<p class="form-err">{{.}}</p>{{end}}
  <input type="hidden" name="next" value="{{.next}}">
  <label>用户名<input type="text" name="username" required maxlength="20"></label>
  <label>密码<input type="password" name="password" required minlength="6"></label>
  <button class="btn btn-primary btn-block" type="submit">登录</button>
  <p class="auth-alt">还没有账号？<a href="/register">立即注册</a></p>
</form>
{{end}}

{{/* ============ 注册 ============ */}}
{{define "pg_register"}}
<form class="auth card" method="post" action="/register">
  <h2>注册</h2>
  <input type="hidden" name="_csrf" value="{{.csrf}}">
  {{with .err}}<p class="form-err">{{.}}</p>{{end}}
  {{if .allow}}
  <label>用户名<input type="text" name="username" required maxlength="20" placeholder="3-20 位字母数字下划线或中文"></label>
  <label>邮箱<input type="email" name="email" required></label>
  {{if .needCode}}
  <label>邮箱验证码
    <div class="code-row">
      <input type="text" name="code" required maxlength="6" inputmode="numeric" placeholder="6 位验证码">
      <button class="btn btn-ghost" type="button" id="send-code" data-email="email">发送验证码</button>
    </div>
  </label>
  {{end}}
  <label>密码<input type="password" name="password" required minlength="6"></label>
  <button class="btn btn-primary btn-block" type="submit">注册</button>
  {{else}}
  <p class="empty">本站已关闭注册</p>
  {{end}}
  <p class="auth-alt">已有账号？<a href="/login">去登录</a></p>
</form>
{{end}}

{{/* ============ 个人主页 ============ */}}
{{define "pg_profile"}}
<div class="profile-head card">
  <span class="avatar big">{{substr0 .owner.Username}}</span>
  <div class="meta">
    <h2>{{.owner.Username}}</h2>
    <p class="muted">共 {{len .posts}} 条帖子</p>
  </div>
  {{if .self}}<a class="btn btn-ghost" href="/logout">退出登录</a>{{end}}
</div>
<div class="masonry">
  {{range .posts}}
  <article class="card post-card">
    <div class="card-head">
      <span class="avatar">{{substr0 .Nickname}}</span>
      <div class="meta">
        <div class="nick-row">
          <span class="nickname">{{.Nickname}}</span>
          {{range .Badges}}<span class="post-badge">{{.}}</span>{{end}}
        </div>
        <time>{{datefmt .CreatedAt}}</time>
      </div>
      {{if or $.self $.admin}}
      <div class="row-actions">
        <a class="mini-btn" href="/post/{{.ID}}/edit">编辑</a>
        <form method="post" action="/post/{{.ID}}/delete" class="inline-form" data-confirm="确定删除该帖子吗？">
          <input type="hidden" name="_csrf" value="{{$.csrf}}">
          <button class="mini-btn danger" type="submit">删除</button>
        </form>
      </div>
      {{end}}
    </div>
    <a class="card-link" href="/post/{{.ID}}">
      <p class="content">{{nl2br (snippet .Content 120)}}</p>
    </a>
    <div class="card-foot">
      <span class="act"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-8-5.2-8-10.4C4 7 6.2 5 8.8 5c1.6 0 2.7.8 3.2 1.7C12.5 5.8 13.6 5 15.2 5 17.8 5 20 7 20 10.6 20 15.8 12 21 12 21z"/></svg>{{.LikeCount}}</span>
      <span class="act"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a8 8 0 1 1-3.2-6.4L21 4l-1 4.4c.6 1.1 1 2.3 1 3.6z"/></svg>{{.CommentCount}}</span>
    </div>
  </article>
  {{else}}<p class="empty">暂无帖子</p>{{end}}
</div>
{{.profile_after}}
{{end}}