<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{blog/sketch/header::head-fragment}"></head>
<link rel="stylesheet" th:href="@{/blog/sketch/css/comment.css}">
<body
  th:with="
        isLogin = ${SessionUtils.isLogin(request)},
        isLock=${!#strings.isEmpty(post.password) && !isLogin},
        passCookie = ${CookieUtils.getCookie(request, CookieUtils.PASSWORD_COOKIE)}
        ">
  <div class="side-click-mask"></div>
  <div class="move-block">
    <div th:replace="~{blog/sketch/header::header}"></div>
    <div th:replace="~{blog/sketch/header::burger}"></div>
    <div th:replace="~{blog/sketch/header::sidebar-container}"></div>

    <main>
      <article
        th:class="${isLock}?'post post-page post-lock':'post post-page'">
        <date class="post-date"
          th:text="${#temporals.format(post.createTime, 'MMMM d, yyyy', T(java.util.Locale).ENGLISH)}">
        </date>
        <header>
          <h2 class="post-title">
            <span th:if="${!isLock}" th:text="${post.postTitle}"></span>
            <span th:if="${isLock}" th:text="${'加密文章 ' + post.postId}"></span>
          </h2>
          <div th:if="${!isLock}" class="post-content"
            th:utext="${@markdownService.renderPostContent(post)}">
          </div>
          <div th:if="${isLock}" class="post-content">
            <div class="post-lock-input">
              <input th:attr="url=${post.link + '/password'}"
                type="password" placeholder="请输入密码访问该文章"><br />
              <div class="post-lock-btn-div">
                <button type="button" class="post-lock-btn"></button>
              </div>
              <span class="post-pass-error"></span>
            </div>
          </div>
        </header>
        <th:block
          th:if="${post.type!=PostTypeEnum.PAGE}"
          th:with="
                prevPost=${@postService.getPrevious(post.postId)},
                nextPost=${@postService.getNext(post.postId)}">
          <div class="post-meta" th:if="${!isLock}">
            <div
              th:with="categoriesFriendlyName=${post.categoriesFriendlyNamesEncoded},
                                     tagsFriendlyName = ${post.tagsFriendlyNamesEncoded}">
              <th:block
                th:if="${!#strings.isEmpty(post.categoriesName)}"
                th:each="cate, i : ${#strings.arraySplit(post.categoriesName, ',')}">
                <a class="cate" rel="cate"
                  th:href="@{'/category/' + ${categoriesFriendlyName[i.index]}}">
                  <th:block th:text="${cate}"></th:block>
                </a>
              </th:block>
              <th:block th:if="${!#strings.isEmpty(post.tagsName)}"
                th:each="tag, i : ${#strings.arraySplit(post.tagsName, ',')}">
                <a class="tag" rel="tag"
                  th:href="@{'/tag/' + ${tagsFriendlyName[i.index]}}">
                  <th:block th:text="${'#'+tag}"></th:block>
                </a>
              </th:block>
            </div>
          </div>
          <div class="post-nav">
            <div class="post-prev">
              Prev: <span th:if="${prevPost==null}">None</span> <a
                th:if="${prevPost!=null}"
                th:with="locked=${
                                   !#strings.isEmpty(prevPost.password) &&
                                   !isLogin &&
                                    (passCookie == null || !CookieUtils.checkPassCookie(passCookie, prevPost, null))
                                }"
                th:href="${prevPost.link}"
                th:text="${!locked?prevPost.postTitle:('加密文章 ' + prevPost.postId)}"></a>
            </div>
            <div class="post-next">
              Next: <span th:if="${nextPost==null}">None</span> <a
                th:if="${nextPost!=null}"
                th:with="locked=${
                                    !#strings.isEmpty(nextPost.password) && 
                                    !isLogin &&
                                    (passCookie == null || !CookieUtils.checkPassCookie(passCookie, nextPost, null))
                                }"
                th:href="${nextPost.link}"
                th:text="${!locked?nextPost.postTitle:('加密文章 ' + nextPost.postId)}"></a>
            </div>
          </div>
        </th:block>
      </article>
      <th:block th:if="${!isLock}">
        <div id="comment-page" class="comment-page"
          th:insert="~{blog/sketch/comment-only}"></div>
        <comment th:replace="~{blog/sketch/comment::reply-comment}"></comment>
      </th:block>
    </main>
    <footer th:replace="~{blog/sketch/footer::footer}"></footer>
  </div>
  <script th:src="@{/blog/sketch/js/menu.js}"></script>
  <script async th:if="${isLock}"
    th:src="@{/blog/plugins/js-sha3/sha3.min.js}"></script>
  <script defer th:src="@{/blog/sketch/js/post.js}"></script>
  <script defer th:src="@{/blog/sketch/js/comment.js}"></script>
</body>
</html>