<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<comment th:fragment="reply-comment" class="post-comment">
    <div id="respond" class="respond"
    th:attr="style=${!post.enableComment?'display: none':''},comment-enabled=${post.enableComment}">
        <div class="cancel-comment-reply">
            <a id="cancel-comment-reply-link"
                th:href="@{'#respond-post-' + ${post.postId}}"
                rel="nofollow" style="display: none">取消回复</a>
        </div>
        <form class="new-comment-form" onsubmit="" method="post" 
              th:attr="action=${post.link + '/honeyReply'},u=${post.link + '/reply'}">
            <input type="hidden" name="replyTo">
            <input type="hidden" name="id">
            <div class="comment-trigger">
                <div class="avatar">
                    <img src="/blog/bleaching/images/visitor.avif" alt="visitor" height="36" width="36" loading="lazy">
                </div>
                <div class="trigger-title">撰写评论</div>
            </div>
            <div class="new-comment">
                <textarea name="content" rows="2" class="textarea-box" autocomplete="off" placeholder=""
                th:attr="support-markdown=${@commentConfig.markdownOn}"></textarea>
                <span class="comment-error"></span>
            </div>
            <div class="comment-preview comment-content" style="display: none;">
                
            </div>
            <div class="comment-triggered">
                <div class="comment-setting">
                    <th:block th:if="${@commentConfig.markdownOn}">
                        <label><input type="checkbox" name="markdown" checked title="开启 Markdown">开启 Markdown</label>
                        <label><input type="checkbox" name="preview" class="no-cookie" title="预览">预览</label>
                    </th:block>
                    <th:block th:if="${@mailConfig.mailOn}">
                        <label><input type="checkbox" name="subscribeReply" checked title="回复邮件通知">回复邮件通知</label>
                    </th:block>
                </div>
                <div class="input-body input-not-login">
                    <ul class="ident">
                        <li><input type="text" name="author"
                            placeholder="Author"></li>
                        <li><input type="text" name="email"
                            placeholder="Email"></li>
                        <li><input type="text" name="url"
                            placeholder="Site"></li>
                    </ul>
                    <button type="button" class="comment-submit-button" title="提交评论">
                    </button>
                </div>
            </div>
        </form>
    </div>
    
    <th:block th:if="${!post.enableComment}">
        <div>
            <div class="comment-closed">
                <div class="comment-trigger comment-closed">
                    <div class="avatar">
                        <img width="36" height="36"
                            th:src="@{/blog/bleaching/images/zipper-mouth-face.avif}" alt="Comment Closed" loading="lazy">
                    </div>
                    <div class="trigger-title">该[[${post.type.note}]]已关闭评论</div>
                </div>
            </div>
        </div>
    </th:block>
</comment>
<th:block th:fragment="renderComment(comment)">
    <li th:id="'li-comment-' + ${comment.id}" class="comment">
        <a th:attr="name=${'comment-' + comment.id}"></a>
        <div class="author">
            <img 
                class="avatar" 
                referrerpolicy="same-origin"
                loading="lazy"
                width="36" height="36"
                th:attr="alt=${comment.author}"
                th:src="${comment.avatarUrl}">
            <div class="author-name">
                <b th:if="${not #strings.isEmpty(comment.url)}">
                    <a 
                        th:href="@{${comment.url}}"
                        th:text="${comment.author}"
                        rel="external nofollow">
                    </a>
                </b>
                <b th:if="${#strings.isEmpty(comment.url)}" th:text="${comment.author}">
                </b>
                <a th:if="${(post != null && post.enableComment) or (enableComment == true)}" rel="nofollow" href="#" class="reply" th:attr="to=${comment.id}">
                    reply
                </a>
                <a th:if="${comment.editable}" rel="nofollow" class="edit" href="#" th:attr="of=${comment.id}">
                    edit
                </a>
            </div>
            <div class="author-date">
                <small th:attr="title=${#temporals.format(comment.createTime, 'yyyy-MM-dd HH:mm:ss')}">
                    [[${AgoUtils.ago(comment.createTime)}]]</small>
            </div>
        </div>
        <span th:if="${comment.commentStatus != CommentStatusEnum.RELEASED}" class="comment-error">您的评论待审核后可见<br/></span>
        <div th:if="${!comment.markdown}" class="comment-content" th:text="${comment.content}"></div>
        <div th:if="${ comment.markdown}" class="markdown comment-content" th:utext="${@markdownService.renderCommentContent(comment)}"></div>
        <div class="comment-children" th:if="${not #lists.isEmpty(comment.subComments)}">
            <th:block th:each="sub,index:${comment.subComments}">
                <ol class="comment-list" th:insert="~{this::renderComment(${sub})}"></ol>
            </th:block>
        </div>
    </li>
