<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{default}">
<head>
</head>
<body>
    <div class="container" id="root-div" layout:fragment="content">
        <div class="content">
            <h1>Creator</h1>
            <form id="form">
                <div class="d-flex mt-3">
                    <div class="d-grid col-sm-2">
                        <a class="btn btn-success"
                           th:href="@{/creatorAction/create/1}">
                            <i class="fa-solid fa-plus"></i> Добавить
                        </a>
                    </div>
                </div>
            </form>
            <div class="row table-responsive text-white">
                <div th:each="manga, iterator: ${creator?.mangas}" class="d-flex flex-row flex-wrap  flex-grow-1 align-items-center mt-3">
                    <div class="me-3">
                        <a th:href="@{/mangapage/{id}(id=${manga.id})}"><img th:src="${manga.image}" th:alt="${manga.mangaName}" class="slideshow"/></a>
                    </div>
                    <div>
                        <div class="pt-3 description d-flex flex-column justify-content-start mb-3 fs-6 fw-bold">
                            <h4>Название манги: <a class="text-white fs-5 unic_class fw-bold pt-3 mb-3" th:href="@{/mangapage/{id}(id=${manga.id})}" th:text="${manga.mangaName}"></a></h4>
                            <h4>
                                Количество глав:
                                <span th:text="${manga.chapterCount}"/>
                            </h4>
                        </div>
                        <div>
                            <a class="btn btn-primary" th:href="@{/creatorAction/edit/{id}(id=${manga.id})}">
                                <i class="fas fa-edit"></i>
                            </a>
                            </button>
                            <button class="delete bg-danger p-2 px-2 mx-2 border border-0 rounded text-white fw-bold" type="button">Удалить</button>

                                <button type="button" class="delete bg-danger p-2 px-2 mx-2 border border-0 rounded text-white fw-bold"
                                        th:attr="onclick=|confirm('Удалить запись?') && document.getElementById('remove-${manga.id}').click()|">
                                    <i class="fa fa-trash" aria-hidden="true"></i> Удалить
                                </button>
                            <form th:action="@{/creatorAction/delete/{id}(id=${manga.id})}" method="post">
                                <button th:id="'remove-' + ${manga.id}" type="submit" style="display: none">
                                    Удалить
                                </button>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--<th:block layout:fragment="scripts">
    <script>
        let buttonAdd = document.getElementById("buttonAdd");
        let selectCreatorId = document.getElementById("creatorId");
        const host = "http://localhost:8080";

        buttonAdd.addEventListener('click', function (event){
            event.preventDefault();
            create(selectCreatorId.value);
        });
        const create = async function (creatorId) {
            const requestParams = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                }
            };
            console.log(creatorId);

            const response = await fetch(host + `/creatorAction?creatorId=${creatorId}`, requestParams);
            return await response.json();
        }
    </script>
</th:block>-->
</html>