<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{default}">
<head>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/client.css"/>
    <script type="text/javascript" src="/webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div layout:fragment="content">
    <div class="Group_create_level">
        <h1>Генератор клиентов</h1>
        <h2>
            <a class="add-level-button text-dark" type="button"
               th:href="@{/clients/edit/}"
            >
                Создать клиента
            </a>
        </h2>
    </div>
    <div>
        <h1 style="text-align: center; font-family: courier, monospace; background: #FF652F; border-radius: 10px">
            Список существующих клиентов:
        </h1>
    </div>
    <div th:each="user, iterator: ${users}">
        <div class="client-card">
            <p class="client-attribute" th:text="'Номер: ' + ${user.id}"/>
            <p class="client-attribute" th:text="'Никнейм (логин): ' + ${user.login}"/>
            <p class="client-attribute" th:text="'Баланс: ' + ${user.balance}"/>
            <div class='client-button-group'>
                <form th:action="@{/clients/edit/{id}(id=${user.id})}" method="get">
                    <button class="client-button" type="submit"
                            th:id="'edit-' + ${user.id}"
                    >
                        Редактировать
                    </button>
                </form>
                <form th:action="@{/clients/delete/{id}(id=${user.id})}" method="post">
                    <button th:id="'remove-' + ${user.id}" class="client-button" type="submit"
                    >
                        Удалить
                    </button>
                </form>
                <form th:action="@{/clients/tanksOfClient/{id}(id=${user.id})}" method="get">
                    <button th:id="'list-tank-' + ${user.id}" class="client-button" type="submit"
                    >
                        Список танков
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div th:if="${totalPages > 0}" class="pagination">
        <span style="float: left; padding: 5px 5px;">Страницы:</span>
        <a th:each="page : ${pages}"
           th:href="@{/clients(page=${page}, size=${users.size})}"
           th:text="${page}"
           th:class="${page == users.number + 1} ? active">
        </a>
    </div>
</div>
</body>
<th:block layout:fragment="scripts">
</th:block>
</html>