<!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='bg-white', mainClass='my-0'">
    <main layout:fragment="content">
        <h2 class="text-center display-6 my-4 fw-bold">Личный кабинет</h2>
        <div class="container-fluid mb-5 d-lg-flex">
            <div class="col-lg-5 col-12 pb-5 pe-5 p-2">
                <h4 class="fs-3">Ваши данные <a href="/profile/edit" class="profile-link astext ms-2 text-start">(изменить)</a></h4>
                <div class="d-flex flex-column my-4 border border-info border-3">
                    <div>
                        <p class="fw-bold p-2">Фамилия</p>
                        <p class="fs-5 p-2">[[${user.lastname}]]</p>
                    </div>
                    <div>
                        <p class="fw-bold p-2">Имя</p>
                        <p class="fs-5 p-2">[[${user.firstname}]]</p>
                    </div>
                    <div>
                        <p class="fw-bold p-2">Логин</p>
                        <p class="fs-5 p-2">[[${user.login}]]</p>
                    </div>
                    <div>
                        <p class="fw-bold p-2">Email</p>
                        <p class="fs-5 p-2">[[${user.email}]]</p>
                    </div>
                </div>
                <form th:action="@{/logout}" method="post">
                    <button type="submit" class="btn btn-primary fw-bold w-50"
                        onclick="return confirm('Вы уверены?')">Выйти</button>
                </form>
            </div>
            <div class="col-lg-7 col-12 border border-info border-3 p-2">
                <h4 class="fs-3 text-center mb-3">История заказов</h4>
                <div th:each="order : ${items}">
                    <p class="fs-5 mb-2">Заказ от <span th:text="${order.date + '. '}"></span>Cтоимость:
                        <span th:text="${#numbers.formatDecimal(order.sum, 0, 'COMMA', 0, 'POINT') + ' ₽'}"></span>
                    </p>
                    <div class="border border-dark p-2 mb-2 orders-info">
                        <div class="row fs-4 p-2 text-center cart-labels align-items-center d-md-flex d-none">
                            <div class="col-6 text-start">
                                <span>книга</span>
                            </div>
                            <div class="col-2">
                                <span>цена</span>
                            </div>
                            <div class="col-2">
                                <span>кол-во</span>
                            </div>
                            <div class="col-2">
                                <span>всего</span>
                            </div>
                        </div>
                        <div class="mb-2 mt-2" th:each="element : ${order.books}">
                            <div class="row p-2 text-center align-items-center justify-content-between">
                                <div class="col-md-6 text-start d-flex align-items-center">
                                    <img class="w-25 me-4" alt="cover"
                                        th:src="@{${element.book.image != null && !#strings.isEmpty(element.book.image) ? element.book.image : '/placeholder_400_600.png'}}" />
                                    <span th:text="${element.book.title + ', ' + element.book.author}"></span>
                                </div>
                                <div class="col-2 d-md-block d-none">
                                    <span
                                        th:text="${#numbers.formatDecimal(element.book.price, 0, 'COMMA', 0, 'POINT') + ' ₽'}"></span>
                                </div>
                                <div class="col-md-2 col-4 text-start mt-2 text-md-center mt-md-0">
                                    <span th:text="${element.count}"></span>
                                </div>
                                <div class="col-md-2 col-4 mt-2 mt-md-0">
                                    <span
                                        th:text="${#numbers.formatDecimal(element.book.price * element.count, 0, 'COMMA', 0, 'POINT') + ' ₽'}">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <th:block th:replace="~{ pagination :: pagination (
                                url=${'profile'},
                                totalPages=${totalPages},
                                currentPage=${currentPage},
                                filter='',
                                searchInfo='') }" />
    </main>
</body>

</html>