<!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='source')}"></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">
                <h6 class="border-bottom border-gray pb-2 mb-0">
                    累计资源总量：
                    <span th:text="${pageParam.getAllTotal()}"></span>
                </h6>
                <div th:fragment="s_table_refresh" th:id="id_s_table_refresh">
                    <div th:each="source:${sourceList}" class="media pt-2 border-bottom border-gray">
                        <div class="media-body small pl-2">
                            <!-- 标题 -->
                            <a th:href="@{'/source/view/'+${source.getSid()}}"
                               class="text-dark font-weight-bold text-decoration-none">
                                <span th:if="${source.getDownRecord() > 20}" class="badge badge-danger">精</span>
                                [[${source.getSourceName()}]]
                            </a>
                            <!-- 收藏 -->
                            <span class="badge badge-primary">
                                [[${source.getCategoryName()}]]
                            </span>
                            <p class="float-right" th:text="${#dates.format(source.getGmtUpdate(),'yyyy-MM-dd HH:mm:ss')}"></p>
                            <div class="small">
                                <span id="maxLength" th:text="${source.getDetail()}"
                                   class="d-block">
                                </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="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-3 my-3 bg-white rounded">
                <form action="javascript:navChange(0);" method="post">
                    <div class="form-row">
                        <div class="col-md-12 mt-2">
                            <label class="sr-only" for="name">KEYWORD</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">名称</div>
                                </div>
                                <input type="text" class="form-control" id="name" name="name" placeholder="请输入关键字"/>
                            </div>
                        </div>
                        <div class="col-md-12 mt-2">
                            <label class="sr-only" for="category">SOURCE-TYPE</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">类别</div>
                                </div>
                                <select id="category" name="category" class="form-control custom-select">
                                    <option th:value=-1 th:text="请选择"></option>
                                    <option th:each="category:${categoryList}" th:value="${category.getId()}" th:text="${category.getCategory()}"></option>
                                </select>
                            </div>

                        </div>
                        <div class="col-md-12 mt-2">
                            <button type="submit" class="btn btn-primary btn-block">查询</button>
                        </div>
                        <div class="col-md-12 mt-2">
                            <button onclick="clearAll(this)" type="submit" class="btn btn-primary btn-block">清空</button>
                        </div>
                    </div>
                </form>
            </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 name = $('#name').val();
        var category = $('#category').val();
		var current = $('#current').text();
		var pageNum = parseInt(current) + page;
		$.ajax({
            url: "/source",
            async: false,
            type: "post",
            data: {"name": name, "category": category, "pageNum": pageNum, "limit": 10},
            success: function (data) {
                $('#id_s_table_refresh').html(data);
            }
        });
    }
    function clearAll(btn){
        $('#name').val('');
        $('#category').val(-1);
        this.submit();
    }
</script>
</body>
</html>
