<!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='', mainClass='my-0'">
    <main layout:fragment="content">
        <div class="row gy-3 flex-grow-1">
            <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-4 px-0">
                        <div class="block d-flex justify-content-center lh-1" id="catalog-title">
                            <div>Результаты поиска</div>
                        </div>
                    </div>
                    <div class="col-12 mb-3 mb-lg-5 gx-0">
                        <div class="block">
                            <form class="row" th:action="@{/search}" method="get">
                                <input type="hidden" th:name="page" th:value="${page}">
                                <input type="hidden" th:name="searchInfo" th:value="${searchInfo}">
                                <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 mb-3" 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>
                                <form th:if="${not cart.containsKey(book.id)}" th:action="@{/search}" 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}">
                                    <input type="hidden" th:name="searchInfo" th:value="${searchInfo}">
                                    <button type="submit" class="catalog-bth-checkout btn rounded-5 px-3">
                                        В корзину
                                    </button>
                                </form>                               
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-grow-1"></div>
        
                <th:block th:replace="~{ pagination :: pagination (
                                        url=${'search'},
                                        totalPages=${totalPages},
                                        currentPage=${currentPage},
                                        filter=${filter},
                                        searchInfo=${searchInfo}) }" />
            </div>
        </div>
    </main>
</body>

</html>