<!DOCTYPE html>
<html lang="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">
<head>
  <base th:href="@{/}" />
  <title th:text="${pageTitle ?: 'Bum''s'}">Bum's</title>

  <th:block th:replace="~{fragments/includes :: includes}"></th:block>

  <th:block layout:fragment="head"></th:block>

  <script th:inline="javascript" sec:authorize="isAuthenticated()">
    window.currentUser = { isLoggedIn: true, username: /*[[${#authentication.principal.username}]]*/ 'user' };
  </script>
  <script th:inline="javascript" sec:authorize="isAnonymous()">
    window.currentUser = { isLoggedIn: false, username: null };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</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>
  <th:block layout:fragment="popup_layer"></th:block>

  <div id="loginPopup" class="pop_layer">
    <div class="pop_container">
      <div class="pop_conts">
        <h2>로그인</h2>
        <form id="loginFormElement">
          <input type="text" id="loginId" placeholder="아이디" required/>
          <input type="password" id="loginPassword" placeholder="비밀번호" required/>
          <div style="margin: 10px 0;">
            <input type="checkbox" id="rememberMe" class="custom-checkbox"/>
            <label for="rememberMe" style="display:inline;">자동로그인</label>
          </div>
          <button type="submit" class="button fit">로그인</button>
          <button type="button" class="button alt fit" id="openSignupBtnFromLogin" style="margin-top:10px;">회원가입</button>
        </form>
        <div class="btn_r">
          <a href="#" class="btn_layerClose">닫기</a>
        </div>
      </div>
    </div>
  </div>

  <div id="unified-game-success-modal" class="pop_layer">
    <div class="pop_container">
      <div class="pop_conts">
        <h2 id="ugsm-title">🎉 성공! 🎉</h2>
        <p id="ugsm-message" style="font-size: 1.2em; margin: 15px 0;">성공 메시지</p>
        <div class="ranking-preview">
          <h4>🏆 현재 랭킹</h4>
          <ul id="ugsm-ranking-list"><li>로딩 중...</li></ul>
        </div>
        <div id="ugsm-guest-ranking">
          <input type="text" id="ugsm-player-name" placeholder="이름을 입력하세요">
          <button id="ugsm-save-score-btn" class="button primary fit">점수 저장</button>
        </div>
        <div id="ugsm-user-ranking" style="display:none; text-align: center; color: green; font-weight: bold;">
          로그인 계정으로 기록되었습니다.
        </div>
        <div class="btn_r">
          <a href="#" class="btn_layerClose">닫기</a>
        </div>
      </div>
    </div>
  </div>

  <th:block th:replace="~{fragments/footer :: footer}"></th:block>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.dropotron.min.js}"></script>
<script th:src="@{/js/browser.min.js}"></script>
<script th:src="@{/js/breakpoints.min.js}"></script>
<script th:src="@{/js/template.js}"></script>

<script type="module" th:src="@{/js/common.js}"></script>

</body>
</html>