{{define "timeline_moments_detail"}}
<div class="tl-page">
  <div class="mod-back"><a href="/moments">← 回到电波时间轴</a></div>

  <article class="mod-panel" style="padding:30px 32px;">
    <div class="mod-card-top" style="margin-bottom:10px;">
      {{if .Data.Moment.Sticky}}<span class="mod-chip hot">{{ico "pin"}} 置顶</span>{{end}}
      <span class="mod-chip time">{{.Data.Moment.TimeLabel}}</span>
      <span class="mod-meta"><span>{{.Data.Moment.DateLabel}} · {{dateTime .Data.Moment.CreatedAt}}</span></span>
    </div>
    <h1 class="mod-detail-title" style="font-family:var(--font-serif);font-size:24px;font-weight:600;">—— {{.Data.Moment.Author}}</h1>
    <div class="momo-page-content" style="margin:14px 0 22px;font-size:17px;line-height:2;color:var(--ink);">{{strictMD .Data.Moment.Content}}</div>
    <div class="mod-card-foot">
      <form class="momo-like" method="post" action="/moments/{{.Data.Moment.ID}}/like">
        <button type="submit" title="听见这句，轻轻共鸣一下">
          <span class="momo-heart" aria-hidden="true">{{ico "heart"}}</span>
          <span class="momo-like-text">共鸣 {{.Data.Moment.Likes}}</span>
        </button>
      </form>
      <span class="mod-meta"><span>{{ico "chat"}} {{.Data.Moment.CommentCount}} 条回响</span></span>
      {{template "fav_button" dict "VD" . "Type" "moments" "Key" (printf "%d" .Data.Moment.ID) "Title" (truncate .Data.Moment.Content 30) "URL" (printf "/moments/%d" .Data.Moment.ID)}}
    </div>
  </article>

  <section class="mod-panel">
    <h2 class="mod-panel-title">来电留言（{{len .Data.Comments}}）</h2>
    {{range .Data.Comments}}
    <div class="momo-echo-item">
      <div class="momo-echo-head">
        <span class="momo-echo-avatar">{{printf "%.1s" .Author}}</span>
        <span class="momo-echo-name">{{.Author}}</span>
        <span class="momo-echo-time">{{dateTime .CreatedAt}}</span>
      </div>
      <div class="momo-echo-content">{{strictMD .Content}}</div>
    </div>
    {{else}}
    <div class="mod-empty" style="padding:26px 20px;">
      <h3>还没有回响</h3>
      <p>这句话正在等一个懂它的人，做第一个接话的吧。</p>
    </div>
    {{end}}

    <form class="momo-comment-form" method="post" action="/moments/{{.Data.Moment.ID}}/comment">
      <div class="momo-comment-head">
        <span class="momo-comment-hint">{{ico "mic"}} 拨一通电话进来</span>
      </div>
      <div class="field">
        <input type="text" name="name" placeholder="你的昵称" maxlength="40" required>
      </div>
      <div class="field">
        <textarea name="content" data-zx-editor placeholder="这句让你想起了什么？慢慢地写…" maxlength="500" required></textarea>
      </div>
      {{captchaField}}
      <button class="btn btn-primary" type="submit">轻轻回应一句</button>
    </form>
  </section>
</div>
{{end}}