<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="head (title)">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}">
        <link rel="stylesheet" th:href="@{/css/style.css}">
        <title>Login - CTP</title>
    </head>
    <body class="page-login">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-sm-3">
                    <div class="login__form-container">
                        <div class="login__logo">
                            <img th:src="@{/img/utopia-industries-white.png}" alt="Utopia Industries">
                        </div>
                        <form th:action="@{'/login'}" method="POST" class="form login__form rounded">
                            <div class="alert alert-secondary d-none" data-notice-logged-out>
                                You have been logged out of the system.
                            </div>
                            <div th:if="${param.error != null }" class="alert alert-danger d-none" data-incorrect-credentials>
                                <th:block th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></th:block>
                            </div>
                            <div th:if="${param.authenticate == null }" class="form-group mt-lg-5">
                                <label>Username</label>
                                <input type="text" class="form-control" name="username" spellcheck="false" required data-username>
                            </div>
                            <div class="form-group">
                                <label>Password</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" name="password" required data-password-field>
                                    <div class="input-group-append">
                                        <button data-show-password-btn
                                                class="btn-sm btn btn-primary"
                                                type="button"
                                                style="outline: none"
                                                title="Show Password">
                                            <span> <i class="bi bi-eye text-black"></i></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary btn-block" type="submit">Sign in</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script th:src="@{/js/utils.js}"></script>
        <script>

            (async function () {

                let $noticeLoggedOut = document.querySelector('[data-notice-logged-out]'),
                    $noticeIncorrectCredentials = document.querySelector('[data-incorrect-credentials]'),
                    $showPasswordBtn = document.querySelector('[data-show-password-btn]'),
                    $passwordField = document.querySelector('[data-password-field]'),
                    $usernameField = document.querySelector('[data-username]'),
                    $codeSendBtn = document.querySelector('[data-sent-otp-code]'),
                    $usernameHiddenField = document.querySelector('[name="username"]');

                const logoutStr = 'logout';
                const errorStr = 'error';
                let isPassword = true;

                if (window.location.search.includes(logoutStr)) {
                    $noticeLoggedOut.classList.remove('d-none');
                }

                if (window.location.search.includes(errorStr)) {
                    $noticeIncorrectCredentials.classList.remove('d-none');
                }

                if( $showPasswordBtn != null ){
                    // toggle password field
                    $showPasswordBtn.onclick = function (e) {
                        e.preventDefault();
                        if (isPassword) {
                            $passwordField.setAttribute('type', 'text');
                        } else {
                            $passwordField.setAttribute('type', 'password');
                        }
                        isPassword = !isPassword;
                    };
                }
            })();
        </script>
    </body>
</html>