<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>[[#{messages}]] - [[${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="#{messages}">Messages</h3>
                <button class="float-right btn btn-primary" onclick="$('#messageModal').modal('show');$('#toUserId-selectized').focus();" th:text="#{message.newMessage}">New Message</button>
            </div>
            <div th:jspbb-messages-group="beans" th:with="userId=${user.id},pageSize=15, pageable=true">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item px-0 d-flex" th:each="bean:${beans}" th:object="${bean}">
                        <div><img src="" th:src="*{fromUser.ext.pictureUrlSmall}" class="rounded-circle" style="width:35px;height:35px;"></div>
                        <div class="ml-2 flex-grow-1">
                            <div><strong th:text="*{contactUser.username}"> </strong> <span class="badge badge-danger" th:if="*{unreadCount>0}" th:text="*{unreadCount}"> </span></div>
                            <div th:text="*{detail.text}"></div>
                            <div class="clearfix small mt-2">
                                <div class="float-left">
                                    <span class="text-muted" th:text="*{#temporals.format(date, 'yyyy-MM-dd HH:mm')}"> </span>
                                    <a th:href="@{/messages/contact/{contactUserId}(contactUserId=*{contactUser.id})}" class="ml-1" th:text="#{message.totalMessage(*{total})}"> </a>
                                </div>
                                <div class="float-right"><a href="javascript:" onclick="deleteMessageContact(this);" th:data-from-user-id="*{fromUserId}" th:text="#{delete}"> </a></div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="mt-2" th:if="${beans.pages gt 1}" th:insert="|${theme}/fragment/pagination| :: pagination(${beans})"></div>
                <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>
<div id="messageModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <form class="modal-content" id="messageForm" th:action="@{/api/messages}" method="POST">
            <div class="modal-header">
                <h5 class="modal-title" th:text="#{message.newMessage}">New Message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="toUserId" th:text="#{message.to}"> </label>
                    <input type="text" class="form-control" id="toUserId" name="toUserId" required>
                </div>
                <div class="form-group">
                    <label for="markdown" th:text="#{message.content}"> </label>
                    <textarea class="form-control" id="markdown" name="markdown" rows="5" autocomplete="off" onkeydown="if(event.ctrlKey && event.keyCode === 13){$(this.form).submit();return false;}"> </textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{cancel}">Cancel</button>
                <button type="submit" class="btn btn-primary" th:text="#{send}">Send</button>
            </div>
        </form>
    </div>
</div>
<footer th:replace="|${theme}/fragment/common| :: footer"></footer>
<script th:replace="|${theme}/fragment/common| :: js_simplemde"></script>
<script th:inline="javascript">
    function deleteMessageContact(element) {
        $.confirm({
            title: '', content: /*[[#{confirmDelete}]]*/'', buttons: {
                confirm: {
                    text: /*[[#{ok}]]*/'', btnClass: 'btn-blue', keys: ['enter'], action: function () {
                        request(/*[[@{/api/messages/contact(_method=DELETE}]]*/'', {method: 'POST', body: $(element).data('from-user-id')}).then(function (data) {
                            if (data === null) return;
                            showSuccess();
                            location.reload();
                        });
                    }
                },
                cancel: {text: /*[[#{cancel}]]*/''}
            }
        });
    }

    $(function () {
        $("#toUserId").selectize({
            maxItems: 1,
            persist: false,
            create: false,
            valueField: 'id',
            labelField: 'username',
            searchField: 'username',
            load: function (query, callback) {
                if (!query.length) return callback();
                var url = /*[[@{/api/messages/receiver_suggest}]]*/'';
                request(url + '?' + Qs.stringify({username: query, limit: 20}, {indices: false})).then(function (data) {
                    if (data !== null) callback(data); else callback();
                });
            }
        });
        $("#messageForm").validate({
            submitHandler: function (form) {
                request(form.action, {method: form.method, body: $(form).serializeJSON()}).then(function (data) {
                    if (data === null) return;
                    showSuccess();
                    location.reload();
                });
            }
        });
    });
</script>
<script th:replace="|${theme}/fragment/common| :: access_log"></script>
</body>
</html>
