<!-- Sort orders -->
<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<span th:if="${userListEmpty == false}">

<div class="products_bar_side d-flex flex-row align-items-end justify-content-end ml-lg-auto">
    <div class="products_dropdown product_dropdown_sorting">
        <div class="isotope_sorting_text"><span>Sort</span><i
                class="fa fa-caret-down" aria-hidden="true"></i></div>
        <ul>
            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'ID-desc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Decreasing by ID'"
                   th:style="${sort == 'ID-desc'} ? 'color:#1f5b70'">
                </a>
            </li>

            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'ID-asc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Increasing by ID'"
                   th:style="${sort == 'ID-asc'} ? 'color:#1f5b70'">
                </a>
            </li>


            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'Name-asc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Name (A - Z)'"
                   th:style="${sort == 'Name-asc'} ? 'color:#1f5b70'">
                </a>
            </li>

            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'Name-desc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Name (Z - A)'"
                   th:style="${sort == 'Name-desc'} ? 'color:#1f5b70'">
                </a>
            </li>

            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'Surname-asc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Surname (A - Z)'"
                   th:style="${sort == 'Surname-asc'} ? 'color:#1f5b70'">
                </a>
            </li>

            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'Surname-desc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Surname (Z - A)'"
                   th:style="${sort == 'Surname-desc'} ? 'color:#1f5b70'">
                </a>
            </li>

            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'Email-asc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Email (A - Z)'"
                   th:style="${sort == 'Email-asc'} ? 'color:#1f5b70'">
                </a>
            </li>

            <li class="item_sorting_btn">
                <a th:href="@{/admin-panel#user(sort=${'Email-desc'}, size=${userPage.size}, page=${1})}"
                   th:text="'Email (Z - A)'"
                   th:style="${sort == 'Email-desc'} ? 'color:#1f5b70'">
                </a>
            </li>


        </ul>
    </div>
</div>
</span>

<br>

<span th:if="${userPage.totalPages > 0}">

    <div class="row order - row ">

        <div class="col-lg-3 col-md-3 col-xs-6">
            <div class="profile-order-title">ID</div>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-6">
            <div class="profile-order-title">Name</div>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-6">
            <div class="profile-order-title">Surname</div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6">
            <div class="profile-order-title">E-Mail</div>
        </div>
    </div>
    <br>

    <div class="container">
        <div class="orderDetailBox">

            <tr th:each="user: ${userPage.content}">

                <!-- User -->
                <div class="product">
                    <a th:href="@{'/user-details/' + ${user.userId}}">
                        <div class="product_content">
                            <div class="row order - row collapsible">
                                <div class="col-lg-3 col-md-3 col-xs-6">
                                    <div class="profile-order-text vertical_center">
                                        <td th:text="${user.userId}"></td>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-xs-6">
                                    <div class="profile-order-text vertical_center">
                                        <td th:text="${user.name}"></td>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-3 col-xs-6">
                                    <div class="profile-order-text vertical_center">
                                        <td th:text="${user.surname}"></td>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-3 col-xs-6">
                                    <div class="profile-order-text vertical_center">
                                        <td th:text="${user.email}"></td>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

            </tr>
        </div>
    </div>

    <div class="row page_nav_row">
    <div class="col">
        <div class="page_nav">
            <ul class="d-flex flex-row align-items-start justify-content-center">

                <!-- Previous button -->
                    <li th:style="${currentPage == 1} ? 'display:none'">
                        <a th:href="@{/admin-panel#user(sort=${sort},size=${userPage.size}, page=${currentPage - 1})}"
                           aria-label="Previous" title="Previous Page" rel="tooltip">
                           <i class="pagination_arrow fa fa-angle-left"></i>
                        </a>
                    </li>

                <!-- First page -->
                    <li th:if="${userPage.totalPages > 0}"
                        th:class="${currentPage == 1} ? 'active'">
                        <a th:href="@{/admin-panel#user(sort=${sort},size=${userPage.size}, page=${1})}"
                           th:title="${'Page '+ 1}"
                           th:text="${1}" style="color: #fbaa1d;">
                        </a>
                    </li>

                    <li th:if="${currentPage - 3 > 1}" class="pagination_dots">...</li>

                <!-- Pages -->
                     <li th:if="${userPage.totalPages > 2}"
                         th:each="i : ${#numbers.sequence(currentPage - 2 > 1 ? currentPage - 2 : 2
                                        , userPage.totalPages > 2 + currentPage ? currentPage + 2 : userPage.totalPages - 1, 1)}"
                         th:class="${currentPage == i} ? 'active'">
                        <a th:href="@{/admin-panel#user(sort=${sort},size=${userPage.size}, page=${i})}"
                           th:text="${i}" th:title="${'Page '+ i}" style="color: #fbaa1d;"></a>
                    </li>

                    <li th:if="${currentPage + 3 < userPage.totalPages}" class="pagination_dots">...</li>
                <!-- Last page -->
                    <li th:if="${userPage.totalPages > 1}"
                        th:class="${currentPage == userPage.totalPages} ? 'active'">
                        <a th:href="@{/admin-panel#user(sort=${sort},size=${userPage.size}, page=${userPage.totalPages})}"
                           th:text="${userPage.totalPages}" style="color: #fbaa1d;"
                           th:title="${'Page '+ userPage.totalPages}">
                        </a>
                    </li>

                <!-- Next button -->
                    <li th:style="${currentPage == userPage.totalPages} ? 'display:none'">
                        <a th:href="@{/admin-panel#user(sort=${sort},size=${userPage.size}, page=${currentPage + 1})}"
                           aria-label="Next" title="Next Page" rel="tooltip">
                            <i class="pagination_arrow fa fa-angle-right"></i>
                        </a>
                    </li>

            </ul>
        </div>
    </div>
</div>

</span>

<!-- No user -->
<span th:unless="${userPage.totalPages >0}">
    <div class="warning-text">There are no users.</div>
    <div style="text-align: center; padding-bottom: 30px">
        <img th:src="@{/static/images/no_data.png}">
    </div>
</span>


<script>
    $('#data-isotope-option').click(function (event) {


        var ret = {
            subject: subject,
            messageContent: messageContent,
            submit: submit
        };

        if (validation_check(["subject_area", "textarea"])) {
            event.preventDefault();
            $.post("/admin-panel/message", ret, function (data) {
                iziToast.show({
                    title: 'Success',
                    message: 'Message sent successfully.',
                    position: 'topRight',
                    color: 'green'
                });
                $("#message_form")[0].reset();
            }).fail(function (data) {
                iziToast.show({
                    title: 'Fail',
                    message: data.responseText,
                    position: 'topRight',
                    color: 'red'
                });
            })
        }
    });

    function validation_check(arr) {
        for (var i = 0; i < arr.length; i++) {
            if (!document.getElementById(arr[i]).checkValidity()) {
                return false;
            }
        }
        return true;
    }
</script>
</html>