<!DOCTYPE html>
<html lang="ru" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">

<head>
    <title>Панель администратора (книги)</title>
</head>

<body th:with="bodyClass='bg-white', mainClass='my-0'">
    <main layout:fragment="content">
        <div class="row justify-content-center">
            <form class="col-lg-8 col-xl-7 col-xxl-6" action="#" th:action="@{/admin/book/edit/{id}(id=${book.id}, page=${page})}" 
                th:object="${book}" method="post" enctype="multipart/form-data">
                <div class='text-center mb-4 mt-5'>
                    <img id='image-preview' alt='placeholder' width="400" height="600"
                        th:src="@{${book.image != null && !#strings.isEmpty(book.image) ? book.image : '/placeholder_400_600.png'}}" />
                </div>
                <div class="mb-4">
                    <label for="categoryId" class="form-label">Категория</label>
                    <select th:name="categoryId" id="categoryId" class="form-select">
                        <option selected value="">Выберите категорию книги</option>
                        <option th:each="category : ${categories}" th:value="${category.id}" th:selected="${category.id==book.categoryId}">
                            [[${category.name}]]
                        </option>
                    </select>
                    <div th:if="${#fields.hasErrors('categoryId')}" th:errors="*{categoryId}" class="invalid-feedback"></div>
                </div>
                <div class="mb-4">
                    <label for="id" class="form-label">ID</label>
                    <input type="text" th:value="*{id}" id="id" class="form-control" readonly disabled>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="title">Название книги</label>
                    <input id="title" th:field="*{title}" class="form-control" type="text">
                    <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="invalid-feedback"></div>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="author">Автор</label>
                    <input id="author" th:field="*{author}" class="form-control" type="text">
                    <div th:if="${#fields.hasErrors('author')}" th:errors="*{author}" class="invalid-feedback"></div>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="price">Цена</label>
                    <input id="price" th:field="*{price}" class="form-control" type="number">
                    <div th:if="${#fields.hasErrors('price')}" th:errors="*{price}" class="invalid-feedback"></div>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="description">Описание книги</label>
                    <textarea th:field="*{description}" class="form-control" id="description" rows="3"></textarea>
                    <div th:if="${#fields.hasErrors('description')}" th:errors="*{description}" class="invalid-feedback"></div>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="annotation">Аннотация</label>
                    <textarea th:field="*{annotation}" class="form-control" id="annotation" rows="3"></textarea>
                    <div th:if="${#fields.hasErrors('annotation')}" th:errors="*{annotation}" class="invalid-feedback"></div>
                </div>
                <p class="mb-3">
                    Xарактеристики:
                </p>
                <div class="mb-4 border border-1 border-secondary p-2">
                    <div class="mb-3">
                        <label class="form-label" for="bookCode">Код книги</label>
                        <input th:field="*{bookCode}" id="bookCode" class="form-control" type="number">
                        <div th:if="${#fields.hasErrors('bookCode')}" th:errors="*{bookCode}" class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="publisher">Издательство</label>
                        <input th:field="*{publisher}" id="publisher" class="form-control" type="text">
                        <div th:if="${#fields.hasErrors('publisher')}" th:errors="*{publisher}" class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="series">Серия</label>
                        <input th:field="*{series}" id="series" class="form-control" type="text">
                        <div th:if="${#fields.hasErrors('series')}" th:errors="*{series}" class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="publicationYear">Год издания</label>
                        <input th:field="*{publicationYear}" id="publicationYear" class="form-control" type="number">
                        <div th:if="${#fields.hasErrors('publicationYear')}" th:errors="*{publicationYear}" class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="pagesNum">Количество страниц</label>
                        <input th:field="*{pagesNum}" id="pagesNum" class="form-control" type="number">
                        <div th:if="${#fields.hasErrors('pagesNum')}" th:errors="*{pagesNum}" class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="size">Размер</label>
                        <input th:field="*{size}" id="size" class="form-control" type="text">
                        <div th:if="${#fields.hasErrors('size')}" th:errors="*{size}" class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="coverType">Тип обложки</label>
                        <input th:field="*{coverType}" id="coverType" class="form-control" type="text">
                        <div th:if="${#fields.hasErrors('coverType')}" th:errors="*{coverType}" class="invalid-feedback"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="circulation">Тираж</label>
                        <input th:field="*{circulation}" id="circulation" class="form-control" type="number">
                        <div th:if="${#fields.hasErrors('circulation')}" th:errors="*{circulation}" class="invalid-feedback"></div>
                    </div>
                    <div>
                        <label class="form-label" for="weight">Вес, г</label>
                        <input th:field="*{weight}" id="weight" class="form-control" type="number">
                        <div th:if="${#fields.hasErrors('weight')}" th:errors="*{weight}" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="form-label" for="cover">Обложка книги</label>
                    <input type="file" class="form-control" name="cover" id="cover">
                </div>
                <div class="d-flex flex-column align-items-center mb-5">
                    <button class="btn btn-primary w-50 rounded-5 edit-btn" type="submit" id="add-btn">Сохранить книгу</button>
                    <a class="btn btn-secondary w-25 mt-4 edit-btn" th:href="@{/admin/book(page=${page}, categoryId=${categoryId})}">Отмена</a>
                </div>
            </form>
        </div>
    </main>
</body>

</html>