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

<div th:fragment="posts_info(posts, postsType)" class="posts-box">
    <div id="postsTitle"
         th:data-id="${posts.id}"
         th:text="${posts.title}"
         style="font-size: 30px;margin-bottom: 20px;font-weight: 600;">标题</div>
    <div style="margin-bottom: 20px;">
        <small class="text-muted" style="margin-right: 10px;">
            <img th:src="${posts.authorAvatar}" style="width: 12px;height: 12px;" />&nbsp;
            <a th:href="${'/user/' + posts.authorId}" th:text="${posts.authorName}">作者</a>
        </small>
        <small class="text-muted" style="margin-right: 10px;">
            <i data-feather="clock" style="width: 14px;height: 14px;"></i>
            <span th:text="${posts.createAt}"></span>
        </small>
        <small class="text-muted" style="margin-right: 10px;">
            <i data-feather="eye" style="width: 14px;height: 14px;"></i>
            <span th:text="${posts.views}">520</span>
        </small>
        <small class="text-muted">
            <i data-feather="message-square" style="width: 14px;height: 14px;"></i>
            <span th:text="${posts.comments}">521</span>
        </small>
        <span th:if="${isLogin && posts.authorId == loginUser.id}" style="float: right;margin-left: 20px;">
            <a th:href="${postsType + '/editor/' + posts.id}">
                <i data-feather="edit" style="width: 14px;height: 14px;"></i> 编辑
            </a>
        </span>
        <span th:if="${isLogin && posts.authorId == loginUser.id}" style="float: right;">
            <a href="javascript:;" data-target="#deleteModal"
               data-toggle="modal">
                <i data-feather="x" style="width: 14px;height: 14px;"></i> 删除
            </a>
        </span>
    </div>
    <div th:if="${!#lists.isEmpty(posts.tags)}" style="margin-bottom: 20px;">
        <a th:each="tag : ${posts.tags}"
           th:text="${tag.name}"
           th:href="${'/tag/' + tag.name}"
           target="_blank"
           href="#" style="padding: 2px 10px;border: 1px solid #6c757d;border-radius: 32px;margin-right: 10px;font-size: 10px;"></a>
    </div>
    <div th:utext="${posts.content}" class="article-content">内容</div>
    <div style="margin-top: 20px;font-size: 14px;color: #999;">
        最后一次编辑于 <span th:text="${posts.updateAt}">2020年10月01日</span>
        <span style="float: right;">
            <a href="javascript:;" id="postsApprovalBtn"
               th:title="${postsType == '/article' ? '点赞' : '关注'}"
               th:data-target="${isLogin ? '' : '#loginModal'}"
               th:data-toggle="${isLogin ? '' : 'modal'}"
               th:class="${hasApproval ? 'custom-font-color' : ''}">
                <i th:data-feather="${postsType == '/article' ? 'thumbs-up' : 'heart'}"
                   style="width: 14px;height: 14px;"></i>
                <span id="postsApprovalNumber" th:text="${posts.approvals}"></span>
            </a>
        </span>
    </div>
    <!-- 二级评论 Modal -->
    <div class="modal fade" id="deleteModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="deleteModalDropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalDropLabel">删除提醒</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 th:text="${'确定删除《' + posts.title + '》吗'}">确定删除吗</p>
                </div>
                <div class="modal-footer">
                    <button id="deleteBtn" type="button" class="btn btn-primary">确定</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

</html>