<!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 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">Главная страница</h1>
</div>
<!-- Статистика -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card text-white bg-primary">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 th:text="${stats.booksCount}">0</h4>
<p class="card-text">Книг</p>
</div>
<div class="align-self-center">
<i class="bi bi-book" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 th:text="${stats.authorsCount}">0</h4>
<p class="card-text">Авторов</p>
</div>
<div class="align-self-center">
<i class="bi bi-people" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-warning">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 th:text="${stats.seriesCount}">0</h4>
<p class="card-text">Серий</p>
</div>
<div class="align-self-center">
<i class="bi bi-collection" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-info">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 th:text="${stats.genresCount}">0</h4>
<p class="card-text">Жанров</p>
</div>
<div class="align-self-center">
<i class="bi bi-tags" style="font-size: 2rem;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Последние добавленные книги -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-clock-history"></i> Последние добавленные книги
</h5>
</div>
<div class="card-body">
<div class="row" th:if="${not #lists.isEmpty(recentBooks)}">
<div class="col-md-3 mb-3" th:each="book : ${recentBooks}">
<div class="card h-100">
<div class="card-body text-center">
<div class="mb-2">
<i class="bi bi-journal-bookmark" style="font-size: 3rem; color: #6c757d;"></i>
</div>
<h6 class="card-title" th:text="${book.title}">Название книги</h6>
<p class="card-text small text-muted" th:if="${book.authors}">
<span th:each="author, iter : ${book.authors}">
<span th:text="${author.fullName}">Автор</span>
<span th:if="${not iter.last}">, </span>
</span>
</p>
<p class="card-text small" th:if="${book.format}">
<span class="badge bg-secondary" th:text="${book.format}">формат</span>
</p>
<a th:href="@{/book/{id}(id=${book.id})}" class="btn btn-sm btn-outline-primary mt-2">
Подробнее
</a>
</div>
</div>
</div>
</div>
<div class="row" th:if="${recentBooks != null and !recentBooks.empty}">
<p class="text-muted">Нет недавно добавленных книг</p>
</div>
</div>
</div>
</div>
</div>
<!-- Популярные жанры -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-star"></i> Популярные жанры
</h5>
</div>
<div class="card-body">
<div class="genre-list" th:if="${popularGenres != null and !popularGenres.empty}">
<a th:each="genre : ${popularGenres}"
th:href="@{/books/genre/{id}(id=${genre.id})}"
class="d-block mb-2 text-decoration-none">
<i class="bi bi-tag-fill"></i>
<span th:text="${genre.genre}">Жанр</span>
<small class="text-muted" th:text="'(' + ${genre.bookCount} + ')'">(0)</small>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
