{{define "timeline_moments_index"}}
<div class="tl-page">
  <!-- 深夜电台 Hero -->
  <header class="tl-hero">
    <div class="tl-hero-waves" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
    <p class="tl-hero-eyebrow">{{ico "mic"}} TIMELINE FM · 深夜电台</p>
    <h1 class="tl-hero-title">欢迎收听<span class="tl-neon">时光频率</span></h1>
    <p class="tl-hero-sub">把心情写下来，就是点一首歌给自己。</p>
    <div class="tl-hero-timeline">
      <span><em>此刻</em>{{ico "mic"}} 把一句话拨进电波</span>
      <span><em>往后</em>{{ico "radio"}} 按落笔先后播出</span>
      <span><em>始终</em>{{ico "heart"}} 共鸣代替点赞 · 无算法</span>
    </div>
  </header>

  <!-- 波段说明 -->
  <div class="tl-quiet">
    <span class="tl-quiet-mark">{{ico "radio"}}</span>
    <p class="tl-quiet-text">
      本台没有算法，只有时间线，你收到的都是<b>最新与真实</b>。
      不猜你喜欢、不喂信息茧房、不制造焦虑——像听一档安静的心情电台。
    </p>
  </div>

  <!-- 拨入一段 -->
  {{if .Data.Err}}<div class="momo-post-err">{{.Data.Err}}</div>{{end}}
  <div class="tl-post">
    {{if .Data.CurrentUser}}
    <form method="post" action="/moments/publish">
      <div class="tl-post-head">
        <span class="tl-post-label">{{ico "mic"}} 此刻，<b>{{.Data.CurrentUser}}</b> 想播点什么</span>
      </div>
      <textarea name="content" data-zx-editor placeholder="一句话心情，一段小确幸，拨进电波…" rows="3" maxlength="2000" required></textarea>
      <div class="tl-post-foot">
        <span class="tl-post-hint">写下来，就是今天的存档。</span>
        <button class="btn btn-primary" type="submit">拨入电波</button>
      </div>
    </form>
    {{else}}
    <div class="tl-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="tl-today">
    <div class="tl-today-head">
      <span class="tl-today-tag">今日信号 · 首播</span>
      <span class="tl-today-date">{{date .Data.TodayFirst.CreatedAt}} · 今天最早落笔</span>
    </div>
    <blockquote class="tl-today-quote">{{$tf.Content}}</blockquote>
    <div class="tl-today-foot">
      <span class="tl-today-author">—— {{$tf.Author}}</span>
      <a class="tl-today-link" href="/moments/{{$tf.ID}}">去听回响 →</a>
    </div>
  </div>
  {{else}}
  <div class="tl-today tl-today-empty">
    <p>今天还没有信号入台。第一句心情，由你来播。</p>
  </div>
  {{end}}

  <div class="tl-layout">
    <!-- 中栏：电波时间轴 -->
    <div class="tl-mid">
      <div class="tl-panel">
        <h3 class="tl-panel-title">电波时间轴 <span class="tl-title-note">每一句都是按序播出的信号</span></h3>
        {{range .Data.Moments}}
        <article class="tl-item">
          <span class="tl-item-wave" aria-hidden="true"></span>
          <div class="tl-item-body">
            <div class="tl-item-meta">
              {{if .Sticky}}<span class="tl-pin">置顶</span>{{end}}
              <span class="tl-when">{{.TimeLabel}}</span>
              <span class="tl-date">{{.DateLabel}}</span>
              <span class="tl-author">—— {{.Author}}</span>
            </div>
            <div class="tl-content">{{strictMD .Content}}</div>
            <div class="tl-item-foot">
              <form class="momo-like" method="post" action="/moments/{{.ID}}/like">
                <button type="submit" title="听见这句，轻轻共鸣一下">
                  <span class="momo-heart" aria-hidden="true">{{ico "heart"}}</span>
                  <span class="momo-like-text">共鸣 {{.Likes}}</span>
                </button>
              </form>
              <a class="tl-comments" href="/moments/{{.ID}}">
                <span aria-hidden="true">{{ico "chat"}}</span>
                <span>{{.CommentCount}} 条回响</span>
              </a>
              <a class="tl-read" href="/moments/{{.ID}}">听完整首 →</a>
            </div>
          </div>
        </article>
        {{else}}
        <div class="momo-empty">
          <h3>电台还没开播</h3>
          <p>还没有人拨入第一句心情，登录后落一笔吧。</p>
        </div>
        {{end}}
      </div>
    </div>

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

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

  {{template "module_meta" .}}
</div>
{{end}}