<!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">
        <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="reg-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="@{/signup}" th:object="${user}" method="post">
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="text" th:field="*{login}" class="form-control w-75 border-black reg-input-name" id="login" placeholder="Имя пользователя (логин)">
                    <div th:if="${#fields.hasErrors('login')}" th:errors="*{login}" class="invalid-feedback"></div>
                </div>
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="email" th:field="*{email}" class="form-control w-75 border-black reg-input-email" id="email" placeholder="Адрес электронной почты">
                    <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="invalid-feedback"></div>
                </div>
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="text" th:field="*{firstname}" class="form-control w-75 border-black reg-input-name" id="firstname" placeholder="Имя">
                    <div th:if="${#fields.hasErrors('firstname')}" th:errors="*{firstname}" class="invalid-feedback"></div>
                </div>
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="text" th:field="*{lastname}" class="form-control w-75 border-black reg-input-name" id="lastname" placeholder="Фамилия">
                    <div th:if="${#fields.hasErrors('lastname')}" th:errors="*{lastname}" class="invalid-feedback"></div>
                </div>
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="password" th:field="*{password}" class="reg-input-password form-control w-75 border-black" id="password" placeholder="Пароль">
                    <div th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="invalid-feedback"></div>
                </div>
                <div class="d-flex justify-content-center mb-3 mb-sm-4">
                    <input type="password" th:field="*{passwordConfirm}" class="reg-input-password form-control w-75 border-black" id="passwordConfirm"
                        placeholder="Подтвердите пароль">
                    <div th:if="${#fields.hasErrors('passwordConfirm')}" th:errors="*{passwordConfirm}" class="invalid-feedback"></div>
                </div>

                <div class="text-center d-flex flex-column align-items-center">
                    <button class="btn btn-primary w-50 rounded-5 reg-btn mb-3" type="submit">Создать аккаунт</button>
                    <a class="btn btn-secondary w-25 rounded-5 reg-btn" href="/">Отмена</a>
                </div>
            </form>
        </div>
    </main>
</body>

</html>