<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<comment th:fragment="reply-comment" class="post-comment" >
    <th:block 
        th:if="${post.enableComment}"
        >
        <div th:id="'respond-post-' + ${post.postId}" class="respond">
            <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 + '/reply'}">
                <input type="hidden" name="replyTo">
                <div class="comment-trigger">
                    <div class="avatar">
                        <img src="/blog/sketch/images/visitor.avif">
                    </div>
                    <div class="trigger-title">撰写评论</div>
                </div>
                <div class="new-comment">
                    <textarea name="content" rows="2" class="textarea-box"></textarea>
                    <span class="comment-error"></span>
                </div>
                <div class="comment-triggered">
                    <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="submit" class="comment-submit-button">
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </th:block>
    <th:block th:if="${!post.enableComment}">
        <div class="respond">
            <div class="comment-closed">
                <div class="comment-trigger comment-closed">
                    <div class="avatar">
                        <img
                            src="/blog/sketch/images/zipper-mouth-face.avif">
                    </div>
                    <div class="trigger-title">该文章已关闭评论</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"
                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 and post.enableComment) or enableComment}" rel="nofollow" class="reply" th:attr="to=${comment.id}">
                    reply
                </a>
            </div>
            <div class="author-date">
                <small th:text="${#temporals.format(comment.createTime, 'yyyy-MM-dd HH:mm:ss')}">
                </small>
            </div>
        </div>
        <div 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>
<div th:fragment="comment-list" class="comment-list">
    <ol class="comment-list">
        <th:block th:if="${commentPage != null && commentPage.total > 0}">
            <th:block th:each="comment,index:${commentPage.records}">
                <th:block th:insert="~{this::renderComment(${comment})}"></th:block>
            </th:block>
        </th:block>
    </ol>
    <ol class="page-navigator comment" th:if="${commentPage!=null && commentPage.pages > 1}" >
        <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>
</div>
</html>