<!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/nation.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="@{/nation/edit/}">
                Создать нацию
            </a>
        </h2>
    </div>
    <div>
        <h1 style="text-align: center; font-family: courier, monospace; background: #FF652F; border-radius: 10px">
            Список существующих наций:
        </h1>
    </div>
    <div th:each="nation, iterator: ${nations}">
        <div class="nation-card">
            <p class="nation-attribute" th:text="'Номер: ' + ${nation.id}"/>
            <p class="nation-attribute" th:text="'Нация: ' + ${nation.nation}"/>
            <div class='nation-button-group'>
                <form th:action="@{/nation/edit/{id}(id=${nation.id})}" method="get">
                    <button class="nation-button" type="submit"
                            th:id="'edit-' + ${nation.id}"
                    >
                        Редактировать
                    </button>
                </form>
                <form th:action="@{/nation/delete/{id}(id=${nation.id})}" method="post">
                    <button th:id="'remove-' + ${nation.id}" class="nation-button" type="submit">
                        Удалить
                    </button>
                </form>
                <form th:action="@{/nation/editTank/{id}(id=${nation.id})}" method="get">
                    <button th:id="'edit-tank-' + ${nation.id}" class="nation-button" type="submit">
                        Список танков
                    </button>
                </form>
            </div>
        </div>
    </div>
    <!-- <div class="table-responsive">
        <table class="table">
            <tbody>
                <tr th:each="nation, iterator: ${nations}">
                    <th scope="row" th:text="${iterator.index} + 1"/>
                    <td th:text="${nation.id}"/>
                    <td th:text="${nation.nation}" style="width: 60%"/>
                    <td style="width: 10%">
                        <div class="btn-group" role="group" aria-label="Basic example">
                            <a class="btn btn-warning button-fixed button-sm"
                               th:href="@{/nation/edit/{id}(id=${nation.id})}">
                                <i class="fa fa-pencil" aria-hidden="true"></i> Изменить
                            </a>
                            <button type="button" class="btn btn-danger button-fixed button-sm"
                                    th:attr="onclick=|confirm('Удалить нацию?') && document.getElementById('remove-${nation.id}').click()|">
                                <i class="fa fa-trash" aria-hidden="true"></i> Удалить
                            </button>
                        </div>
                        <form th:action="@{/nation/delete/{id}(id=${nation.id})}" method="post">
                            <button th:id="'remove-' + ${nation.id}" type="submit" style="display: none">
                                Удалить
                            </button>
                        </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </div> -->
</div>
</body>
<th:block layout:fragment="scripts">
</th:block>
</html>