</th:block>
<th:block th:fragment="renderTweetComment(comment)">
    <li th:id="'li-comment-' + ${comment.id}" class="comment">
        <a th:attr="name=${'comment-' + comment.id}"></a>
        <div class="author">
            <img 
                class="avatar" 
                referrerpolicy="same-origin"
                loading="lazy"
                width="36" height="36"
                th:attr="alt=${comment.author}"
                th:src="${comment.avatarUrl}">
            <div class="author-name">
                <b th:if="${not #strings.isEmpty(comment.url)}">
                    <a 
                        th:href="@{${comment.url}}"
                        th:text="${comment.author}"
                        rel="external nofollow">
                    </a>
                </b>
                <b th:if="${#strings.isEmpty(comment.url)}" th:text="${comment.author}">
                </b>
                <a th:if="${(post != null && post.enableComment) or (enableComment == true)}" rel="nofollow" href="#" class="reply" th:attr="to=${comment.id}">
                    reply
                </a>
                <a th:if="${comment.editable}" rel="nofollow" class="edit" href="#" th:attr="of=${comment.id}">
                    edit
                </a>
            </div>
            <div class="author-date">
                <small th:attr="title=${#temporals.format(comment.createTime, 'yyyy-MM-dd HH:mm:ss')}">
                    [[${AgoUtils.ago(comment.createTime)}]]</small>
            </div>
        </div>
        <span th:if="${comment.commentStatus != CommentStatusEnum.RELEASED}" class="comment-error">您的评论待审核后可见<br/></span>
        <div th:if="${!comment.markdown}" class="comment-content" th:text="${comment.content}"></div>
        <div th:if="${ comment.markdown}" class="comment-content" th:utext="${@markdownService.renderCommentContent(comment)}"></div>
        <div class="comment-children" th:if="${not #lists.isEmpty(comment.subComments)}">
            <th:block th:each="sub,index:${comment.subComments}">
                <ol class="comment-list" th:insert="~{this::renderComment(${sub})}"></ol>
            </th:block>
        </div>
    </li>
</th:block>
<th:block th:fragment="paginator">
    <ol class="page-navigator comment" th:if="${commentPage!=null && commentPage.pages > 1}"
        th:attr="data-pagination-prefix=${commentPaginationPrefix}">
        <th:block th:if="${commentPage.pages >= 1}">
            <th:block th:if="${commentPage.current > 2}">
                <li>
                    <a class="comment-page-num" th:href="@{${commentPaginationPrefix} + 1}">1</a>
                </li>
                <li th:if="${commentPage.current > 3}">
                    <span>...</span>
                </li>
            </th:block>
            <th:block th:if="${commentPage.pages > 1}" 
                th:each="page : 
                    ${#numbers.sequence(
                        T(java.lang.Math).max(commentPage.current - 1, 1L), 
                        T(java.lang.Math).min(commentPage.current + 1, commentPage.pages))}" >
                <li th:class="${commentPage.current == page}?current">
                    <a class="comment-page-num" th:href="@{${commentPaginationPrefix} + ${page}}" th:text="${page}"></a>
                </li>
            </th:block>
            <th:block th:if="${commentPage.current < commentPage.pages - 1}">
                <li th:if="${commentPage.current < commentPage.pages - 2}">
                    <span>...</span>
                </li>
                <li>
                    <a class="comment-page-num" th:href="@{${commentPaginationPrefix} + ${commentPage.pages}}" th:text="${commentPage.pages}"></a>
                </li>
            </th:block>
        </th:block>
    </ol>
</th:block>
<div th:fragment="tweet-comment-list" class="comment-list" th:with="hasComment = ${commentPage != null && commentPage.total > 0}">
    <ol class="comment-list"
        th:classappend="*{hasComment}? has-comment : _">
        <th:block th:if="${hasComment}">
            <th:block th:each="comment,index:${commentPage.records}">
                <th:block th:insert="~{this::renderTweetComment(${comment})}"></th:block>
            </th:block>
        </th:block>
    </ol>
    <span th:if="${commentPage!=null && commentPage.pages > 1}" class="all-tweet-comments">
        <a th:href="@{${post.link} + '#comment-page'}" title="跳转到详情页评论">
            查看所有 [[${post.commentCount}]] 条评论
        </a>
    </span>
</div>
<div th:fragment="comment-list" class="comment-list" th:with="hasComment = ${commentPage != null && commentPage.total > 0}">
    <th:block th:insert="~{this::paginator}"></th:block>
    <ol class="comment-list">
        <th:block th:if="${hasComment}">
            <th:block th:each="comment,index:${commentPage.records}">
                <th:block th:insert="~{this::renderComment(${comment})}"></th:block>
            </th:block>
        </th:block>
    </ol>
    <th:block th:insert="~{this::paginator}"></th:block>
</div>
</html>