<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:ezy="http://www.ezyplatform.com/thymeleaf/layout"
        dir="ltr">

<head>
    <title>Admin | Easy Going Platform</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="icon" type="image/x-icon" ezy:vhref="/favicon.ico">

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" ezy:vhref="/css/all.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" ezy:vhref="/css/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" ezy:vhref="/css/adminlte.min.css">
    <script>
        const ezyadmin = {};
    </script>
</head>
<body class="hold-transition register-page">
<div class="register-box">
    <div class="register-logo">
        [[#{login}]]
    </div>

    <div class="card">
        <div class="card-body register-card-body">
            <p class="login-box-msg">[[#{login_to_admin}]]</p>
            <form th:action="'/login' + ${ezyLang != null ? '?lang=' + ezyLang : ''}"
                  method="post" id="adminLoginForm">
                <div class="form-group">
                    <label class="col-form-label text-danger" for="username"
                           th:if="${errors != null}">
                        <i class="far fa-times-circle"></i> [[#{invalid_username_or_password}]]
                    </label>
                    <div class="input-group mb-3">
                        <input type="text" name="username" id="username"
                               class="form-control"
                               th:classappend="${errors != null ? 'is-invalid' : ''}"
                               th:placeholder="#{username}"
                               th:value="${fillUsername}">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-user"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group mb-3">
                        <input type="password" name="password" id="password"
                               class="form-control"
                               th:classappend="${errors != null ? 'is-invalid' : ''}"
                               th:placeholder="#{password}"
                               th:value="${fillPassword}">
                        <div class="input-group-append">
                            <div class="input-group-text cursor-pointer" id="passwordShow"
                                 onclick="ezyadmin.togglePasswordVisible('password', 'passwordShow', 'passwordHide');">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="input-group-text cursor-pointer d-none" id="passwordHide"
                                 onclick="ezyadmin.togglePasswordVisible('password', 'passwordShow', 'passwordHide');">
                                <i class="fas fa-eye-slash"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group" id="loginFailuresGroup">
                    <span th:if="${errors != null && errors.loginFailures > 0 && errors.loginBlockDuration == 0}" class="text-danger">
                        [[#{a_failed_login_attempt}]] ([[${errors.loginFailures}]] / [[${errors.maxLoginFailures}]])
                    </span>
                    <span th:if="${errors != null && errors.loginBlockDuration > 0}" class="text-danger">
                        [[#{your_account_has_been_locked_for}]] [[${errors.loginBlockDuration}]] [[${#strings.toLowerCase(#messages.msg('minutes'))}]]!
                    </span>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary btn-block">
                            [[#{login}]]
                        </button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.form-box -->
    </div><!-- /.card -->
</div>
<!-- /.register-box -->

<!-- jQuery -->
<script ezy:vsrc="/js/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script ezy:vsrc="/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script ezy:vsrc="/js/adminlte.min.js"></script>

<script ezy:vsrc="/js/public.js"></script>

<script>
$(document).ready(() => {
    var usernameInput = $('#username');
    if (!usernameInput.val()) {
        usernameInput.val(localStorage.getItem('adminLoginUsername'));
    }
    var usernameValue = usernameInput.val();
    usernameInput.on('input', function () {
        localStorage.setItem('adminLoginUsername', $(this).val() || usernameValue);
    });
});
</script>
</body>
</html>
