{{define "moments_detail"}}
  <div class="thm-moments">
  <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="{{if .Data.LikedByMe}}取消共鸣{{else}}听见这句，轻轻共鸣一下{{end}}">
          <span class="momo-heart" aria-hidden="true">{{ico "heart"}}</span>
          <span class="momo-like-text">{{if .Data.LikedByMe}}已共鸣 {{.Data.Moment.Likes}}{{else}}共鸣 {{.Data.Moment.Likes}}{{end}}</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>
    {{if .Data.Likers}}
    <div class="mod-card-foot" style="margin-top:8px;border-top:1px dashed var(--line);padding-top:10px;">
      <span class="mod-meta" style="display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;">
        <span style="margin-right:4px;">{{ico "heart"}} 共鸣过的人：</span>
        {{range .Data.Likers}}<span class="mod-chip">{{.}}</span>{{end}}
      </span>
    </div>
    {{end}}
  </article>

  <!-- 片刻回响（评论） -->
  <section class="mod-panel">
    <h2 class="mod-panel-title">片刻回响（{{len .Data.Comments}}）</h2>
    {{range .Data.Comments}}
    <div class="momo-echo-item" id="me{{.ID}}">
      <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" data-mention-highlight>{{strictMD .Content}}</div>
      <button type="button" class="btn btn-ghost btn-sm btn-reply" data-reply-to="{{.ID}}">回复</button>
      {{range .Replies}}
      <div class="momo-echo-item momo-echo-child" id="me{{.ID}}">
        <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" data-mention-highlight>{{strictMD .Content}}</div>
        <button type="button" class="btn btn-ghost btn-sm btn-reply" data-reply-to="{{.ID}}">回复</button>
      </div>
      {{end}}
    </div>
    {{else}}
    <div class="mod-empty" style="padding:26px 20px;">
      <h3>还没有回响</h3>
      <p>这句话正在等一个懂它的人，做第一个接话的吧。</p>
    </div>
    {{end}}

    <form class="momo-comment-form" id="moment-comment-form" method="post" action="/moments/{{.Data.Moment.ID}}/comment">
      <div class="momo-comment-head">
        <span class="momo-comment-hint">{{ico "pen"}} 留下片刻回响</span>
      </div>
      <input type="hidden" name="reply_to" value="0">
      {{if not .Data.CurrentUser}}
      <div class="field">
        <input type="text" name="name" placeholder="你的昵称（或登录后实名发言）" maxlength="40">
      </div>
      {{end}}
      <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>
    <script>
      (function () {
        var form = document.getElementById('moment-comment-form');
        if (!form) return;
        document.querySelectorAll('.btn-reply').forEach(function (btn) {
          btn.addEventListener('click', function () {
            var pid = btn.getAttribute('data-reply-to');
            form.querySelector('input[name="reply_to"]').value = pid;
            var ta = form.querySelector('textarea');
            var target = document.getElementById('me' + pid);
            var whom = target ? target.querySelector('.momo-echo-name') : null;
            if (whom && ta && ta.value.indexOf('@' + whom.textContent.trim()) !== 0) {
              ta.value = '@' + whom.textContent.trim() + ' ';
            }
            form.scrollIntoView({ behavior: 'smooth', block: 'center' });
            if (ta) ta.focus();
          });
        });
      })();
    </script>
  </section>
  </div>
{{end}}