<!DOCTYPE html>
<html th:replace="~{layout/layout.html :: layout(~{::head}, ~{::section})}"
      lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,  user-scalable = no, initial-scale=1.0"/>
    <title>Jinia's LOG - 로그인</title>
    <!-- SEO -->
    <meta name="description" content="비전공 출신, 개발자 지망생의 공부 내용을 기록하는 블로그입니다."/>
    <meta name="keyword" content="개발, 테크, IT, 코딩, 알고리즘, 쥬니어, 개발자, 포트폴리오, 블로그, CS, 컴공지식, 컴공, 프로그래밍, 프로그래밍 언어, 비전공, 코딩 테스트, 취업, 취준"/>
    <meta name="author" content="Jinia"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <link rel="icon" href="/img/favicon-16x16.png"/>
    <link rel="apple-touch-icon" href="/img/favicon-16x16.png"/>
    <link rel="icon" type="image/png" sizes="16x16"  href="/img/favicon-16x16.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- CSS RESET -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
    <link rel="stylesheet" th:href="@{/node_modules/bootstrap/dist/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/mainCss.css?ver=1.1}"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>

    <script src="https://kit.fontawesome.com/233840a552.js" crossorigin="anonymous"></script>
</head>

<body>

<section class="login-section">

    <div class=""></div>

    <div class="card container login-box">
        <P class="text-center alert" id="capsAlert" th:text="${errMsg}">로그인 오류</P>
        <div class="d-flex flex-column card-body align-items-center justify-content-center">
            <h5>
                SNS 간편 가입/로그인
            </h5>

            <hr/>

            <div class="col m-2">
                <a href="/oauth2/authorization/google">
                    <button class="btnCtm btn-google">구글 로그인</button>
                </a>
            </div>

            <div class="col m-2">
                <a href="/oauth2/authorization/naver">
                    <button class="btnCtm btn-naver">네이버 로그인<div>(검토중)</div></button>
                </a>
            </div>
        </div>
    </div>

    <script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>

</section>

</body>
</html>