<!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/tank.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-tank-button text-dark" type="button"
               th:href="@{/tank/edit/}">
                Создать танк
            </a>
        </h2>
        <form id="filterForm" th:action="@{/tank/filteredList}" th:object="${sortDTO}" method="get">
            <button class="tank-button" type="submit"
                    th:id="filterStart"
            >
                Фильтрация
            </button>
            <select id="nation" class="form-select" required="true" th:field="*{nation}">
                <option th:each="value: ${nations}"
                        th:value="${value.nation}"
                        th:text="${value.nation}">
                </option>
            </select>
            <select id="firstLevel" class="form-select" required="true" th:field="*{firstLevel}">
                <option th:each="value: ${levels}"
                        th:value="${value.level}"
                        th:text="${value.level}">
                </option>
            </select>
            <select id="secondLevel" class="form-select" required="true" th:field="*{secondLevel}">
                <option th:each="value: ${levels}"
                        th:value="${value.level}"
                        th:text="${value.level}">
                </option>
            </select>
        </form>
    </div>
    <div>
        <h1 style="text-align: center; font-family: courier, monospace; background: #FF652F; border-radius: 10px">
            Список существующих танков:
        </h1>
    </div>
    <div th:each="tank, iterator: ${tanks}">
        <div class="tank-card">
            <p class="tank-attribute" th:text="'Номер: ' + ${tank.id}"/>
            <p class="tank-attribute" th:text="'Название: ' + ${tank.name}"/>
            <p class="tank-attribute" th:text="'Нация: ' + ${tank.nation.getNation()}"/>
            <p class="tank-attribute" th:text="'Уровень: ' + ${tank.level.getLevel()}"/>
            <p class="tank-attribute" th:text="'Стоимость: ' + ${tank.cost}"/>
            <div class='tank-button-group'>
                <form th:action="@{/tank/edit/{id}(id=${tank.id})}" method="get">
                    <button class="tank-button" type="submit"
                            th:id="'edit-' + ${tank.id}"
                    >
                        Редактировать
                    </button>
                </form>
                <form th:action="@{/tank/delete/{id}(id=${tank.id})}" method="post">
                    <button th:id="'remove-' + ${tank.id}" class="tank-button" type="submit">
                        Удалить
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
        $(document).ready(function() {
            $('#filterStart').on('click', function() {
                $.ajax({
                url: "http://localhost:8080/api/tank/filteredList/?nation='
                    +escape(document.forms['filterForm'].elements['nation'].value)&
                    +escape(document.forms['filterForm'].elements['firstLevel'].value)&
                    +escape(document.forms['filterForm'].elements['secondLevel'].value)"
                }).then(function (data) {

                });
            });
        });
    </script>
</html>

<!--

-->

<!--th:action="@{/tank/filteredList/{nation}(nation=${document.elements['nation'].value}){firstLevel}(firstLevel=${document.elements['firstLevel'].value}){secondLevel}(secondLevel=${document.elements['secondLevel'].value})}"-->