<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>Книги - SOPDS</title>
</head>
<body>
<div th:if="${lang != null}" class="callout info">
<p>
Фильтр по языку:
<span th:switch="${lang}">
<span th:case="0">Все языки</span>
<span th:case="1">Русский</span>
<span th:case="2">Английский</span>
</span>
<a th:href="@{/books}" class="button small">Сбросить фильтр</a>
</p>
</div>
<div layout:fragment="content">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">
<span th:if="${genre}">Книги жанра: <span th:text="${genre.genre}">Жанр</span></span>
<span th:if="${author}">Книги автора: <span th:text="${author.fullName}">Автор</span></span>
<span th:if="${series}">Книги серии: <span th:text="${series.series}">Серия</span></span>
<!-- <span th:if="${!genre && !author && !series}">Все книги</span>-->
</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary" disabled>
Всего: <span th:text="${books.totalElements}">0</span>
</button>
</div>
</div>
</div>
<!-- Фильтры -->
<div class="card mb-4">
<div class="card-body">
<form th:action="@{/books}" method="get" class="row g-3">
<div class="col-md-3">
<label for="genre" class="form-label">Жанр</label>
<select class="form-select" id="genre" name="genreId">
<option value="">Все жанры</option>
<option th:each="g : ${allGenres}"
th:value="${g.id}"
th:text="${g.genre}"
th:selected="${genreId == g.id}">
</option>
</select>
</div>
<div class="col-md-3">
<label for="format" class="form-label">Формат</label>
<select class="form-select" id="format" name="format">
<option value="">Все форматы</option>
<option th:each="f : ${formats}"
th:value="${f}"
th:text="${f}"
th:selected="${format == f}">
</option>
</select>
</div>
<div class="col-md-3">
<label for="lang" class="form-label">Язык</label>
<select class="form-select" id="lang" name="lang">
<option value="">Все языки</option>
<option value="ru">Русский</option>
<option value="en">Английский</option>
</select>
</div>
<div class="col-md-3 d-flex align-items-end">
<button type="submit" class="btn btn-primary me-2">Применить</button>
<a th:href="@{/books}" class="btn btn-outline-secondary">Сбросить</a>
</div>
</form>
</div>
</div>
<!-- Список книг -->
<div class="row">
<div th:each="book : ${books.content}" class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row">
<div class="col-3 text-center">
<i class="bi bi-journal-bookmark" style="font-size: 4rem; color: #6c757d;"></i>
<div class="mt-2">
<span class="badge bg-secondary" th:text="${book.format}">format</span>
</div>
</div>
<div class="col-9">
<h5 class="card-title">
<a th:href="@{/book/{id}(id=${book.id})}" th:text="${book.title}" class="text-decoration-none"></a>
</h5>
<p class="card-text" th:if="${book.authors}">
<strong>Авторы:</strong>
<span th:each="author, iter : ${book.authors}">
<a th:href="@{/books/author/{id}(id=${author.id})}" th:text="${author.fullName}" class="text-decoration-none"></a>
<span th:if="${not iter.last}">, </span>
</span>
</p>
<p class="card-text" th:if="${book.series}">
<strong>Серия:</strong>
<a th:href="@{/books/series/{id}(id=${book.series.id})}" th:text="${book.series.series}" class="text-decoration-none"></a>
</p>
<p class="card-text" th:if="${book.genres}">
<strong>Жанры:</strong>
<span th:each="genre, iter : ${book.genres}">
<a th:href="@{/books/genre/{id}(id=${genre.id})}" th:text="${genre.genre}" class="text-decoration-none"></a>
<span th:if="${not iter.last}">, </span>
</span>
</p>
<p class="card-text" th:if="${book.fileSize}">
<small class="text-muted">
Размер: <span th:text="${#numbers.formatInteger(book.fileSize/1024/1024, 1, 'DEFAULT')}">0</span> MB
</small>
</p>
<p class="card-text" th:if="${book.lang}">
<small class="text-muted">
Язык:
<span th:switch="${book.lang}">
<span th:case="'ru'">Русский</span>
<span th:case="'en'">Английский</span>
<span th:case="*" th:text="${book.lang}"></span>
</span>
</small>
</p>
</div>
</div>
</div>
<div class="card-footer">
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted" th:if="${book.registerDate}">
Добавлено: <span th:text="${#temporals.format(book.registerDate, 'dd.MM.yyyy')}">дата</span>
</small>
<div>
<a th:href="@{/book/{id}(id=${book.id})}" class="btn btn-sm btn-primary">Подробнее</a>
<a th:if="${book.fileName}" th:href="@{/download/{id}(id=${book.id})}" class="btn btn-sm btn-outline-success">
<i class="bi bi-download"></i> Скачать
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Пагинация -->
<nav th:if="${books.totalPages > 1}" aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item" th:classappend="${books.first} ? 'disabled'">
<a class="page-link" th:href="@{${pageUrl}(page=0)}">Первая</a>
</li>
<li class="page-item" th:classappend="${books.first} ? 'disabled'">
<a class="page-link" th:href="@{${pageUrl}(page=${books.number - 1})}">Назад</a>
</li>
<li th:each="page : ${#numbers.sequence(0, books.totalPages - 1)}"
class="page-item"
th:classappend="${page == books.number} ? 'active'">
<a class="page-link" th:href="@{${pageUrl}(page=${page})}" th:text="${page + 1}">1</a>
</li>
<li class="page-item" th:classappend="${books.last} ? 'disabled'">
<a class="page-link" th:href="@{${pageUrl}(page=${books.number + 1})}">Вперед</a>
</li>
<li class="page-item" th:classappend="${books.last} ? 'disabled'">
<a class="page-link" th:href="@{${pageUrl}(page=${books.totalPages - 1})}">Последняя</a>
</li>
</ul>
</nav>
<div th:if="${books == null or books.content.empty}" class="text-center py-5">
<i class="bi bi-book" style="font-size: 4rem; color: #6c757d;"></i>
<h4 class="mt-3">Книги не найдены</h4>
<p class="text-muted">Попробуйте изменить параметры поиска или фильтры</p>
</div>
</div>
</body>
</html>
