<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{default}">
<head>
    <script type="text/javascript" src="/webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="container" id="root-div" layout:fragment="content">
        <div class="content">
            <h1>Reader</h1>
            <div class="d-flex mt-3">
                <div class="d-grid col-sm-2">
                    <div th:text="${errors}" class="margin-bottom alert-danger"></div>
                    <form action="#" th:action="@{/readerAction/manga/{id}(id=${readerId})}" method="post">
                        <div class="mb-3">
                            <label for="mangaId" class="form-label">Манга</label>
                            <select th:name="mangaId" id="mangaId" class="form-select">
                                <option th:each="manga: ${mangaList}" th:value="${manga.id}" th:text="${manga.mangaName}"/>
                            </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>
            </div>
            <div th:text="${errors}" class="margin-bottom alert-danger"></div>
            <form action="#" th:action="@{/readerAction}" method="get">
                <div class="col-sm-2 mb-3">
                    <label for="readerId" class="form-label">Reader</label>
                    <select id="readerId" th:name="readerId" class="form-select">
                        <option value="" disabled selected>Select your option</option>
                        <option th:each="value: ${readers}" th:selected="${readerId} == ${value}" th:text="${value.readerName}" th:value="${value.Id}">
                        </option>
                    </select>
                </div>
            </form>
            <div class="row table-responsive text-white">
                <div th:each="manga: ${reader?.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>
                            </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="@{'/readerAction/' + ${readerId} + '/removeManga/' + ${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>
        $(document).ready(function() {
            $('#readerId').on('change', function() {
                this.form.submit();
            });
        });
    </script>
</th:block>
</html>