<!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='justify-content-center'">
    <main layout:fragment="content">
        <th:block th:object="${book}">
            <div class="row gy-3">
                <div class="col-md-6 col-lg-3 mt-0 px-0">
                    <div class="block d-flex justify-content-center justify-content-md-start">
                        <img th:src="@{${book.image != null && !#strings.isEmpty(book.image) ? book.image : '/placeholder_400_600.png'}}" 
                            class="img-fluid" alt="book-cover-product-card" width="270" height="416" />
                    </div>
                </div>
                <div class="col-md-6 col-lg-5 mt-5 mt-md-0 px-0">
                    <div class="block d-flex flex-column align-items-center align-items-md-start ms-md-4">
                        <p class="mb-2" id="product-card-book-name">
                            [[${book.title != null ? book.title : 'Точных данных о названии нет'}]]
                        </p>
                        <p class="mb-4" id="product-card-author">
                            [[${book.author != null ? book.author : 'Точных данных о авторе нет'}]]
                        </p>
                        <dl class="row gx-5 gy-2 text-center text-md-start" id="product-card-characteristics">
                            <dt class="col-md-6 mt-0">Код товара</dt>
                            <dd class="col-md-6 mt-0">[[${book.bookCode != null ? book.bookCode : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Издательство</dt>
                            <dd class="col-md-6">[[${book.publisher != null ? book.publisher : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Серия</dt>
                            <dd class="col-md-6">[[${book.series != null ? book.series : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Год издания</dt>
                            <dd class="col-md-6">[[${book.publicationYear != null ? book.publicationYear : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Количество страниц</dt>
                            <dd class="col-md-6">[[${book.pagesNum != null ? book.pagesNum : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Размер</dt>
                            <dd class="col-md-6">[[${book.size != null ? book.size : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Тип обложки</dt>
                            <dd class="col-md-6">[[${book.coverType != null ? book.coverType : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Тираж</dt>
                            <dd class="col-md-6">[[${book.circulation != null ? book.circulation : 'Точных данных нет'}]]</dd>
            
                            <dt class="col-md-6">Вес, г</dt>
                            <dd class="col-md-6">[[${book.weight != null ? book.weight : 'Точных данных нет'}]]</dd>
                        </dl>
                    </div>
                </div>
                <div class="col-lg-4 mt-0 px-0 d-none d-lg-block">
                    <div class="block d-flex flex-column align-items-center align-items-lg-end">
                        <div class="border border-secondary-subtle rounded-1 p-3" id="product-card-order-container">
                            <div class="d-flex align-items-center mb-3">
                                <img th:src="@{/check.png}" class="me-4" alt="check" width="24" height="24" />
                                <p id="product-card-text-available">
                                    В наличии
                                </p>
                            </div>
                            <p class="mb-3" id="product-card-price">
                                [[${#numbers.formatDecimal(book.price, 0, 'COMMA', 0, 'POINT')}]]&nbsp;₽
                            </p>
                            <th:block sec:authorize="isAnonymous()">
                                <button type="button" class="btn rounded-1 p-3" id="product-card-button-add" 
                                    onclick="return alert('Пожалуйста, войдите в свой аккаунт или зарегистрируйте новый!')">
                                    Добавить в корзину
                                </button>
                            </th:block>
                            <th:block sec:authorize="isAuthenticated()">
                                <div>
                                    <button type="button" class="btn btn-success rounded-1 p-3" id="product-card-button-add"
                                        th:if="${cart.containsKey(book.id)}" disabled>
                                        Товар уже в корзине
                                    </button>
                                    <form th:if="${not cart.containsKey(book.id)}" th:action="@{/product-card/{id}(id=${book.id})}" method="post">
                                        <button type="submit" class="btn rounded-1 p-3" id="product-card-button-add">
                                            Добавить в корзину
                                        </button>
                                    </form>
                                </div>
                            </th:block>
                        </div>
                    </div>
                </div>
            </div>
            
            <th:block th:if="${book.description != null and !#strings.isEmpty(book.description)}">
                <div class="row mt-4 mt-md-0 mb-4">
                    <div class="col px-0">
                        <div class="block">
                            <p class="product-card-book-description-h mb-2">
                                О товаре
                            </p>
                            <p class="product-card-book-description-text">
                                [[${book.description}]]
                            </p>
                        </div>
                    </div>
                </div>
            </th:block>
            
            <div class="row gy-3">
                <th:block th:if="${book.annotation != null and !#strings.isEmpty(book.annotation)}">
                    <div class="col-12 px-0 mb-4 mb-lg-0">
                        <div class="block">
                            <p class="product-card-book-description-h mb-2">
                                Аннотация
                            </p>
                            <p class="product-card-book-description-text">
                                [[${book.annotation}]]
                            </p>
                        </div>
                    </div>
                </th:block>
                <div class="col px-0 d-lg-none">
                    <div class="block d-flex flex-column align-items-center border border-secondary-subtle rounded-1 p-3">
                        <div class="d-flex align-items-center mb-3">
                            <img th:src="@{/check.png}" class="me-4" alt="check" width="24" height="24" />
                            <p id="product-card-text-available">
                                В наличии
                            </p>
                        </div>
                        <p class="mb-3" id="product-card-price">
                            [[${#numbers.formatDecimal(book.price, 0, 'COMMA', 0, 'POINT')}]]&nbsp;₽
                        </p>
                        <th:block sec:authorize="isAnonymous()">
                            <button type="button" class="btn rounded-1 p-3" id="product-card-button-add"
                                onclick="return alert('Пожалуйста, войдите в свой аккаунт или зарегистрируйте новый!')">
                                Добавить в корзину
                            </button>
                        </th:block>
                        <th:block sec:authorize="isAuthenticated()">
                            <div>
                                <button type="button" class="btn btn-success rounded-1 p-3" id="product-card-button-add"
                                    th:if="${cart.containsKey(book.id)}" disabled>
                                    Товар уже в корзине
                                </button>
                                <form th:if="${not cart.containsKey(book.id)}" th:action="@{/product-card/{id}(id=${book.id})}" method="post">
                                    <button type="submit" class="btn rounded-1 p-3" id="product-card-button-add">
                                        Добавить в корзину
                                    </button>
                                </form>
                            </div>
                        </th:block>
                    </div>
                </div>
            </div>
        </th:block>
    </main>
</body>

</html>