<!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/level.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="@{/level/edit/}">
                    Создать уровень
                </a>
            </h2>
        </div>
        <div>
            <h1 style="text-align: center; font-family: courier, monospace; background: #FF652F; border-radius: 10px">
                Список существующих уровней:
            </h1>
        </div>
        <div th:each="level, iterator: ${levels}">
            <div class="level-card">
                <p class="level-attribute" th:text="'Нация: ' + ${level.id}"/>
                <p class="level-attribute" th:text="'Уровень: ' + ${level.level}"/>
                <div class='level-button-group'>
                    <form th:action="@{/level/edit/{id}(id=${level.id})}" method="get">
                        <button class="level-button" type="submit"
                                th:id="'edit-' + ${level.id}"
                        >
                            Редактировать
                        </button>
                    </form>
                    <form th:action="@{/level/delete/{id}(id=${level.id})}" method="post">
                        <button th:id="'remove-' + ${level.id}" class="level-button" type="submit">
                            Удалить
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<th:block layout:fragment="scripts">
</th:block>
</html>