<!DOCTYPE html>
<html lagn="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns="http://www.w3.org/1999/html">
<head>
  <base th:href="@{/}" />
  <th:block th:replace="~{fragments/includes :: includes}"></th:block>
  <th:block layout:fragment="head"></th:block>
  <th:block th:replace="~{fragments/title :: title}"></th:block>
</head>
<body class="is-preload">
<div id="page-wrapper">
  <th:block  th:replace="~{fragments/header :: header}"></th:block>
  <th:block layout:fragment="content"></th:block>
  <div class="dim_layer">
    <div class="dimBg"></div>
    <th:block layout:fragment="popup_layer"></th:block>
  </div>
  <th:block th:replace="~{fragments/footer :: footer}"></th:block>
</div>
<div id="overlay" class="login_overlay">
  <style>
    .custom-checkbox {
      display: none; /* 실제 체크박스 숨김 */
    }

    .custom-label {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #555;
      cursor: pointer;
      vertical-align: middle;
      position: relative;
    }

    .custom-checkbox:checked + .custom-label {
      background-color: #007bff;
      border-color: #007bff;
    }

    .custom-checkbox:checked + .custom-label::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 7px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
  </style>
  <div id="popup" class="login_popup">
    <div id="loginForm" class="login_form">
      <h2>로그인</h2>
      <form id="loginFormElement" onsubmit="return false;">
        <input type="text" th:data="${enc}" id="loginId" placeholder="아이디" required/>
        <input type="password" th:data="${type}" id="loginPassword" placeholder="비밀번호" required/>
        <input type="checkbox" id="rememberMe" class="custom-checkbox"/>
        <label for="rememberMe" class="custom-label"></label>
        <span>자동로그인</span>
        <button type="submit" class="button">로그인</button>
      </form>
    </div>
    <div id="signupForm" class="login_form">
      <h2>회원가입</h2>
      <input type="text" placeholder="아이디" required>
      <input type="password" placeholder="비밀번호" required>
      <input type="email" placeholder="이메일" required>
      <button onclick="submitForm('signup')">가입하기</button>
    </div>
    <span class="login_close" onclick="closePopup()">&times;</span>
  </div>
</div>
<!-- Scripts -->
<script th:src="@{/assets/js/jquery.min.js}"></script>
<script th:src="@{/assets/js/jquery.dropotron.min.js}"></script>
<script th:src="@{/assets/js/browser.min.js}"></script>
<script th:src="@{/assets/js/breakpoints.min.js}"></script>
<script th:src="@{/assets/js/util.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

</body>
</html>