@php
  /** @var \Illuminate\Support\Collection<int, \App\Models\MembershipSiteLessonComment> $lessonComments */
  $lessonComments = $lessonComments ?? collect();
@endphp
<section class="mt-4 pt-3 border-top" aria-labelledby="lesson-comments-heading">
  <h2 id="lesson-comments-heading" class="h6 text-secondary border-bottom pb-2 mb-3">
    <i class="bi bi-chat-dots me-1"></i>コメント
  </h2>

  @if($lessonComments->isNotEmpty())
    @php
      // コメントは受講者が増やすので上限がある。**黙って打ち切らず**件数を出す。
      $lessonCommentTotal = $lessonCommentTotal ?? $lessonComments->count();
      $lessonCommentMax = \App\Services\MembershipSite\MembershipSiteLessonCommentService::MAX_COMMENTS_PER_LESSON;
    @endphp
    @if($lessonCommentTotal > $lessonCommentMax)
      <p class="small text-muted mb-2">
        全 {{ number_format($lessonCommentTotal) }} 件のうち、最新 {{ number_format($lessonCommentMax) }} 件を表示しています。
      </p>
    @endif
    <div class="vstack gap-3 mb-4">
      @foreach($lessonComments as $comment)
        <article class="border rounded p-3 bg-white shadow-sm">
          <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
            <strong class="small">{{ $comment->author_name }}</strong>
            <time class="small text-muted text-nowrap" datetime="{{ $comment->created_at?->toIso8601String() }}">
              {{ $comment->created_at?->timezone(config('app.timezone'))->format('Y/m/d H:i') }}
            </time>
          </div>
          <p class="mb-0 small" style="white-space:pre-wrap;">{{ $comment->body }}</p>
          @if(filled($comment->admin_reply))
            <div class="mt-3 pt-3 border-top border-2 border-primary-subtle">
              <div class="small fw-semibold text-primary mb-1">
                {{ $comment->admin_reply_author_name ?: '運営' }} からの返信
              </div>
              <p class="mb-0 small text-muted" style="white-space:pre-wrap;">{{ $comment->admin_reply }}</p>
            </div>
          @endif
        </article>
      @endforeach
    </div>
  @else
    <p class="text-muted small mb-3">まだコメントはありません。最初のコメントを投稿してみましょう。</p>
  @endif

  <div class="card border-0 bg-light">
    <div class="card-body">
      <h3 class="h6 mb-3">コメントを投稿</h3>
      @if($errors->any())
        <div class="alert alert-danger py-2 small">
          <ul class="mb-0 ps-3">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
      <form method="POST" action="{{ route('member.lesson.comment.store', ['slug' => $site->slug, 'bundle' => $bundle->id, 'track' => $track->id, 'lesson' => $lesson->id]) }}">
        @csrf
        <div class="mb-3">
          <label class="form-label small fw-semibold" for="lesson-comment-body">コメント</label>
          <textarea id="lesson-comment-body" name="body" class="form-control" rows="4" required maxlength="2000" placeholder="コメントを入力">{{ old('body') }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">投稿する</button>
      </form>
    </div>
  </div>
</section>