<!DOCTYPE html>
<html lang="ru" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Читай-комната</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/5.3.3/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/webjars/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
</head>

<body class="d-flex flex-column min-vh-100" th:classappend="${bodyClass}">
    <header class="w-100 position-sticky top-0 z-3">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-md">
                <a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
                    <img th:src="@{/logo.png}" alt="logo" class="me-2">
                    Читай-комната
                </a>
                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse" id="navbarNav">
                    <ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100" th:with="activeLink=${#objects.nullSafe(servletPath, '')}">
                        <li class="header-link nav-item ms-lg-2 me-lg-3">
                            <a class="nav-link" href="/"
                                th:classappend="${activeLink == '/' ? 'active' : ''}">
                                Главная
                            </a>
                        </li>
                        <li class="header-link nav-item me-lg-3">
                            <a class="nav-link" href="/catalog"
                                th:classappend="${activeLink.startsWith('/catalog') ? 'active' : ''}">
                                Каталог
                            </a>
                        </li>
                        <li class="header-link nav-item me-lg-5" id="header-contacts">
                            <a class="nav-link" href="/contacts"
                                th:classappend="${activeLink.startsWith('/contacts') ? 'active' : ''}">
                                Контакты
                            </a>
                        </li>
                        <div class="flex-grow-1 me-lg-4" id="header-search">
                            <form class="h-25" th:action="@{/search}" method="get">
                                <input type="hidden" th:name="filter" th:value="${filter}">
                                <input type="hidden" th:name="page" th:value="${page}">
                                <input class="form-control" th:name="searchInfo" th:value="${searchInfo != null ? searchInfo : ''}" type="search"
                                    placeholder="Я ищу..." aria-label="Search" id="search-bar">
                            </form>     
                        </div>
                        <th:block sec:authorize="isAuthenticated()" th:with="userName=${#authentication.name}">
                            <a class="nav-link m-0 pe-0" href="/profile"
                                th:classappend="${activeLink.startsWith('/profile') ? 'active' : ''}">
                                [[${userName}]]
                            </a>
                            <p class="header-part d-none d-lg-block">&nbsp;/&nbsp;</p>
                            <form th:action="@{/logout}" method="post">
                                <button type="submit" class="header-part astext text-white text-start me-lg-3" onclick="return confirm('Вы уверены?')">Выйти</button>
                            </form>
                        </th:block>
                        <th:block sec:authorize="isAnonymous()">
                            <li class="nav-item">
                                <a class="nav-link" href="/login"
                                    th:classappend="${activeClass}">
                                    Вход
                                </a>
                            </li>
                            <p class="d-none d-lg-block">
                                /
                            </p>
                            <li class="nav-item me-lg-3">
                                <a class="nav-link" href="/signup"
                                    th:classappend="${activeLink.startsWith('/signup') ? 'active' : ''}">
                                    Регистрация
                                </a>
                            </li>
                        </th:block>
                        <li class="nav-item position-relative">
                            <a class="nav-link pe-lg-0" href="/cart"
                                th:classappend="${activeLink.startsWith('/cart') ? 'active-icon' : ''}">
                                <img th:src="@{/card.png}" alt="cart" th:attr="width=${activeLink.startsWith('/cart') ? '35' : '30'}, 
                                    height=${activeLink.startsWith('/cart') ? '40' : '35'}" id="cart-icon">
                            </a>
                            <span th:if="${totalCart > 0}" class="position-absolute" id="cart-link-count">[[${totalCart}]]</span>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main class="container-md d-flex flex-column flex-grow-1" th:classappend="${mainClass}" layout:fragment="content">
    </main>
    <footer class="footer flex-shrink-0">
        <div class="container-md" id="footer-container">
            <div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
                <div class="col-md-6 col-lg-4">
                    <div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
                        © И. А. Родионов, [[${#dates.year(#dates.createNow())}]].
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="block d-flex align-items-center justify-content-center justify-content-md-end">
                        <img th:src="@{/telephone-call.png}" class="me-2" alt="telephone-call" width="32" height="32">
                        <p id="footer-phone-number-text">
                            +7 927 818-61-60
                        </p>
                    </div>
                </div>
                <div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
                    <div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
                        <p class="me-3" id="footer-social-media-text">
                            Мы в соцсетях:
                        </p>
                        <a class="me-3" href="/">
                            <img th:src="@{/vk.png}" alt="vk" width="32" height="32">
                        </a>
                        <a class="me-3" href="/">
                            <img th:src="@{/youtube.png}" alt="youtube" width="32" height="32">
                        </a>
                        <a class="me-3" href="/">
                            <img th:src="@{/telegram.png}" alt="telegram" width="32" height="32">
                        </a>
                        <a href="/">
                            <img th:src="@{/odnoklassniki.png}" alt="odnoklassniki" width="32" height="32">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script th:inline="javascript">
        $(document).ready(function () {
            $('#search-bar').on('keypress', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    const searchValue = $(this).val().trim(); 
                    if (searchValue !== '') { 
                        $(this).closest('form').submit();
                    }
                }
            });
        });
    </script>
</body>

</html>