<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <link rel="stylesheet" th:href="@{/css/login.css}">
</head>
<body id="body">
<div class="loginWrap">
    <form class="container" method="post" th:action="@{/phits/login}">
        <div class="logo">
            <img src="/images/logo/logo.png">
            <p>포항시교통정보센터</p>
        </div>
        <div class="title">관리자</div>
        <input id="id" type="text" name="username" placeholder="ID">
        <input id="pwd" type="password" name="password" placeholder="비밀번호">
        <div onclick="login()" class="button">로그인</div>
    </form>
</div>
<th:block th:include="/include/footer.html"></th:block>
</body>
</html>

<script>
    let loginFail = "";
    loginFail = "[[${param.LoginFail}]]";
    if (loginFail) {
        alert(loginFail);
    }
    function login() {
        const $id = $('#id');
        const $pwd = $('#pwd');
        if (isNull($id.val())) {
            alert("ID를 입력해주세요");
            $id.focus();
            return
        }

        if (isNull($pwd.val())) {
            alert("비밀번호를 입력해주세요");
            $pwd.focus();
            return
        }

        const form =  $('.container');
        form.submit();
    }
</script>