<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="comment_list(posts, comments, postsType, pager)">
    <div class="posts-comment-box posts-comment-input-box clearfix" style="width: 100%;">
        <img th:if="${isLogin}"
             th:alt="${loginUser.nickname}"
             th:src="${loginUser.avatar}"
             style="width: 30px;height: 30px;border: 1px solid #ddd;border-radius: 50%;"
             class="img-fluid">
        <div th:if="${!isLogin}" style="display: inline-block;background-color: gray;width: 30px;height: 30px;border: 1px solid #ddd;border-radius: 50%;"></div>
        <textarea
              th:data-target="${isLogin ? '' : '#loginModal'}"
              th:data-toggle="${isLogin ? '' : 'modal'}"
              th:placeholder="${isLogin ? '输入评论...' : '请先登录后再评论'}"
              class="posts-comment-input-box-textarea"
              id="postsCommentInput"
              style="height: 32px;border: 1px solid #f1f1f1;outline: none;"></textarea>
        <div id="postsCommentBtnBox" class="posts-comment-input-box-btn">
            <button id="postsCommentBtn" type="button" class="btn btn-success btn-sm" style="float: right;margin-top: 10px;">评论</button>
        </div>
    </div>
    <div th:class="${'posts-comment-box' + (#lists.isEmpty(comments) ? ' no-comment-box' : '')}" style="background-color: #fff;">
        <!--<h5 class="bottom-line" style="padding-bottom: 10px;">评论</h5>-->
        <div th:if="${#lists.isEmpty(comments)}"
           th:include="include/custom-empty :: custom_empty('暂无评论')"></div>
        <div th:each="comment : ${comments}" class="clearfix">
            <div class="comment-avatar-box" style="padding-right: 0;">
                <a th:href="${'/user/' + comment.commentator.id}" target="_blank">
                    <img th:alt="${comment.commentator.nickname}"
                         th:src="${comment.commentator.avatar}"
                         style="width: 30px;height: 30px;border: 1px solid #ddd;border-radius: 50%;"
                         class="img-fluid">
                </a>
            </div>
            <div class="comment-content-box bottom-line" style="margin-bottom: 10px;">
                <p class="comment-content-box-title" style="margin-bottom: 0;">
                    <span class="text-muted">
                        <a th:text="${comment.commentator.nickname}"
                           th:href="${'/user/' + comment.commentator.id}"
                           target="_blank"></a>
                    </span>
                </p>
                <p th:text="${comment.content}" class="comment-content-box-content"></p>
                <p class="comment-content-box-foot" style="margin-bottom: 10px;">
                    <small th:text="${#dates.format(comment.createAt, 'yyyy-MM-dd HH:mm:ss')}" class="text-muted"></small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <small th:if="${isLogin && loginUser.id == posts.authorId && postsType == 'faq'}"
                           th:data-target="${isLogin ? '' : '#loginModal'}"
                           th:data-toggle="${isLogin ? '' : 'modal'}"
                           th:data-comment-id="${comment.id}"
                           class="text-muted best-answer">
                        <i data-feather="thumbs-up" style="width: 14px;height: 14px;"></i> 最佳答案
                    </small>
                    <small th:data-target="${isLogin ? '#commentModal' : '#loginModal'}"
                           data-toggle="modal"
                           th:data-reply-id="${comment.id}"
                           th:data-reply-nickname="${comment.commentator.nickname}"
                           th:data-reply-content="${comment.content}"
                           class="text-muted reply-comment"
                           style="float: right;">
                        <i data-feather="message-circle" style="width: 14px;height: 14px;"></i> 回复
                    </small>
                </p>
                <!-- 二级评论 -->
                <div th:if="${!#lists.isEmpty(comment.replies)}" th:each="reply : ${comment.replies}"
                     class="posts-comment-box clearfix" style="background-color: #fafbfc;padding-top: 10px;padding-bottom: 0;">
                    <div  class="comment-avatar-box" style="padding-right: 0;">
                        <a th:href="${'/user/' + reply.commentator.id}" target="_blank">
                            <img th:alt="${reply.commentator.nickname}"
                                 th:src="${reply.commentator.avatar}"
                                 style="width: 30px;height: 30px;border: 1px solid #ddd;border-radius: 50%;"
                                 class="img-fluid">
                        </a>
                    </div>
                    <div class="comment-content-box" style="padding-bottom: 10px;">
                        <p class="comment-content-box-title" style="margin-bottom: 0;">
                            <span class="text-muted">
                                <a th:text="${reply.commentator.nickname}"
                                   th:href="${'/user/' + reply.commentator.id}" target="_blank"></a>
                            </span>
                            <span th:if="${#objects.nullSafe(reply.respondent.id, false)}">
                                回复：<a th:href="${'/user/' + reply.respondent.id}"><span th:text="${reply.respondent.nickname}"></span></a>
                            </span>
                        </p>
                        <p th:text="${reply.content}" class="comment-content-box-content"></p>
                        <p class="comment-content-box-foot" style="margin-bottom: 0;">
                            <small th:text="${#dates.format(reply.createAt, 'yyyy-MM-dd HH:mm:ss')}" class="text-muted"></small>
                            <small th:data-target="${isLogin ? '#commentModal' : '#loginModal'}"
                                   data-toggle="modal"
                                   th:data-reply-id="${reply.id}"
                                   th:data-reply-nickname="${reply.commentator.nickname}"
                                   th:data-reply-content="${reply.content}"
                                   class="text-muted reply-comment"
                                   style="float: right;">
                                <i data-feather="message-circle" style="width: 14px;height: 14px;"></i> 回复
                            </small>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div th:if="${!#lists.isEmpty(comments)}">
        <div th:replace="include/page :: page(${pager})"></div>
    </div>
    <!-- 二级评论 Modal -->
    <div class="modal fade" id="commentModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="commentModalDropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalDropLabel">回复</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="repliedContent" class="comment-content-box-content"></p>
                    <div class="input-group">
                        <textarea
                                id="replyContent"
                                placeholder="请输入回复内容"
                                class="posts-comment-input-box-textarea"
                                style="width: 100%;height: 64px;border: 1px solid #f1f1f1;"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="replyBtn" data-reply-id="" type="button" class="btn btn-primary">回复</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

</html>