<!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="@{/hover/component.css}">
    <link rel="stylesheet" th:href="@{/css/backgroud.css}">
    <style>
        #table-title tr th{
            border: none;
        }
        #titleListA a{
            max-width: 500px;
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 超出部分不显示 */
            text-overflow: ellipsis; /* 超出部分显示为... */
        }
    </style>
</head>
<body>

<div th:replace="~{common/header::header(activeUrl='user')}"></div>

<main role="main" class="container">
    <div class="row" >
        <div class="col-md-9">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <h6 class="border-bottom border-gray pb-2 mb-0">
                    <input id="navRefreshType" type="hidden" value="BLOG"/>
                    <nav class="nav nav-pills">
                        <a class="nav-link active"
                           th:href="@{'/user'}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
                                <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
                            </svg>
                            论坛
                        </a>
                        <a class="nav-link"
                           th:href="@{'/user/star'}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postcard-heart-fill" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2Zm6 2.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7Zm3.5.878c1.482-1.42 4.795 1.392 0 4.622-4.795-3.23-1.482-6.043 0-4.622ZM2 5.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z"/>
                            </svg>
                            收藏
                        </a>
                        <a class="nav-link"
                           th:href="@{'/user/comment'}">
                            <svg class="bi bi-chat-dots" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
                                <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                            </svg>
                            评论
                        </a>
                    </nav>
                </h6>
                <div th:fragment="user_table_refresh" th:id="id_user_table_refresh" >
                    <div th:each="blog:${blogList}" class="media text-muted pt-1">
                        <p class="media-body pb-1 mb-0 small border-bottom border-gray" style="margin-left: 5px">
                            <!-- 标题 -->
                            <a th:text="${blog.getTitle()}"
                               th:href="@{'/blog/read/'+${blog.getBid()}}"
                               class="text-dark font-weight-bold text-decoration-none d-block">
                            </a>
                            <!-- 浏览量 -->
                            <span class="badge badge-success">
                                <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()}]]
                                <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>
                            <!-- 时间 -->
                            <span th:text="${#dates.format(blog.getGmtUpdate(),'yyyy-MM-dd HH:mm:ss')}"
                                  class="float-right">
                            </span>
                        </p>
                    </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" th:fragment="userShowPanel">
            <input type="hidden" id="userId" name="userId" th:value="${session.loginUser.getUid()}">
<!--            <div id="myModal" class="modal" tabindex="-1">-->
<!--                <div class="modal-dialog">-->
<!--                    <div class="modal-content">-->
<!--                        <div class="modal-header">-->
<!--                            <h5 class="modal-title">Modal title</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>Modal body text goes here.</p>-->
<!--                        </div>-->
<!--                        <div class="modal-footer">-->
<!--                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
<!--                            <button type="button" class="btn btn-primary">Save changes</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="p-4 my-3 bg-white rounded">
                <div class="mb-0">
                    <div class="text-center grid" onclick="changeImg()" data-toggle="modal" data-target="#myModal">
                        <figure class="effect-sadie">
                            <img th:src="${session.loginUser.getAvatar()}" style="border-radius: 50%" width="128" height="128">
                            <figcaption>
                                <p>自定义头像</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="text-center">
                        <span th:text="${session.loginUser.getUsername()}"></span>
                        <br>
                        <small>
                            <span th:if="${session.loginUser.getRole()=='KOBE'}" class="badge badge-primary">超级管理员</span>
                            <span th:if="${session.loginUser.getRole()!='KOBE'}" th:class="${session.loginUser.getRole()=='VIP'?'badge badge-warning':'badge badge-success'}"
                                  th:text="${session.loginUser.getRole()=='VIP'?'VIP会员':'普通用户'}">
                            </span>
                        </small>
                        <p>
                        <table class="table">
                            <thead id="table-title">
                                <tr>
                                    <th scope="col">论坛</th>
                                    <th scope="col">收藏</th>
                                    <th scope="col">评论</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td th:text="${blogCount}">0</td>
                                    <td th:text="${starCount}">0</td>
                                    <td th:text="${commentCount}">0</td>
                                </tr>
                            </tbody>
                        </table>
                        </p>
                    </div>
                </div>
            </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 th:src="@{/js/userRefresh.js}"></script>
<script th:src="@{/layer/mobile/layer.js}"></script>
</body>
</html>
