{{$contentID := .content_id}}
{{if $contentID}}
<section class="mt-10 border-t border-zinc-800 pt-8" data-bj-comments
    data-content-id="{{$contentID}}"
    data-comment-login="{{if get_option `comment_registration`}}1{{else}}0{{end}}">
    <h2 class="text-lg font-bold text-white mb-4">观众评论</h2>
    <div data-bj-comment-form-wrap class="mb-6">
        <form data-bj-comment-form class="space-y-3">
            <p data-bj-comment-reply-hint class="hidden text-xs text-amber-400/90"></p>
            <textarea name="content" rows="3" maxlength="500" required
                placeholder="写下你的看法…"
                class="w-full px-4 py-3 rounded-md bg-zinc-900/80 border border-zinc-700 text-white text-sm placeholder-gray-500 outline-none focus:border-amber-500/50 resize-none"></textarea>
            <div data-bj-comment-guest class="hidden">
                <input name="author" type="text" maxlength="32" placeholder="昵称（选填）"
                    class="w-full max-w-xs px-3 py-2 rounded-md bg-zinc-900/80 border border-zinc-700 text-white text-sm placeholder-gray-500 outline-none focus:border-amber-500/50">
            </div>
            <div class="flex items-center justify-between gap-3 flex-wrap">
                <div class="flex items-center gap-2 ml-auto">
                    <button type="button" data-bj-comment-cancel-reply class="hidden px-4 py-2 rounded-md border border-zinc-700 text-gray-400 text-sm hover:text-white hover:border-zinc-500 transition-colors">
                        取消回复
                    </button>
                    <button type="submit" data-bj-comment-submit
                        class="px-5 py-2 rounded-md bg-amber-600 hover:bg-amber-500 text-white text-sm font-medium transition-colors">
                        发表评论
                    </button>
                </div>
            </div>
            <p data-bj-comment-error class="hidden text-sm text-red-400"></p>
        </form>
        <p data-bj-comment-login-only class="hidden text-sm text-gray-400">
            <a href="{{get_option `login_url`}}" class="text-amber-400 hover:text-amber-300">登录</a> 后参与评论
        </p>
    </div>
    <div data-bj-comment-list class="space-y-4">
        <p class="text-sm text-gray-500">加载评论中…</p>
    </div>
    <div class="mt-4 text-center">
        <button type="button" data-bj-comment-load-more class="hidden px-5 py-2 rounded-md border border-zinc-700 text-sm text-gray-300 hover:text-white hover:border-zinc-500 transition-colors">
            加载更多评论
        </button>
    </div>
</section>
{{end}}