{{define "moments_index"}}
  <div class="thm-moments momo-scene">
  <!-- ===== 晴空瞬语 · 沉浸式场景：飘落纸屑的日记本 ===== -->
  <header class="momo-hero momo-scene-hero">
    <div class="momo-hero-bg" aria-hidden="true">
      <!-- 飘落纸屑：小方块 / 纸条，玫红与金色交替 -->
      <i class="momo-confetti momo-confetti-1"></i>
      <i class="momo-confetti momo-confetti-2"></i>
      <i class="momo-confetti momo-confetti-3"></i>
      <i class="momo-confetti momo-confetti-4"></i>
      <i class="momo-confetti momo-confetti-5"></i>
      <!-- 折一只纸飞机，把心情捎给今天 -->
      <span class="momo-plane" aria-hidden="true">✈</span>
    </div>
    <span class="momo-kicker momo-scene-kicker">晴空瞬语 · 一页心情日记</span>
    <h1 class="momo-title momo-scene-title">今天，把心情<br>写下来</h1>
    <p class="momo-note momo-scene-note">
      这里没有算法，也没有被推着走的热点。每一句都是有人亲手写下的——
      <b>时间线主权，交还给真实的生活</b>。
    </p>
    <div class="momo-scene-feet">
      <span>📖 按落笔先后，慢慢翻</span>
      <span>♥ 共鸣代替点赞</span>
      <span>⏳ 无算法 · 只有时间线</span>
    </div>
  </header>

  <!-- ===== 静静模式说明条 ===== -->
  <div class="momo-quiet momo-scene-quiet">
    <span class="momo-quiet-mark">静</span>
    <p class="momo-quiet-text">
      这里没有算法，只有时间线，你刷到的都是<b>最新与真实</b>。
      不猜你喜欢、不喂信息茧房、不制造焦虑——像翻一本安静的心情日记。
    </p>
  </div>

  <!-- ===== 写一笔：登录后前台发布 ===== -->
  {{if .Data.Err}}<div class="momo-post-err">{{.Data.Err}}</div>{{end}}
  <div class="momo-post momo-scene-post">
    {{if .Data.CurrentUser}}
    <form method="post" action="/moments/publish">
      <div class="momo-post-head">
        <span class="momo-post-label">✎ 此刻，<b>{{.Data.CurrentUser}}</b> 想写点什么</span>
      </div>
      <textarea name="content" placeholder="一句话心情，一段小确幸，落进时间线…" rows="3" maxlength="2000" required></textarea>
      <div class="momo-post-foot">
        <span class="momo-post-hint">写下来，就是今天的存档。</span>
        <button class="btn btn-primary" type="submit">落一笔</button>
      </div>
    </form>
    {{else}}
    <div class="momo-post-login">
      <span>登录后才能写下这一刻。</span>
      <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </div>

  <!-- ===== 今日 · 一句话 卡片 ===== -->
  {{if .Data.TodayFirst}}
  {{$tf := .Data.TodayFirst}}
  <div class="momo-today momo-scene-today">
    <div class="momo-today-head">
      <span class="momo-today-tag">今日 · 一句话</span>
      <span class="momo-today-date">{{date .Data.TodayFirst.CreatedAt}} · 今天最早落笔</span>
    </div>
    <blockquote class="momo-today-quote">{{$tf.Content}}</blockquote>
    <div class="momo-today-foot">
      <span class="momo-today-author">—— {{$tf.Author}}</span>
      <a class="momo-today-link" href="/moments/{{$tf.ID}}">去听片刻回响 →</a>
    </div>
  </div>
  {{else}}
  <div class="momo-today momo-today-empty momo-scene-today">
    <p>今天还没有人落笔。第一句心情，由你来写。</p>
  </div>
  {{end}}

  <div class="momo-layout">
    <!-- ===== 中栏：贴在本子上的便签时间线 ===== -->
    <div class="momo-mid">
      <div class="momo-paper momo-scene-paper">
        <h3 class="momo-panel-title momo-scene-panel-title">本子上的便签 <span class="momo-title-note">每一句都是亲手贴上去的一刻</span></h3>
        {{range .Data.Moments}}
        <article class="momo-item momo-scene-note">
          <span class="momo-tape momo-scene-tape" aria-hidden="true"></span>
          <span class="momo-dot" aria-hidden="true"></span>
          <div class="momo-item-body">
            <div class="momo-item-meta">
              {{if .Sticky}}<span class="momo-pin">置顶</span>{{end}}
              <span class="momo-when">{{.TimeLabel}}</span>
              <span class="momo-date">{{.DateLabel}}</span>
              <span class="momo-author">—— {{.Author}}</span>
            </div>
            <p class="momo-content">{{.Content}}</p>
            <div class="momo-item-foot">
              <form class="momo-like" method="post" action="/moments/{{.ID}}/like">
                <button type="submit" title="听见这句，轻轻共鸣一下">
                  <span class="momo-heart" aria-hidden="true">♡</span>
                  <span class="momo-like-text">共鸣 {{.Likes}}</span>
                </button>
              </form>
              <a class="momo-comments" href="/moments/{{.ID}}">
                <span aria-hidden="true">💬</span>
                <span>{{.CommentCount}} 条片刻回响</span>
              </a>
              <a class="momo-read" href="/moments/{{.ID}}">翻开这一页 →</a>
            </div>
          </div>
        </article>
        {{else}}
        <div class="momo-empty">
          <h3>日记本还是空的</h3>
          <p>还没有人写下第一句心情，登录后落一笔吧。</p>
        </div>
        {{end}}
      </div>
    </div>

    <!-- ===== 右栏：最热瞬语 + 片刻回响 ===== -->
    <aside class="momo-right">
      <div class="momo-panel momo-scene-panel">
        <h3 class="momo-panel-title momo-scene-panel-title">最热瞬语 <span class="momo-title-note">共鸣最多的 3 句</span></h3>
        {{if .Data.Hot}}
        <ul class="momo-hot">
          {{range .Data.Hot}}
          <li>
            <a href="/moments/{{.ID}}">
              <span class="momo-hot-when">{{.TimeLabel}}</span>
              <span class="momo-hot-text">{{truncate .Content 42}}</span>
            </a>
            <em>{{.Likes}} 共鸣</em>
          </li>
          {{end}}
        </ul>
        {{else}}
        <div class="momo-empty-sm">还没有共鸣，等第一句戳心的话。</div>
        {{end}}
      </div>

      <div class="momo-panel momo-scene-panel">
        <h3 class="momo-panel-title momo-scene-panel-title">片刻回响 <span class="momo-title-note">最新的评论</span></h3>
        {{if .Data.Echoes}}
        <ul class="momo-echoes">
          {{range .Data.Echoes}}
          <li>
            <p class="momo-echo-text">{{.Content}}</p>
            <div class="momo-echo-meta">
              <span class="momo-echo-name">{{.Author}}</span>
              <span class="momo-echo-about">回应了 {{.MomentAuthor}} 的「{{truncate .MomentSnippet 16}}」</span>
            </div>
            <span class="momo-echo-time">{{dateTime .CreatedAt}}</span>
          </li>
          {{end}}
        </ul>
        {{else}}
        <div class="momo-empty-sm">还没有回响，去做第一个接话的人。</div>
        {{end}}
      </div>
    </aside>
  </div>
  {{template "module_meta" .}}
  </div>
{{end}}