<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
    th:with="theme=${CookieUtils.getCookieValue(request, 'theme')}"
    th:class="${#arrays.contains({'dark', 'bright', 'auto'}, theme) ? theme : 'auto'}">
<head th:replace="~{blog/bleaching/tweet/header::head-fragment}"></head>
<link rel="stylesheet" th:href="@{/blog/bleaching/css/comment.css}">
<body th:with="
        isLogin = ${SessionUtils.isLogin(request)},
        isLock=${!PostPassJar.validFromSession(request.session, post)}">
    <div class="side-click-mask"></div>
    <div th:replace="~{blog/bleaching/tweet/header::header}"></div>
    <div class="move-block">
        <div class="main-and-side">
            <main>
                <article th:class="${isLock}?'post post-page post-lock':'post post-page'" th:attr="post-id=${post.postId}">
                    <header>
                        <date class="post-date"
                              th:text="${#temporals.format(post.createTime, 'MMMM d, yyyy', T(java.util.Locale).ENGLISH)}">
                        </date>
                        <h2 class="post-title">
                            <a title="返回说说列表" th:href="@{${'/posts/gotoPage/' + post.postId}}">
                                [[${(!isLock ? '#' : '加密说说 ') + post.postId}]]
                            </a>
                            <a th:if="${!isLock and PostPassJar.containsInSession(request.session, post)}"
                               th:href="@{${post.link + '/lock'}}" title="该说说是加密说说，点击上锁"><i class="post-icon icon-unlocked"></i></a>
                        </h2>
                    </header>
                    <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="text" onclick="this.type='password'" autocomplete="off" 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>
                    <th:block th:if="${post.type!=PostTypeEnum.PAGE}" th:with="
                    prevPost=${@tweetService.getPrevious(post.postId)},
                    nextPost=${@tweetService.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 
                                    th:classappend="'macaron-tag-' + ${i.index % 8}"
                                    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">
                                <b>Prev:</b>
                                <th:block th:if="${prevPost==null}">None</th:block>
                                <a th:if="${prevPost!=null}" 
                                   th:with="locked=${!PostPassJar.validFromSession(request.session, prevPost)}"
                                   th:href="${prevPost.link}" 
                                   th:attr="title=${#temporals.format(prevPost.createTime, 'yyyy-MM-dd HH:mm:ss')}"
                                   th:text="${!locked?('#' + prevPost.postId):('加密说说 ' + prevPost.postId)}"></a>
                            </div>
                            <div class="post-next">
                                <b>Next:</b>
                                <th:block th:if="${nextPost==null}">None</th:block>
                                <a th:if="${nextPost!=null}" 
                                   th:with="locked=${!PostPassJar.validFromSession(request.session, nextPost)}"
                                   th:href="${nextPost.link}"
                                   th:attr="title=${#temporals.format(nextPost.createTime, 'yyyy-MM-dd HH:mm:ss')}"
                                   th:text="${!locked?('#' + nextPost.postId):('加密说说 ' + nextPost.postId)}"></a>
                            </div>
                        </div>
                    </th:block>
                </article>
                <div class="comment-area" th:attr="post-id=${post.postId}" th:if="${!isLock}">
                    <hr class="comment-hr">
                    <div id="comment-page" class="comment-page" th:insert="~{blog/bleaching/comment-only}"></div>
                    <comment th:replace="~{blog/bleaching/comment::reply-comment}"></comment>
                </div>
                <footer th:replace="~{blog/bleaching/footer::footer}"></footer>
            </main>
            <div th:replace="~{blog/bleaching/header::sidebar-container}"></div>
        </div>
    </div>
    <script defer th:src="@{/blog/bleaching/js/menu.js}"></script>
    <script async th:if="${isLock}" th:src="@{/blog/plugins/js-sha3/sha3.min.js}"></script>
    <script defer th:src="@{/blog/bleaching/js/post.js}"></script>
    <script defer th:src="@{/blog/bleaching/js/comment.js}"></script>
</body>
</html>