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

<head>
    <title>Login | 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">Login</div>
                            <div class="login_form_container">
                                <form th:object="${user}" th:action="@{/perform_login}" id="login_form"
                                      class="login_form" method="post">
                                    <div>
                                        <!-- Email -->
                                        <div class="login-text p-b-10" style="color: black;">E-Mail Address</div>
                                        <input type="email" th:field="*{email}" id="login_email"
                                               class="login_input form-control"
                                               pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required="required"
                                               maxlength="255">
                                    </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="login_password"
                                                   class="login_input form-control pwd" value="secret"
                                                   required="required" maxlength="255">
                                            <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>
                                    <div class="login_extra">
                                        <ul>
                                            <li class="billing_info d-flex flex-row">
                                                <div>
                                                    <label>
                                                        <label class="checkbox_container">
                                                            <input type="checkbox" id="remember"
                                                                   name="remember-me"
                                                                   class="billing_checkbox" >
                                                            <span class="checkbox_mark"></span>
                                                        </label>
                                                        <label style="padding-left: 29px; cursor: text">
                                                            <span class="checkbox_text login-text">Remember Me</span>
                                                        </label>
                                                    </label>
                                                </div>
                                                <div style="alignment: center">
                                                    <a href="/forgot-password" class="login-text register-text">Forgot
                                                        Password</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div><!--ERROR--></div>
                                    <input id="login_button" type="submit" value="LOGIN" class="login_button trans_200" >
                                    <div class="text-center login-text" style="margin-top: 20px;">Don't have an account? <a href="/register"
                                                                                                  class="login-text register-text">Register</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>
    var url = window.location.href;
    var mark = url.split('?').pop();
    if (mark === "error") {
        iziToast.show({
            title: 'Fail',
            message: "Wrong credentials",
            position: 'topRight',
            color: 'red'
        });
    }
</script>

</body>

</html>