<!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=''">
    <main layout:fragment="content">
        <div class="row gy-3 mb-1">
            <div class="col-12 mb-3 mb-sm-4 mt-0 px-0">
                <div class="block d-flex justify-content-center lh-1" id="cart-title">
                    Моя корзина
                </div>
            </div>
            <h2 th:if="${#lists.isEmpty(cart)}" class="col-12 mb-3">Товары отсутствуют.</h2>

            <th:block th:if="${not #lists.isEmpty(cart)}">
                <div class="col-8 px-0">
                    <div class="block d-flex align-items-end lh-1" id="cart-items-num-text">
                        В корзине&nbsp;[[${count}]]&nbsp;[[${linesText}]]:
                    </div>
                </div>
                <div class="col-4 d-flex justify-content-end px-0">
                    <div class="block align-self-end">
                        <form action="#" th:action="@{/cart/clear}" method="post">
                            <button type="submit"
                                class="cart-button-remove d-flex justify-content-end align-items-end lh-1 border-0 bg-white pe-0"
                                onclick="return confirm('Вы уверены?')">
                                <img th:src="@{/trash.png}" class="trash-icon me-sm-2" alt="trash" width="24" height="24" />
                                Удалить все
                            </button>
                        </form>
                    </div>
                </div>

                <th:block th:each="cartItem : ${cart}">
                    <div class="col-1 border-top border-black pt-3 d-none d-sm-block">
                        <div class="block">
                            <img th:src="@{${cartItem.book.image != null && !#strings.isEmpty(cartItem.book.image) ? cartItem.book.image : '/placeholder_400_600.png'}}" 
                                class="cart-book-cover me-3" alt="cart-book-cover-1" width="88" height="138" />
                        </div>
                    </div>
                    <div class="col-6 pt-3 border-top border-black d-none d-sm-block">
                        <div class="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
                            <p class="cart-book-description-title mb-2">[[${cartItem.book.title}]]</p>
                            <p class="cart-book-description-author">[[${cartItem.book.author}]]</p>
                        </div>
                    </div>
                    <div class="col-3 pt-2 border-top border-black d-none d-sm-block">
                        <div class="block d-flex align-items-start justify-content-end">
                            <form action="#" th:action="@{/cart/decrease?bookId={bookId}(bookId=${cartItem.book.id})}" method="post">
                                <button type="submit" class="button-minus border border-end-0 rounded-start bg-white">
                                    –
                                </button>
                            </form>
                            <label class="cart-input-label">
                                <input readonly type="tel" class="cart-input h-100 w-100 border text-center p-0" placeholder="1" th:value="${cartItem.count}" />
                            </label>
                            <form action="#" th:action="@{/cart/increase?bookId={bookId}(bookId=${cartItem.book.id})}" method="post">
                                <button type="submit" class="button-plus border border-start-0 rounded-end bg-white">
                                    +
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="col-2 pt-3 border-top border-black d-none d-sm-block">
                        <div class="block d-flex flex-column align-items-end h-100">
                            <p class="cart-price">[[${#numbers.formatDecimal(cartItem.book.price, 0, 'COMMA', 0, 'POINT')}]]&nbsp;р.</p>
                            <p class="cart-price-count text-secondary mt-3">
                                [[${#numbers.formatDecimal(cartItem.book.price, 0, 'COMMA', 0, 'POINT')}]]
                                <span> * </span>
                                [[${cartItem.count}]]
                                <span> = </span>
                                [[${#numbers.formatDecimal(cartItem.book.price * cartItem.count, 0, 'COMMA', 0, 'POINT')}]]&nbsp;р.
                            </p>
                            <div class="flex-grow-1"></div>
                            <form action="#" th:action="@{/cart/clear?bookId={bookId}(bookId=${cartItem.book.id})}" method="post">
                                <button type="submit" class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0"
                                    onclick="return confirm('Вы уверены?')">
                                    <img th:src="@{/trash.png}" class="trash-icon me-2" alt="trash" width="24" height="24" />
                                    Удалить
                                </button>
                            </form>     
                        </div>
                    </div>

                    <div class="col-2 border-top border-black pt-3 d-sm-none">
                        <div class="block">
                            <img th:src="@{${cartItem.book.image != null && !#strings.isEmpty(cartItem.book.image) ? cartItem.book.image : '/placeholder_400_600.png'}}" 
                                class="cart-book-cover me-3" alt="cart-book-cover" width="88" height="138" />
                        </div>
                    </div>
                    <div class="col-10 pt-3 border-top border-black d-sm-none">
                        <div class="block ms-4">
                            <p class="cart-book-description-title mb-2">[[${cartItem.book.title}]]</p>
                            <p class="cart-book-description-author mb-2">[[${cartItem.book.author}]]</p>
                            <div class="d-flex mb-2">
                                <p class="cart-price me-3">[[${#numbers.formatDecimal(cartItem.book.price, 0, 'COMMA', 0, 'POINT')}]]&nbsp;р.</p>
                                <p class="cart-price-count text-secondary text-center lh-sm mt-1" id="mobile-price-count">
                                    [[${#numbers.formatDecimal(cartItem.book.price, 0, 'COMMA', 0, 'POINT')}]]
                                    <span> * </span>
                                    [[${cartItem.count}]]
                                    <span> = </span>
                                    [[${#numbers.formatDecimal(cartItem.book.price * cartItem.count, 0, 'COMMA', 0, 'POINT')}]]&nbsp;р.
                                </p>
                            </div>
                            <div class="d-flex align-items-center">
                                <form action="#" th:action="@{/cart/decrease?bookId={bookId}(bookId=${cartItem.book.id})}" method="post">
                                    <button type="submit" class="button-minus border border-end-0 rounded-start bg-white">
                                        –
                                    </button>
                                </form>
                                <label class="cart-input-label">
                                    <input readonly type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1"
                                        th:value="${cartItem.count}" />
                                </label>
                                <form action="#" th:action="@{/cart/increase?bookId={bookId}(bookId=${cartItem.book.id})}" method="post">
                                    <button type="submit" class="button-plus border border-start-0 rounded-end bg-white">
                                        +
                                    </button>
                                </form>
                                <div class="flex-grow-1"></div>
                                <form action="#" th:action="@{/cart/clear?bookId={bookId}(bookId=${cartItem.book.id})}" method="post">
                                    <button type="submit" class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0"
                                        onclick="return confirm('Вы уверены?')">
                                        <img th:src="@{/trash.png}" class="trash-icon me-2" alt="trash" width="24" height="24" />
                                        Удалить
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </th:block>

                <div class="col-12 pt-3 border-top border-black px-0">
                    <div class="block d-flex justify-content-end align-items-end lh-1" id="cart-final-price">
                        <span class="me-4" id="cart-final-price-text">
                            Итого:
                        </span>
                        <span id="cart-final-price-value"> [[${#numbers.formatDecimal(sum, 1, 2)}]] р. </span>
                    </div>
                </div>
            </th:block>

            <div class="col-12 px-0">
                <div class="block d-flex justify-content-end">
                    <button th:if="${#lists.isEmpty(cart)}" class="btn rounded-5" id="cart-btn-checkout" disabled>
                        Оформить заказ
                    </button>
                    <form th:if="${not #lists.isEmpty(cart)}" action="#" th:action="@{/cart/save}" method="post">
                        <button type="submit" class="btn rounded-5" id="cart-btn-checkout" onclick="return confirm('Вы уверены?')">
                            Оформить заказ
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>
</body>

</html>