<!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', activeClass='active'">
    <main layout:fragment="content">
        <div class="row gy-3 justify-content-center">
            <div class="col-12 mt-4">
                <div class="block d-flex justify-content-center mb-3 mb-sm-4" id="login-title">
                    Вход на сайт
                </div>
            </div>
            <form class="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" action="#" th:action="@{/login}" method="post">
                <div th:if="${param.error}" class="alert alert-danger mb-3 mb-sm-4 text-center">
                    Неверный логин или пароль
                </div>
                <div th:if="${param.logout}" class="alert alert-success mb-3 mb-sm-4 text-center">
                    Выход успешно произведен
                </div>
                <div th:if="${param.signup}" class="alert alert-success mb-3 mb-sm-4 text-center">
                    Пользователь успешно создан
                </div>
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="text" id="username" name="username" placeholder="Имя пользователя" class="form-control w-75 border-black login-input-email" 
                        required minlength="3" maxlength="20">
                </div>
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="password" id="password" name="password" placeholder="Пароль" class="form-control w-75 border-black login-input-password" 
                        required minlength="3" maxlength="20">
                </div>
                <div class="form-check mb-3 mb-sm-4">
                    <input class="form-check-input" type="checkbox" id="remember-me" name="remember-me" checked>
                    <label class="form-check-label login-input-remember fw-bolder" for="remember-me">Запомнить меня.</label>
                </div>
                <div class="d-flex flex-column align-items-center">
                    <button class="btn btn-primary w-50 rounded-5 login-btn mb-3" type="submit">Войти</button>
                    <a class="btn btn-secondary w-25 rounded-5 login-btn" href="/signup" >Регистрация</a>
                </div>
            </form>
        </div>
    </main>
</body>

</html>