<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = ${singlePage.spec.title} + ' - ' + ${site.title}, hero = ~{::hero}, content = ~{::content}, head = null, footer = ~{::footer}, sidebar = null, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(singlePage.spec.cover)} ? '!-mt-20' : '')}"
>
  <th:block th:fragment="hero">
    <th:block
      th:replace="~{modules/hero :: hero(isHome = false, cover = ${singlePage.spec.cover}, title = ${singlePage.spec.title})}"
    />
  </th:block>
  <th:block th:fragment="content">
    <div class="rounded-xl bg-white p-4 dark:bg-slate-800">
      <div class="flex items-center justify-between">
        <div class="inline-flex items-center justify-start gap-2">
          <a th:href="@{${singlePage.owner.permalink}}" th:title="${singlePage.owner.displayName}">
            <img
              th:if="${not #strings.isEmpty(singlePage.owner.avatar)}"
              th:src="${singlePage.owner.avatar}"
              th:alt="${singlePage.owner.displayName}"
              class="h-10 w-10 rounded-full"
            />
          </a>
          <div class="flex flex-col gap-0.5">
            <a
              th:href="@{${singlePage.owner.permalink}}"
              class="text-sm font-semibold text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-200"
              th:text="${singlePage.owner.displayName}"
              th:title="${singlePage.owner.displayName}"
            ></a>
            <div class="flex items-center gap-2 text-xs font-light text-gray-600 dark:text-slate-100">
              <span th:text="|发布于 ${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}|"></span>
              <span class="text-gray-300 dark:text-slate-200">/</span>
              <span th:text="|${singlePage.stats?.visit ?:0} 阅读|"></span>
              <span class="text-gray-300 dark:text-slate-200">/</span>
              <span th:text="|${singlePage.stats?.comment ?:0} 评论|"> </span>
              <span class="text-gray-300 dark:text-slate-200">/</span>
              <span th:text="|${singlePage.stats?.upvote ?:0} 点赞|"> </span>
            </div>
          </div>
        </div>
        <div class="inline-flex flex-row gap-1">
          <div th:if="${false}" class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600">
            <div class="i-tabler-heart text-lg text-gray-600 hover:text-red-600 dark:text-slate-100"></div>
          </div>
          <a
            th:if="${pluginFinder.available('PluginCommentWidget')} and ${singlePage.spec.allowComment} and ${site.comment.enable}"
            href="#comment"
            class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600"
          >
            <div
              class="i-tabler-message-circle text-lg text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-50"
            ></div>
          </a>
          <div th:if="${false}" class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600">
            <div
              class="i-tabler-share text-lg text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-50"
            ></div>
          </div>
        </div>
      </div>
      <h1 class="my-3 text-2xl font-medium dark:text-slate-50" th:text="${singlePage.spec.title}"></h1>
      <article
        class="prose prose-base mt-4 !max-w-none break-words dark:prose-invert"
        th:utext="${singlePage.content.content}"
      ></article>
      <hr class="my-10 dark:border-slate-700" />
      <!-- https://github.com/halo-sigs/plugin-comment-widget -->
      <div
        th:if="${pluginFinder.available('PluginCommentWidget')} and ${singlePage.spec.allowComment} and ${site.comment.enable}"
      >
        <h2 class="mb-2 text-base font-medium text-gray-900 dark:text-slate-50">评论</h2>
        <halo:comment
          group="content.halo.run"
          kind="SinglePage"
          th:attr="name=${singlePage.metadata.name}"
          colorScheme="window.main.currentColorScheme"
        />
      </div>
    </div>

    <a
      sec:authorize="isAuthenticated()"
      th:href="|/console/single-pages/editor?name=${singlePage.metadata.name}&returnToView=true|"
      id="edit-button"
      class="fixed bottom-10 right-10 flex h-14 w-14 items-center justify-center rounded-full bg-[#4CCBA0] text-white shadow transition-all duration-300 hover:opacity-80 hover:shadow-lg"
    >
      <div class="i-tabler-edit !h-7 !w-7"></div>
    </a>
  </th:block>
</html>
