<!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 my-0'">
    <main layout:fragment="content">
        <div class="row">
            <div class="col-12 ps-0 mt-0 bg-white border border-3" id="catalog-categories-mobile">
                <div class="block d-flex flex-column justify-content-center p-2 h-100">
                    <p class="mb-4" id="catalog-categories-mobile-title">
                        Категории
                    </p>
                    <ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-mobile-list">
                        <li>
                            <a th:href="@{/catalog}">Все книги</a>
                        </li>
                        <th:block th:each="category : ${categories}">
                            <li>
                                <a th:href="@{/catalog/{id}(id=${category.id})}" th:text="${category.name}"></a>
                            </li>
                        </th:block>
                    </ul>
                </div>
            </div>
        </div>
    </main>
</body>

</html>