<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Register | Book Your Shelf</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Little Closet template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon  -->
    <link rel="icon" th:href="@{/static/images/logo/book_your_shelf_tab.png}">
    <link rel="stylesheet" type="text/css" th:href="@{static/styles/bootstrap-4.1.2/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{static/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/owl.carousel.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/owl.theme.default.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/login.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/core-style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/util.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/iziToast.min.css}">
</head>

<body>
<!-- Header -->
<header class="header_area" th:insert="fragments/header.html"></header>

<div class="super_container">
    <div class="super_container_inner">
        <div class="super_overlay"></div>

        <div class="login">
            <div class="container">
                <div class="row">
                    <div class="col-md-2 align-self-left"></div>
                    <div class="col-md-8 align-self-center">
                        <div class="billing">

                            <div class="login_title">Register</div>
                            <div class="login_form_container">
                                <form th:object="${user}" th:action="@{/register}" method="post" id="login_form"
                                      class="login_form">
                                    <div>
                                        <!-- Name -->
                                        <div class="login-text p-b-10" style="color: black;">Name</div>
                                        <input type="text" th:field="*{name}" th:value="${lastUser?.getName()}"
                                               id="register_name" class="login_input form-control"
                                               pattern="^[a-zA-Z ]+$" required="required">

                                    </div>

                                    <div>
                                        <!-- Surname -->
                                        <div class="login-text p-b-10" style="color: black;">Surname</div>
                                        <input type="text" th:field="*{surname}" th:value="${lastUser?.getSurname()}"
                                               id="register_surname" class="login_input form-control"
                                               pattern="^[a-zA-Z ]+$" required="required">

                                    </div>

                                    <div>
                                        <!-- Email -->
                                        <div class="login-text p-b-10" style="color: black;">E-Mail Address</div>
                                        <input type="email" th:field="*{email}" th:value="${lastUser?.getEmail()}"
                                               id="register_email" class="login_input form-control"
                                               pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required="required">

                                    </div>
                                    <div>
                                        <!-- Password -->
                                        <div class="login-text p-b-10" style="color: black;">Password</div>

                                        <div class="input-group">
                                            <input type="password" th:field= "*{password}" id="register_password"
                                                   class="login_input form-control pwd" value= "secret" pattern = "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,16}$" required="required">
                                            <div class="input-group-append">
                                                <span class="input-group-text show_password_bg">
                                                    <button class="btn btn-default reveal" type="button"><i
                                                            class="fa fa-eye" id="eye"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                        <div>
                                            <span>*Your password must be 8-16 characters, and include at least one lowercase letter, one uppercase letter, one number and a special character.</span>
                                        </div>
                                    </div>
                                    <div class="login_extra">
                                        <ul>
                                            <li class="billing_info d-flex flex-row">
                                                <div>
                                                    <label>
                                                        <label class="checkbox_container">

                                                            <input type="checkbox"  id="permission_agreement"
                                                                   name="permission_agreement" class="billing_checkbox" value ="permission" required>
                                                            <span class="checkbox_mark"></span>
                                                        </label>
                                                        <label style="padding-left: 29px; cursor: text">

                                                            <span class="checkbox_text  login-text">I have permission to send commercial electronic messages
                                                            to Oak Book Store Marketing Inc. to those mentioned
                                                            <a href="/privacy_policy" target="_blank"
                                                               class="login-text register-text"> here</a>.</span>
                                                        </label>
                                                    </label>
                                                    <label>
                                                        <label class="checkbox_container">
                                                            <input type="checkbox"  id="membership_agreement"
                                                                   name= "membership_agreement" class="billing_checkbox" value="membership" required>

                                                            <span class="checkbox_mark"></span>
                                                        </label>
                                                        <label style="padding-left: 29px; cursor: text">
                                                            <span class="checkbox_text login-text">I have read and approved the
                                                            <a href="/membership" target="_blank"
                                                               class="login-text register-text"> Membership Agreement</a>.</span>
                                                        </label>

                                                    </label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div style="color: red;" th:if="${#fields.hasErrors('*')}">
                                        <ul>
                                            <li th:each="err : ${#fields.errors('*')}" th:text="${err}"></li>
                                        </ul>
                                    </div>
                                    <input id= "register_button" type="submit" value="REGISTER" class="login_button trans_200">
                                    <div class="text-center login-text" style="margin-top: 20px;">Already have an account? <a href="/login"
                                                                                                    class="login-text register-text">Login</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 align-self-right"></div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="footer" th:insert="fragments/footer.html"></footer>
    </div>
</div>

<script th:src="@{static/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{static/styles/bootstrap-4.1.2/popper.js}"></script>
<script th:src="@{static/styles/bootstrap-4.1.2/bootstrap.min.js}"></script>
<script th:src="@{static/js/plugins.js}"></script>
<script th:src="@{static/plugins/greensock/TweenMax.min.js}"></script>
<script th:src="@{static/plugins/greensock/TimelineMax.min.js}"></script>
<script th:src="@{static/plugins/scrollmagic/ScrollMagic.min.js}"></script>
<script th:src="@{static/plugins/greensock/animation.gsap.min.js}"></script>
<script th:src="@{static/plugins/greensock/ScrollToPlugin.min.js}"></script>
<script th:src="@{static/plugins/OwlCarousel2-2.2.1/owl.carousel.js}"></script>
<script th:src="@{static/plugins/easing/easing.js}"></script>
<script th:src="@{static/plugins/progressbar/progressbar.min.js}"></script>
<script th:src="@{static/plugins/parallax-js-master/parallax.min.js}"></script>
<script th:src="@{static/js/classy-nav.min.js}"></script>
<script th:src="@{static/js/custom.js}"></script>
<script th:src="@{static/js/active.js}"></script>
<script th:src="@{static/js/login.js}"></script>
<script th:src="@{static/js/iziToast.min.js}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    var lastUser = /*[[${lastUser}]]*/ 'default';
    if (lastUser) {
        iziToast.show({
            title: 'Fail',
            message: 'This email address already exists. Please try another one.',
            position: 'topRight',
            color: 'red'
        });
    }

    $(document).ready(function () {
        var i;
        var text_inputs = document.querySelectorAll("input[type=text]");
        var number_inputs = document.querySelectorAll("input[type=number]");
        var email_inputs = document.querySelectorAll("input[type=email]");
        var password_inputs = document.querySelectorAll("input[type=password]");


        const TEXT_MAX_LENGTH = "255";
        const NUMBER_MAX_LENGTH = 2147483647;

        for (i = 0; i < text_inputs.length; i++) {
            text_inputs[i].setAttribute("maxlength", TEXT_MAX_LENGTH)
        }

        for (i = 0; i < number_inputs.length; i++) {
            number_inputs[i].setAttribute("max", NUMBER_MAX_LENGTH)
        }

        for (i = 0; i < email_inputs.length; i++) {
            email_inputs[i].setAttribute("maxlength", TEXT_MAX_LENGTH)
        }

        for (i = 0; i < password_inputs.length; i++) {
            password_inputs[i].setAttribute("maxlength", TEXT_MAX_LENGTH)
        }

    });

    /*]]>*/
</script>

</body>
</html>