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

<head>
    <title>Forgot Password | 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="@{styles/bootstrap-4.1.2/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{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">Forgot Password</div>
                            <div class="login_form_container">
                                <form action="#" id="login_form" class="login_form">
                                    <div>Please enter your e-mail address. A password reset link will be sent to your
                                        e-mail address.
                                    </div>
                                    <div>
                                        <!-- Email -->
                                        <div class="login-text p-b-10" style="color: black;">E-Mail Address</div>
                                        <input type="email" id="forgot_password_email" class="login_input form-control"
                                               pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required="required" maxlength="255">
                                    </div>
                                    <div><!--ERROR--></div>
                                    <input id="login_button" type="submit" value="SEND LINK" class="login_button trans_200" >
                                </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/iziToast.min.js}"></script>

<script>
    $('#login_button').click(function (event) {

        var email = $('#forgot_password_email').val();
        var ret = {
            email : email
        };

        if(validation_check(["forgot_password_email"])) {
            event.preventDefault();
            $.post("/forgot-password", ret, function (data) {
                iziToast.show({
                    title: 'Success',
                    message: 'Link sent to your email address.',
                    position: 'topRight',
                    color: 'green'
                });
                document.getElementById("login_form").reset();
            }).fail(function (data) {
                iziToast.show({
                    title: 'Fail',
                    message: data.responseText,
                    position: 'topRight',
                    color: 'red'
                });
            })
        }
    });
</script>

<script>
    function validation_check(arr){
        for (var i = 0; i < arr.length; i++) {
            if (!document.getElementById(arr[i]).checkValidity()) {
                return false;
            }
        }
        return true;
    }
</script>

</body>

</html>