<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>论坛-Quinn</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/backgroud.css}">
<style>
    #maxLength {
        max-width: 500px;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出部分不显示 */
        text-overflow: ellipsis; /* 超出部分显示为... */
    }
</style>
</head>
<body>

<div th:replace="~{common/header::header(activeUrl='blog')}"></div>
<main role="main" class="container">
    <div class="row">
        <div class="col-md-9 blog-main">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <div th:fragment="s_table_refresh" th:id="id_s_table_refresh">
                <h6 class="border-bottom border-gray pb-2 mb-0">
                    论坛累计：
                    <span th:text="${pageParam.getTotal()}"></span>
                </h6>
                <div th:each="blog:${blogList}" class="media pt-3 border-bottom border-gray">
                    <!-- 头像 -->
                    <img th:src="${blog.getAvatar()}" style="border-radius: 5px " width="32" height="32">
                    <div class="media-body small pl-2">
                        <!-- 标题 -->
                        <a id="maxLength" th:href="@{'/blog/read/'+${blog.getBid()}}"
                           class="text-dark font-weight-bold text-decoration-none">
                            <span th:if="${blog.getSort() == 1}" class="badge badge-danger">置顶</span>
                            [[${blog.getTitle()}]]
                        </a>
                        <p class="float-right" th:text="${#dates.format(blog.getGmtUpdate(),'yyyy-MM-dd HH:mm:ss')}"></p>
                        <div class="small">
                            <!-- 作者 -->
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
                                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                </svg>
                                [[${blog.getUsername()}]]
                            </span>
                            <!-- 浏览量 -->
                            <span>
                                <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                                  <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                                </svg>
                                [[${blog.getViews()}]]
                            </span>
                            <!-- 收藏 -->
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                                </svg>
                                [[${blog.getStar()}]]
                            </span>
                        </div>
                    </div>
                </div>
                <!--分页-->
                <nav aria-label="Page navigation example" class="mt-4">
                    <ul class="pagination justify-content-center pagination-sm">
                        <li th:class="${pageParam.hasPrevious()==true?'page-item':'page-item disabled'}">
                            <a class="page-link" href="javascript:navChange(-1);" tabindex="">Previous</a>
                        </li>
                        <li class="page-item" th:if="${pageParam.hasPrevious()}">
                            <a class="page-link" href="javascript:navChange(-1);" th:text="${pageParam.getCurrent()-1}"></a>
                        </li>
                        <li class="page-item active">
                            <a id = "current" class="page-link" href="javascript:navChange(0);" th:text="${pageParam.getCurrent()}"></a>
                        </li>
                        <li class="page-item" th:if="${pageParam.hasNext()}">
                            <a class="page-link" href="javascript:navChange(1);" th:text="${pageParam.getCurrent()+1}"></a>
                        </li>
                        <li th:class="${pageParam.hasNext()==true?'page-item':'page-item disabled'}">
                            <a class="page-link" href="javascript:navChange(1);">Next</a>
                        </li>
                    </ul>
                </nav>
                </div>
            </div>

        </div>

        <aside class="col-md-3 blog-sidebar">

            <div class="my-3 rounded">
                <p class="mb-0">
                    <a th:href="@{/blog/write}" class="btn btn-primary btn-sm btn-block" style="color: white">写文章</a>
                </p>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <strong class="mb-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmarks-fill" viewBox="0 0 16 16">
                        <path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4z"/>
                        <path d="M4.268 1A2 2 0 0 1 6 0h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L13 13.768V2a1 1 0 0 0-1-1H4.268z"/>
                    </svg>
                    敲黑板
                </strong>
                <br/>
                <span>如果发的帖子水分过大，可能会被封禁账号，请酌情发帖评论！</span>
            </div>
            <div class="p-4 my-3 bg-white rounded">
                <h4 class="pb-1">推荐</h4>
                <ul class="list-unstyled small" th:each="topBlog:${topBlogList}">
                    <li>
                    <a class="text-dark text-decoration-none" th:href="@{'/blog/read/'+${topBlog.getBid()}}">
                        <span class="badge badge-dark">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-balloon-fill" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M8.48 10.901C11.211 10.227 13 7.837 13 5A5 5 0 0 0 3 5c0 2.837 1.789 5.227 4.52 5.901l-.244.487a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2.376 2.376 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.244-.487ZM4.352 3.356a4.004 4.004 0 0 1 3.15-2.325C7.774.997 8 1.224 8 1.5c0 .276-.226.496-.498.542-.95.162-1.749.78-2.173 1.617a.595.595 0 0 1-.52.341c-.346 0-.599-.329-.457-.644Z"/>
                            </svg>
                            [[${topBlog.getViews()}]]</span>
                        [[${topBlog.getTitle()}]]
                    </a></li>
                </ul>
            </div>
        </aside>

    </div>

</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top badge badge-light">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/live/js/addlive2d.js}"></script>
<script type="text/javascript">
    function navChange(page){
        var current = $('#current').text();
        var pageNum = parseInt(current) + page;
        $.ajax({
            url: "/blog",
            async: false,
            type: "post",
            data: {"pageNum": pageNum, "limit": 10},
            success: function (data) {
                $('#id_s_table_refresh').html(data);
            }
        });
    }
</script>
</body>
</html>
