<!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='h-100', mainClass='justify-content-center my-0'">
    <main layout:fragment="content">
        <div class="row gy-3 flex-grow-1">
            <div class="col-2 d-none d-md-block ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories">
                <div class="block d-flex flex-column justify-content-center p-2 h-100">
                    <p class="mb-4 mt-2" id="catalog-categories-title">
                        Категории
                    </p>
                    <ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-list">
                        <li th:class="${'Все книги' eq activeName} ? 'active-category' : ''">
                            <a th:href="@{/catalog}">Все книги</a>
                        </li>
                        <th:block th:each="category : ${categories}">
                            <li th:class="${category.name eq activeName} ? 'active-category' : ''">
                                <a th:href="@{/catalog/{id}(id=${category.id})}" th:text="${category.name}"></a>
                            </li>
                        </th:block>
                    </ul>
                </div>
            </div>
            <div class="col-12 col-md-10 d-flex flex-column bg-white mt-0 pt-2 pt-lg-3">
                <div class="row gy-3">
                    <div class="col-12 mb-3 mb-lg-5 px-0 d-md-none">
                        <div class="block d-flex lh-1" id="catalog-section-navigation">
                            <a th:href="@{/сatalog-mobile}" class="me-2 text-decoration-none">
                            Каталог
                            </a>
                            <span class="text-secondary me-2"> &gt; </span>
                            <a th:if="${'Все книги' eq activeName}" th:href="@{/catalog}" class="text-decoration-none">
                                [[${activeName}]]
                            </a>
                            <a th:if="${'Все книги' != activeName}" th:href="@{/catalog/{id}(id=${activeId})}" class="text-decoration-none">
                            [[${activeName}]]
                            </a>
                        </div>
                    </div>
                    <div class="col-12 mb-3 mb-lg-4 px-0">
                        <div class="block d-flex justify-content-center lh-1" id="catalog-title">
                            <div>[[${activeName}]]</div>
                        </div>
                    </div>
                    <div class="col-12 mb-3 mb-lg-5 gx-0">
                        <div class="block">
                            <form class="row" th:if="${'Все книги' eq activeName}" th:action="@{/catalog}" method="get">
                                <input type="hidden" th:name="page" th:value="${page}">
                                <select th:name="filter" class="form-select border-black сol-sm-10 me-sm-2" id="catalog-select">
                                    <option value="new" th:selected="${filter == 'new'}">Сначала новые</option>
                                    <option value="cheap" th:selected="${filter == 'cheap'}">Сначала дешевые</option>
                                    <option value="expensive" th:selected="${filter == 'expensive'}">Сначала дорогие</option>
                                </select>
                                <button type="submit" class="btn astext col-sm-2 ms-sm-2 text-start">Показать.</button>
                            </form>
                            <form class="row" th:if="${'Все книги' != activeName}" th:action="@{/catalog/{id}(id=${activeId})}" method="get">
                                <input type="hidden" th:name="page" th:value="${page}">
                                <select th:name="filter" class="form-select border-black сol-sm-10 me-sm-2" id="catalog-select">
                                    <option value="new" th:selected="${filter == 'new'}">Сначала новые</option>
                                    <option value="cheap" th:selected="${filter == 'cheap'}">Сначала дешевые</option>
                                    <option value="expensive" th:selected="${filter == 'expensive'}">Сначала дорогие</option>
                                </select>
                                <button type="submit" class="btn astext col-sm-2 ms-sm-2 text-start">Показать.</button>
                            </form>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3 mt-4" th:each="book : ${items}">
                        <div class="block d-flex flex-column h-100">
                            <div class="d-flex justify-content-center mb-4">
                                <a th:href="@{/product-card/{id}(id=${book.id})}">
                                    <img th:src="@{${book.image != null && !#strings.isEmpty(book.image) ? book.image : '/placeholder_400_600.png'}}" 
                                        class="catalog-book-cover" alt="book-cover-catalog" width="155" height="245" />
                                </a>
                            </div>
                            <div class="catalog-book-description d-flex flex-column align-items-start">
                                <p class="catalog-price mb-3">
                                    [[${#numbers.formatDecimal(book.price, 0, 'COMMA', 0, 'POINT')}]]&nbsp;₽
                                </p>
                                <p class="catalog-book-title mb-3">
                                    [[${book.title != null ? book.title : ''}]]
                                </p>
                                <p class="catalog-author mb-3">
                                    [[${book.author != null ? book.author : ''}]]
                                </p>
                            </div>
                            <div class="flex-grow-1"></div>
                            <div class="catalog-btn-checkout-div d-flex justify-content-start" sec:authorize="isAnonymous()">
                                <button class="catalog-bth-checkout btn rounded-5 px-3" 
                                    onclick="return alert('Пожалуйста, войдите в свой аккаунт или зарегистрируйте новый!')">
                                    В корзину
                                </button>
                            </div>
                            <div class="catalog-btn-checkout-div d-flex justify-content-start" sec:authorize="isAuthenticated()">
                                <button type="button" class="catalog-bth-checkout btn rounded-5 px-3 btn-info"
                                    th:if="${cart.containsKey(book.id)}" disabled>
                                    Уже в корзине
                                </button>
                                <th:block th:if="${'Все книги' eq activeName}">
                                    <form th:if="${not cart.containsKey(book.id)}" th:action="@{/catalog}" method="post">
                                        <input type="hidden" th:name="bookId" th:value="${book.id}">
                                        <input type="hidden" th:name="page" th:value="${page}">
                                        <input type="hidden" th:name="filter" th:value="${filter}">
                                        <button type="submit" class="catalog-bth-checkout btn rounded-5 px-3">
                                            В корзину
                                        </button>
                                    </form>
                                </th:block>
                                <th:block th:if="${'Все книги' != activeName}">
                                    <form th:if="${not cart.containsKey(book.id)}" th:action="@{/catalog/{id}(id=${activeId})}" method="post">
                                        <input type="hidden" th:name="bookId" th:value="${book.id}">
                                        <input type="hidden" th:name="page" th:value="${page}">
                                        <input type="hidden" th:name="filter" th:value="${filter}">
                                        <button type="submit" class="catalog-bth-checkout btn rounded-5 px-3">
                                            В корзину
                                        </button>
                                    </form>
                                </th:block>
                            </div>
                        </div>
                    </div>
                </div>
                <th:block sec:authorize="hasAnyRole('ADMIN', 'SUPERADMIN')">
                    <a th:href="@{/admin}" class="text-dark fw-bolder mt-5 mb-3 text-decoration-none">
                        Панель администратора.
                    </a>
                </th:block>
                <div class="d-flex flex-grow-1"></div>

                <div th:if="${'Все книги' eq activeName}">
                    <th:block th:replace="~{ pagination :: pagination (
                                            url=${'catalog'},
                                            totalPages=${totalPages},
                                            currentPage=${currentPage},
                                            filter=${filter},
                                            searchInfo='') }" />
                </div>
                
                <div th:if="${'Все книги' != activeName}">
                    <th:block th:replace="~{ pagination :: pagination (
                                            url=@{catalog/{id}(id=${activeId})},
                                            totalPages=${totalPages},
                                            currentPage=${currentPage},
                                            filter=${filter},
                                            searchInfo='') }" />
                </div>               
            </div>
        </div>
    </main>
</body>

</html>