<!doctype html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(content = ~{::content}, showAside = ${theme.config.custom.enable_page_toc != false and #annotations.getOrDefault(singlePage, 'toc', 'false') == 'true'}, pageTitle = null, head = ~{::head})}"
>
  <th:block th:fragment="content">
    <div
      class="post-header"
      th:classappend="${(singlePage.spec.cover != null and singlePage.spec.cover != '' ? 'has-cover ' : '') + (theme.config.post.center_title ? 'center-title' : '')}"
    >
      <img
        th:if="${singlePage.spec.cover != null and singlePage.spec.cover  != ''}"
        th:src="${singlePage.spec.cover}"
        class="post-cover"
        th:alt="${singlePage.spec.title}"
      />

      <div class="post-nav">
        <div class="operations">
          <button class="z-btn" id="share-btn" title="复制分享文本">
            <span class="icon-[ph--share-bold]"></span>
            <span>文字分享</span>
          </button>
        </div>

        <div class="post-info">
          <th:block th:replace="~{modules/author-capsule :: capsule(author=${singlePage.owner})}" />

          <span th:if="${singlePage.spec.publishTime}">
            <span class="icon-[ph--calendar-dots-bold]"></span>
            <time th:text="${#temporals.format(singlePage.spec.publishTime, 'yyyy-MM-dd')}"></time>
          </span>

          <span th:if="${singlePage.stats.comment != null}">
            <span class="icon-[ph--chat-circle-dots-bold]"></span>
            <span th:text="${singlePage.stats.comment}"></span> 评论
          </span>

          <span th:if="${singlePage.stats.visit != null}">
            <span class="icon-[ph--eye-bold]"></span>
            <span th:text="${singlePage.stats.visit}"></span> 阅读
          </span>
        </div>
      </div>

      <h1 class="post-title text-creative" th:text="${singlePage.spec.title}"></h1>
    </div>

    <article class="article" th:utext="${singlePage.content.content}"></article>

    <th:block
      th:replace="~{modules/common/comment :: comment(title='评论区', haloComment=${ {group: 'content.halo.run', kind: 'SinglePage', name: singlePage.metadata.name} })}"
    ></th:block>
    <button
      id="edit-page-btn"
      class="edit-page-btn"
      th:if="${theme.config.custom.enable_edit and #authentication != null and #authentication.authenticated and #authentication.name == singlePage.owner.name}"
      th:data-url="@{/console/single-pages/editor(name=${singlePage.metadata.name}, returnToView=true)}"
      title="编辑页面"
    >
      <span class="icon-[ph--pencil-bold]"></span>
    </button>
    <script th:inline="javascript">
      (function () {
        const shareBtn = document.getElementById("share-btn");
        if (shareBtn) {
          const title = /*[[${singlePage.spec.title}]]*/ "";
          const url = window.location.href;
          const siteTitle = /*[[${site.title}]]*/ "";

          const shareText = `【${siteTitle}】${title}\n\n${url}`;

          shareBtn.addEventListener("click", async () => {
            try {
              await navigator.clipboard.writeText(shareText);
              const icon = shareBtn.querySelector("span:first-child");
              const text = shareBtn.querySelector("span:last-child");
              icon.className = "icon-[ph--check-bold]";
              text.textContent = "已复制";
              setTimeout(() => {
                icon.className = "icon-[ph--share-bold]";
                text.textContent = "文字分享";
              }, 2000);
            } catch (err) {
              console.error("复制失败:", err);
            }
          });
        }

        const editPageBtn = document.getElementById("edit-page-btn");
        if (editPageBtn) {
          editPageBtn.addEventListener("click", () => {
            const editUrl = editPageBtn.dataset.url;
            if (editUrl) {
              window.location.href = editUrl;
            }
          });
        }
      })();
    </script>
  </th:block>
</html>
