<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      xmlns:halo="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${singlePage.spec.title}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/guestbook.css}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" th:content="${(singlePage.spec.title ?: '留言板') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta property="og:description" content="来几句走心的评论吧，留下你的足迹" />
  <meta name="twitter:title" th:content="${(singlePage.spec.title ?: '留言板') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta name="twitter:description" content="来几句走心的评论吧，留下你的足迹" />
  <script th:inline="javascript">
    window.__GUESTBOOK_PAGE_NAME__ = /*[[${singlePage.metadata.name}]]*/ '';
  </script>
  <script th:src="@{/assets/js/guestbook.js}" defer></script>
</th:block>
<th:block th:fragment="content">
  <main class="main">
    <div class="container">
      <section class="guestbook-page">
        <div class="guestbook-header" data-aos="fade-up">
          <h1 class="guestbook-title" th:text="${(theme.config.watermark?.guestbook?.enabled == true ? theme.config.watermark.guestbook.title : null) ?: (singlePage.spec.title ?: '留言板')}">留言板</h1>
          <p class="guestbook-subtitle" th:text="${(theme.config.watermark?.guestbook?.enabled == true ? theme.config.watermark.guestbook.subtitle : null) ?: '来几句走心的评论吧，留下你的足迹'}">来几句走心的评论吧，留下你的足迹</p>
          <div class="guestbook-stats">
            <div class="guestbook-stat">
              <span class="guestbook-stat-num" id="guestbookCount">0</span>
              <span class="guestbook-stat-label">条留言</span>
            </div>
            <div class="guestbook-stat">
              <span class="guestbook-stat-num">365</span>
              <span class="guestbook-stat-label">天记录</span>
            </div>
          </div>
        </div>

        <div class="danmaku-container" id="danmakuContainer" data-aos="zoom-in" data-aos-delay="100">
          <th:block th:replace="~{modules/watermark :: watermark('danmaku-watermark')}" />
          <div class="danmaku-canvas" id="danmakuCanvas">
          </div>
          <div class="danmaku-hint" id="danmakuHint">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
            <span>留言将以弹幕形式飘过~</span>
          </div>
        </div>

        <div class="guestbook-comments" data-aos="fade-up" data-aos-delay="200">
          <div class="comments-header">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
            </svg>
            <h2 class="comments-title">留言板</h2>
            <span class="comments-subtitle">说点什么吧</span>
            <span class="comments-count" id="guestbookCountText">共 0 条</span>
          </div>
          
          <halo:comment 
            group="content.halo.run"
            kind="SinglePage"
            th:attr="name=${singlePage.metadata.name}"
            colorScheme="auto" />
        </div>
      </section>
    </div>
  </main>

</th:block>
</html>
