{{define "admin_moments"}}
  <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;">
    <div>
      <p style="margin:0;color:var(--muted);font-size:13px;">
        晴空瞬语后台：替大家保管好这一页心情日记——写新的一句、把值得留住的置顶、把嘈杂的清出去。
      </p>
    </div>
    <a href="/moments" class="btn btn-ghost btn-sm" target="_blank" rel="noopener">查看前台页面</a>
  </div>

  <!-- ===== 新建动态 ===== -->
  <div class="panel">
    <h2>落笔一句新的</h2>
    <form method="post" action="/admin/moments/create">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <div class="form-row">
        <label>落笔人</label>
        <input type="text" name="author" placeholder="留空则显示「匿名」" maxlength="40">
      </div>
      <div class="form-row">
        <label>此刻的心情</label>
        <textarea name="content" class="small" data-zx-editor placeholder="写下此刻的心情，生活化一点，有温度一点…" maxlength="500" required></textarea>
      </div>
      <button class="btn btn-primary" type="submit">写下这一句</button>
    </form>
  </div>

  <!-- ===== 动态列表 ===== -->
  <div class="panel" style="padding:0;">
    <h2 style="padding:16px 20px 0;">
      动态列表（{{len .Data.Moments}}）
      <span style="font-weight:400;color:var(--muted);font-size:12.5px;">置顶动态会浮到时间线最上面——那是编辑亲手压的书签，不是算法</span>
    </h2>
    {{if .Data.Moments}}
    <table class="table">
      <thead>
        <tr>
          <th>此刻</th>
          <th>内容</th>
          <th>作者</th>
          <th>共鸣</th>
          <th>回响</th>
          <th>时间</th>
          <th class="th-ops">操作</th>
        </tr>
      </thead>
      <tbody>
        {{range .Data.Moments}}
        <tr>
          <td>
            <span class="moment-when">{{.TimeLabel}}</span>
            {{if .Sticky}}<span class="badge badge-pub" style="margin-left:6px;">置顶</span>{{end}}
          </td>
          <td>
            <a href="/moments/{{.ID}}" target="_blank" rel="noopener">{{truncate .Content 30}}</a>
          </td>
          <td>{{.Author}}</td>
          <td><span class="moment-like">{{.Likes}} {{ico "heart"}}</span></td>
          <td>{{.CommentCount}}</td>
          <td>{{.DateLabel}} · {{date .CreatedAt}}</td>
          <td class="th-ops">
            <div class="row-actions">
              <a href="/moments/{{.ID}}" class="btn btn-ghost btn-sm" target="_blank" rel="noopener">查看</a>
              <form method="post" action="/admin/moments/{{.ID}}/toggle" style="display:inline;">
                <input type="hidden" name="csrf" value="{{$.CSRF}}">
                <button class="btn btn-ghost btn-sm" type="submit">{{if .Sticky}}取消置顶{{else}}置顶{{end}}</button>
              </form>
              <form method="post" action="/admin/moments/{{.ID}}/delete" style="display:inline;"
                    onsubmit="return confirm('确定删除这句「{{truncate .Content 12}}」吗？它的片刻回响也会一并消失，此操作不可恢复。');">
                <input type="hidden" name="csrf" value="{{$.CSRF}}">
                <button class="btn btn-danger btn-sm" type="submit">删除</button>
              </form>
            </div>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
    {{else}}
    <div style="text-align:center;color:var(--muted);padding:40px 0;">日记本还是空的，先在上面写下第一句吧。</div>
    {{end}}
  </div>

  {{if or .Data.Prev .Data.Next}}
  <div style="display:flex;justify-content:center;gap:10px;align-items:center;">
    {{if .Data.Prev}}<a class="btn btn-ghost btn-sm" href="/admin/moments?page={{sub .Data.Page 1}}">← 上一页</a>{{else}}<span class="btn btn-ghost btn-sm" style="opacity:.4">← 上一页</span>{{end}}
    <span style="color:var(--muted);font-size:13px;">第 {{.Data.Page}} / {{.Data.TotalPages}} 页</span>
    {{if .Data.Next}}<a class="btn btn-ghost btn-sm" href="/admin/moments?page={{add .Data.Page 1}}">下一页 →</a>{{else}}<span class="btn btn-ghost btn-sm" style="opacity:.4">下一页 →</span>{{end}}
  </div>
  {{end}}
{{end}}