{{define "playComments"}}
<link rel="stylesheet" href="/static/css/playComments.css">
{{/* 播放页评论区：首屏 4 条，超出显示「查看更多评论」客户端翻页 */}}
{{$c := .chapter}}
{{$pageSize := .commentSize}}
{{$total := .commentTotal}}
{{$shown := len .comments}}
<div
  class="play-comments"
  data-play-comments
  data-comment-page="{{if .commentPage}}{{.commentPage}}{{else}}1{{end}}"
  data-comment-size="{{if gt $pageSize 0}}{{$pageSize}}{{else}}4{{end}}"
  data-comment-total="{{$total}}"
  data-comment-loaded="{{$shown}}"
  data-object-id="{{.commentObjectID}}"
  data-object-type="{{.commentObjectType}}"
>
  <div class="play-comments__head">
    <h2 class="play-comments__title">评论</h2>
    <span class="play-comments__count" data-comment-total-label>{{if gt $total 0}}{{$total}} 条{{else if and $c (gt $c.CountComment 0)}}{{$c.CountComment}} 条{{else if and .video (gt .video.CountComment 0)}}{{.video.CountComment}} 条{{else}}暂无评论{{end}}</span>
  </div>

  <ul class="play-comment-list" data-comment-list>
    {{range .comments}}
    <li class="play-comment" data-comment-id="{{.ID}}">
      {{$avatar := commentAvatar .UserAvatar}}
      {{if .UserAvatar}}
          <img decoding="async" loading="lazy" class="play-comment__avatar lazy" src="/static/images/placeholder.png?v=2" data-src="{{$avatar}}" alt="评论用户头像">
      {{else}}
          <img decoding="async" loading="lazy" class="play-comment__avatar" src="/static/images/placeholder.png?v=2" data-src="{{$avatar}}" alt="评论用户头像">
      {{end}}
      <div class="play-comment__body">
        <div class="play-comment__meta">
          <span class="play-comment__name">{{if .UserName}}{{.UserName}}{{else}}匿名用户{{end}}</span>
          <span class="play-comment__time">{{formatCommentTime .CreatedAt}}</span>
        </div>
        <p class="play-comment__text">{{.Text}}</p>
        {{range .Children}}
        <div class="play-comment__reply">
          {{if .UserName}}{{.UserName}}{{else}}用户{{end}}{{if .ReplyUserName}} 回复 {{.ReplyUserName}}{{end}}：{{.Text}}
        </div>
        {{end}}
        <div class="play-comment__actions">
          <span class="play-comment__action">
            <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/heart.svg" alt="点赞数">
            <span>{{.CountLike}}</span>
          </span>
        </div>
      </div>
    </li>
    {{else}}
    <li class="play-comment play-comment--empty">
      <p class="play-comment__text">暂无评论</p>
    </li>
    {{end}}
  </ul>

  <button
    class="play-comments__more"
    type="button"
    data-comment-more
    {{if le $total $shown}}hidden{{end}}
  >
    查看更多评论
    <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
  </button>
</div>
<script defer src="/static/js/pages/playComments.js?v=5"></script>
{{end}}