<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <!-- Fonts -->
        <title>엘마스타 로그인</title>
        <!-- Fonts -->
        <link rel="stylesheet" type="text/css" href="/css/fonts.css">
        <!-- CSS Files -->
        <link rel="stylesheet" type="text/css" href="/css/reset.css">
        <!--login CSS -->      
        <link rel="stylesheet" type="text/css" href="/css/login.css">
        <link rel="stylesheet" type="text/css" href="/css/common.css">
    </head>
    <body>
        <section id="login">
            <header>
                <div>
                    <h1>
                        <a href="/">
                                <img style="max-height: 120px;" src="/res/images/lholder/home/logo.png"/>
                        </a>
                    </h1>
                </div>
            </header>

            <div class="content">
                <h1>login</h1>
                <p><span>엘마스타</span>에 오신 것을 환영합니다.</p>
                <!---------- 로그인폼 시작 ---------->
                <form action="/login" method="post">
                    <div class="login-box">
                        <input name="userId" placeholder="아이디 입력" type="text"/>
                        <input name="pwd" placeholder="비밀번호 입력" type="password"/>
                    </div>
                    <button type="submit" class="ty01 widthL">로그인하기</button>
                </form><!---------- 로그인폼 끝---------->
                <!---------- 서브버튼 시작---------->
                <div class="sub-button">
                    <p><input type="checkbox" id="saveId"> 아이디 저장</p>
                    <ul>
                        <li><a href="">아이디 찾기</a></li>
                        <li>|</li>
                        <li><a href="">비밀번호 재설정</a></li>
                    </ul>
                </div><!---------- 서브버튼 끝---------->
                <div class="btn-join-wrap">
                    <h2>아직 회원이 아니세요?</h2>
                    <p>가입하시면 편리하게 월드프린팅 서비스를 이용하실 수 있습니다.</p>
                    <button type="button" class="ty02 widthL signup">회원가입</button>
                </div>
                <!---------- SNS로그인 시작---------->
                <div class="sns-login">
                    <button type="button" class="ty03 btn-sns01 widthL" data-sns-id="naver_lholder"><i class="icon-sns01"></i>네이버 로그인</button>
<!--                    <button type="button" class="ty03 btn-sns02 widthL" data-sns-id="google"><i class="icon-sns02"></i>카카오 로그인</button>-->
                    <button type="button" class="ty03 btn-sns02 widthL" data-sns-id="kakao_lholder"><i class="icon-sns02"></i>카카오 로그인</button>
                </div><!---------- SNS로그인 끝---------->
            </div>
            <!---------- 풋터 시작---------->
            <footer>
                <div class="footer-inbox">
                    <div class="footer-custom">
                        <div class="copyright">
                            <p>11416 경기도 양주시 광적면 부흥로 847, 양주테크노시티 513호</p>
                            <p>COPYRIGHT 엘마스타. ALL RIGHT RESERVERED.</p>
                        </div>
                        <ul>
                            <li>고객지원센터 <strong>031-871-7780</strong></li>
                            <li><span>평일:AM10:00~PM18:00(점심12:00~13:00)</span><span>토요일 일요일(공휴일) 휴무</span></li>
                        </ul>
                    </div>
                </div>
            </footer> <!---------- 풋터 끝---------->
        </section>

        <script>
            const errMsg = null;

            if(errMsg && errMsg.length != 0) {
                alert(errMsg);
            }

            document.querySelectorAll('.sns-login button')
                .forEach(ele => {
                    ele.addEventListener('click', (e) => {
                        e.preventDefault();
                        e.stopPropagation();

                        location.href = `/oauth2/authorization/${e.currentTarget.dataset.snsId}`;
                    });
                });

            document
                .querySelector('button.signup')
                .addEventListener('click', e => {
                    location.href = "/signup";
                });

        </script>
    </body>
</html>