<!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='justify-content-center'">
    <main layout:fragment="content">

    <div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
        <div class="col-12 ms-2 mt-1">
            <div class="main-page-section-title block d-flex align-items-end">
                <img th:src="@{fire.png}" class="me-2" alt="fire" width="25" height="30" id="fire-icon">
                <p class="main-page-section-title-text lh-1 m-0">
                    Горячие новинки
                </p>
            </div>
        </div>
    
        <div th:each="novelty : ${novelties}" class="col-6 col-md-4 col-lg-2">
            <div class="block d-flex flex-column">
                <div class="d-flex justify-content-center">
                    <a th:href="@{/product-card/{id}(id=${novelty.id})}">
                        <img th:src="@{${novelty.image != null && !#strings.isEmpty(novelty.image) ? novelty.image : 'placeholder_400_600.png'}}"
                            class="main-page-book-cover" alt="book-cover-novelties" width="100" height="152">
                    </a>
                </div>
                <div class="d-flex flex-column align-items-center align-items-md-start">
                    <p class="main-page-price" th:text="${#numbers.formatDecimal(novelty.price, 0, 'COMMA', 0, 'POINT')} + ' ₽'"></p>
                    <p class="main-page-book-title" th:text="${novelty.title}"></p>
                    <p class="main-page-author" th:text="${novelty.author}"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
        <div class="col-12 ms-2 mt-1">
            <div class="main-page-section-title block d-flex align-items-end">
                <p class="main-page-section-title-text lh-1 m-0">
                    Книги по акциям
                </p>
            </div>
        </div>
    
        <div th:each="promotion : ${promotions}" class="col-6 col-md-4 col-lg-2">
            <div class="block d-flex flex-column">
                <div class="d-flex justify-content-center">
                    <a th:href="@{/product-card/{id}(id=${promotion.id})}">
                        <img th:src="@{${promotion.image != null && !#strings.isEmpty(promotion.image) ? promotion.image : 'placeholder_400_600.png'}}"
                            class="main-page-book-cover" alt="book-cover-promotions" width="100" height="152">
                    </a>
                </div>
                <div class="d-flex flex-column align-items-center align-items-md-start">
                    <p class="main-page-price" th:text="${#numbers.formatDecimal(promotion.price, 0, 'COMMA', 0, 'POINT')} + ' ₽'"></p>
                    <p class="main-page-book-title" th:text="${promotion.title}"></p>
                    <p class="main-page-author" th:text="${promotion.author}"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row bg-white pb-1 rounded-3 gy-3">
        <div class="col-12 ms-2 mt-1">
            <div class="main-page-section-title block d-flex align-items-end">
                <p class="main-page-section-title-text lh-1 m-0">
                    Выбор редакции
                </p>
            </div>
        </div>
    
        <div th:each="recommendation : ${recommendations}" class="col-6 col-md-4 col-lg-2">
            <div class="block d-flex flex-column">
                <div class="d-flex justify-content-center">
                    <a th:href="@{/product-card/{id}(id=${recommendation.id})}">
                        <img th:src="@{${recommendation.image != null && !#strings.isEmpty(recommendation.image) ? recommendation.image : 'placeholder_400_600.png'}}"
                            class="main-page-book-cover" alt="book-cover-recommendations" width="100" height="152">
                    </a>
                </div>
                <div class="d-flex flex-column align-items-center align-items-md-start">
                    <p class="main-page-price" th:text="${#numbers.formatDecimal(recommendation.price, 0, 'COMMA', 0, 'POINT')} + ' ₽'"></p>
                    <p class="main-page-book-title" th:text="${recommendation.title}"></p>
                    <p class="main-page-author" th:text="${recommendation.author}"></p>
                </div>
            </div>
        </div>
    </div>

    </main>
</body>

</html>