<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{default}" xmlns:th="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content">
    <div th:if="${errors}" th:text="${errors}" class="margin-bottom alert alert-danger"></div>
    <form action="#" th:action="@{/signup}" th:object="${userDto}" method="post">
        <div class="mb-3">
            <label for="login" class="mb-1">Login</label>
            <input id="login" th:field="${userDto.login}" class="form-control"
                   type="text" required maxlength="64" />
        </div>
        <div class="mb-3">
            <label for="email" class="mb-1">Email</label>
            <input id="email" th:field="${userDto.email}" class="form-control"
                   type="text" required />
        </div>
        <div class="mb-3">
            <label for="password" class="mb-1">Password</label>
            <input id="password" th:field="${userDto.password}" class="form-control"
                   type="password" required minlength="3" maxlength="64" />
        </div>
        <div class="mb-3">
            <label for="passwordConfirm" class="mb-1">Confirm Password</label>
            <input id="passwordConfirm" th:field="${userDto.passwordConfirm}" class="form-control"
                   type="password" required minlength="3" maxlength="64" />
        </div>
        <div class="mb-3">
            <button type="submit" class="btn btn-success">
                Create account
            </button>
        </div>
        <div>
            <p>
                <span>Already have an account?</span>
                <a href="/login">Sing In here</a>
            </p>
        </div>
    </form>
</div>
</body>
</html>
