@model CommentPage

@if (!Model.Page.Any())
{
    <div class="comment-empty">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
        </svg>
        <p>暂无评论，来抢沙发吧</p>
    </div>
}
else
{
    @foreach (var item in Model.Page)
    {
        <div class="comment-item @(item.IsDelete ? "comment-item--deleted" : "")" id="@item.Id">
            <div class="comment-item__avatar">
                <partial name="_AvatarPartial" model="item.Commenter"/>
            </div>
            <div class="comment-item__body">
                <div class="comment-item__header">
                    <partial name="_NickNamePartial" model="item.Commenter"/>
                    <time class="timeago comment-item__date" datetime="@item.PublishTime" title="@item.PublishTime">@item.PublishTime</time>
                </div>
                
                <div class="comment-item__content markdown-body">
                    @{
                        var commentContent = new CommentContent
                        {
                            CommentText = item.CommentText
                        };
                    }
                    <partial name="_CommentTextPartial" model="commentContent"/>
                </div>

                <div class="comment-item__actions">
                    @if (item.IsDelete != true)
                    {
                        <button class="comment-item__reply-btn" title="回复" data-reply-id="@item.Id">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="15,10 20,15 15,20"></polyline>
                                <path d="M4 4v7a4 4 0 0 0 4 4h12"></path>
                            </svg>
                            回复
                        </button>
                    }
                </div>

                @if (item.Children.Count > 0)
                {
                    <div class="comment-replies">
                        @foreach (var reply in item.Children)
                        {
                            <div class="comment-item @(reply.IsDelete ? "comment-item--deleted" : "")" id="@reply.Id">
                                <div class="comment-item__avatar">
                                    <partial name="_AvatarPartial" model="reply.Commenter"/>
                                </div>
                                <div class="comment-item__body">
                                    <div class="comment-item__header">
                                        <partial name="_NickNamePartial" model="reply.Commenter"/>
                                        <time class="timeago comment-item__date" datetime="@reply.PublishTime" title="@reply.PublishTime">@reply.PublishTime</time>
                                    </div>
                                    
                                    <div class="comment-item__content markdown-body">
                                        @{
                                            var content = new CommentContent
                                            {
                                                CommentText = reply.CommentText,
                                                ReplyId = reply.ReplyTo?.Id,
                                                ReplyNickName = reply.ReplyTo?.NickName
                                            };
                                        }
                                        <partial name="_CommentTextPartial" model="content"/>
                                    </div>

                                    <div class="comment-item__actions">
                                        @if (reply.IsDelete != true)
                                        {
                                            <button class="comment-item__reply-btn" title="回复" data-reply-id="@reply.Id">
                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                    <polyline points="15,10 20,15 15,20"></polyline>
                                                    <path d="M4 4v7a4 4 0 0 0 4 4h12"></path>
                                                </svg>
                                                回复
                                            </button>
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
    
    @if (Model.Page.CurrentPageIndex < Model.Page.TotalPageCount)
    {
        var remaining = Model.Page.TotalItemCount - Model.Page.CurrentPageIndex * Model.Page.PageSize;
        <div class="comment-load-more">
            <button
                data-page-index="@Model.Page.CurrentPageIndex"
                data-page-size="@Model.Page.PageSize"
                data-item-count="@Model.Page.TotalItemCount"
                data-page-count="@Model.Page.TotalPageCount"
                data-page-request="@Url.Action("Page", new {node = ViewData["node"], relation = ViewData["relation"]})"
                class="comment-load-more__btn">
                加载更多 · 还有 @remaining 条
            </button>
        </div>
    }
}