<!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 mb-3">
                <div class="d-flex mt-3">
                    <div class="d-grid col-sm-2">
                        <a class="btn btn-success"
                           th:href="@{/creatorAction/create/{id}(id=${creatorId})}">
                            <i class="fa-solid fa-plus"></i> Добавить
                        </a>
                    </div>
                </div>
            </form>
            <div th:text="${errors}" class="margin-bottom alert-danger"></div>
            <form action="#" th:action="@{/creatorAction}" method="get">
                <div class="col-sm-2 mb-3">
                    <label for="creatorId" class="form-label">Создатель</label>
                    <select th:name="creatorId" id="creatorId" class="form-select">
                        <option th:each="creator: ${creators}" th:value="${creator.id}" th:text="${creator.creatorName}"/>
                    </select>
                </div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-primary button-fixed">
                        <i class="fa-solid fa-plus">Обновить</i>
                    </button>
                </div>
            </form>
            <div class="row table-responsive text-white">
                <div th:each="manga, iterator: ${currentCreator?.mangas}" class="d-flex flex-row flex-wrap  flex-grow-1 align-items-center mt-3">
                    <div class="me-3">
                        <a th:href="@{/manga/{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 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>
</html>