<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
>
  <th:block th:fragment="content">
    <div class="post" x-data="postLineNum" x-init="init()">
      <!-- 目录组件 -->
      <div class="post-toc" x-data="postToc" x-init="init()">
        <div class="toc-header">
          <span class="toc-header__icon">&lt;&gt;</span>
          <span class="toc-header__title">Outline</span>
        </div>
        <ul class="toc-tree">
          <template x-for="(item, index) in items" :key="index">
            <li class="toc-item"
                :class="{'toc-item--active': activeId === item.id}"
                :style="`padding-left: ${getIndent(item.level)}`"
                @click="scrollTo(item.id)">
              <span class="toc-item__toggle toc-item__toggle--empty">▼</span>
              <span class="toc-item__icon">&lt;&gt;</span>
              <span class="toc-item__tag" x-text="item.tagName"></span>
              <span class="toc-item__title" x-text="item.title"></span>
            </li>
          </template>
        </ul>
      </div>
      <h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
      <div class="post-meta">
        <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
        <span class="post-separator">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </span>
        <span class="post-author" th:text="${post.owner.displayName}">Author</span>
      </div>
      <span class="post-tags-inline" th:each="tag : ${post.tags}">
        <a
          th:href="${tag.status.permalink}"
          th:title="${tag.spec.displayName}"
          th:text="'#'+${tag.spec.displayName}"
          class="post-tag"
          >#Tag</a
        >
      </span>
      <div class="post-body">
        <!-- 行数组件 -->
        <div class="post-line-gutter"></div>
        <div class="post-content">
          <div th:utext="${post.content.content}">Post Content</div>
        </div>
      </div>
    </div>
    <div class="comment-wrap" th:if="${haloCommentEnabled}">
      <h2>评论</h2>
      <halo:comment
        group="content.halo.run"
        kind="Post"
        th:attr="name=${post.metadata.name}"
      />
    </div>
    <div class="pagination">
      <div class="pagination__title">
        <span class="pagination__title-h">其他文章</span>
        <hr />
      </div>
      <div class="pagination__buttons" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
        <span th:if="${postCursor.hasPrevious()}" class="button previous">
          <a th:href="${postCursor.previous?.status?.permalink}">
            <span class="button__icon"><&nbsp;</span>
            <span class="button__text" th:text="${postCursor.previous?.spec?.title}">prevPost</span>
          </a>
        </span>
        <span th:if="${postCursor.hasNext()}" class="button next">
          <a th:href="${postCursor.next?.status?.permalink}">
            <span class="button__text" th:text="${postCursor.next?.spec?.title}">nextPost</span>
            <span class="button__icon">&nbsp;></span>
          </a>
        </span>
      </div>
    </div>
  </th:block>
</html>
