<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>[[#{notifications}]] - [[${configs.base.siteName}]]</title>
    <meta name="keywords" th:content="${configs.base.siteKeywords}">
    <meta name="description" th:content="${configs.base.siteDescription}">
    <link th:replace="|${theme}/fragment/common| :: css">
    <link th:replace="|${theme}/fragment/common| :: css_simplemde">
    <script th:replace="|${theme}/fragment/common| :: js"></script>
</head>
<body>
<div th:replace="|${theme}/fragment/show_error| :: show_error"></div>
<div th:replace="|${theme}/fragment/common| :: browser_upgrade"></div>
<header th:replace="|${theme}/fragment/common| :: header"></header>
<div class="container mt-2">
    <div class="row">
        <div class="col-sm-9">
            <div class="clearfix py-2 border-bottom">
                <h3 class="float-left" th:text="#{notifications}"></h3>
            </div>
            <div th:jspbb-notifications="beans" th:with="userId=${user.id},pageSize=15,pageable=true">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item clearfix px-0" th:each="bean:${beans}" th:object="${bean}" th:with="notificationType='notification.type.'+${bean.type}">
                        <div class="float-left">[<span th:text="#{${notificationType}}"></span>] <a th:href="@{${bean.url}}"><span th:text="${bean.body}"></span></a></div>
                        <div class="float-right small"><a href="javascript:" onclick="deleteNotifications(this)" th:data-id="${bean.id}" th:text="#{delete}">删除</a></div>
                    </li>
                </ul>
                <nav class="mt-2" th:if="${beans.pages gt 1}" th:insert="|${theme}/fragment/pagination| :: pagination(${beans})"></nav>
                <script th:replace="|${theme}/fragment/pagination| :: adjust_page"></script>
                <div class="mt-2" th:if="${#lists.isEmpty(beans)}" th:insert="|${theme}/fragment/pagination| :: no_data"></div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    function deleteNotifications(element) {
        request(/*[[@{/api/notifications(_method=DELETE)}]]*/'', {method: 'POST', body: [$(element).data('id')]}).then(function (data) {
            if (data === null) return;
            showSuccess();
            location.reload();
        });
    }
</script>
<footer th:replace="|${theme}/fragment/common| :: footer"></footer>
<script th:replace="|${theme}/fragment/common| :: js_simplemde"></script>
<script th:replace="|${theme}/fragment/common| :: access_log"></script>
</body>
</html>
