<!DOCTYPE html>
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'post')}"
      xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="content">
    <div class="post" id="body-wrap">

        <header class="post-bg" id="page-header">
            <nav th:replace="~{modules/nav :: nav(title = ${post.spec.title})}"></nav>
            <div class="coverdiv loaded" id="coverdiv">
                <img alt="cover" class="nolazyload" id="post-cover"
                     th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.postRandomImg : post.spec.cover}">
            </div>

            <div id="post-info">
                <div id="post-firstinfo">
                    <div class="meta-firstline">
                        <!-- 这里要跳转到版权页 -->
                        <!--<a class="post-meta-original" th:href="@{/cc}" title="该文章为原创文章，注意版权协议">原创</a>-->
                        <span class="post-meta-categories" th:each="category : ${post.categories}"
                              th:if="${not #lists.isEmpty(post.categories)}">
                            <a class="post-meta-categories" th:href="@{${category.status.permalink}}"
                               th:text="${category.spec.displayName}" th:title="${category.spec.displayName}">
                            </a>
                        </span>
                        <div class="tag_share" th:if="${not #lists.isEmpty(post.tags)}">
                            <div class="post-meta__tag-list">
                                <a class="post-meta__tags" th:each="tag : ${post.tags}"
                                   th:href="@{${tag.status.permalink}}"
                                   th:title="${tag.spec.displayName}">
                                    <span class="tags-name tags-punctuation">[[${tag.spec.displayName}]]</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <h1 class="post-title" th:text="${post.spec.title}"></h1>
                <div id="post-meta">
                    <div class="meta-secondline">
                        <span class="post-meta-date">
                            <i class="iconfont icon-calendar-alt post-meta-icon"></i>
                            <time th:attr="datetime=${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
                                  th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
                                  th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
                            </time>
                        </span>

                        <span class="post-meta-wordcount"
                              th:with="wordCount = ${#strings.length(post.content.content)}">
                            <i class="iconfont icon-file-word post-meta-icon" title="字数"></i>
                            <span class="post-meta-label">字数:</span>
                            <span class="word-count" th:text="${{wordCount}}"></span>
                            <span class="post-meta-separator"></span>
                            <i class="iconfont icon-clock post-meta-icon" title="阅读耗时"></i>
                            <span class="post-meta-label">阅读耗时:</span>
                            <span>[[${wordCount / 400}]] 分钟</span>
                        </span>

                        <!--<span class="post-meta-wechat" title="该文章已在公众号中更新"><i-->
                        <!--        class="fab fa-weixin post-meta-icon"></i>公众号同步</span>-->
                        <span class="post-meta-pv" data-flag-title="热度">
                            <i class="iconfont icon-hotjar post-meta-icon"></i>
                            <span class="post-meta-label">热度:</span>
                            <span id="visit" th:text="${post.stats.visit}"></span>
                        </span>
                        <span th:if="${post.spec.allowComment}" class="post-meta-commentcount" onclick="heo.scrollTo('#post-comment');" title="评论数">
                            <i class="iconfont icon-comment-alt"></i>
                            <span class="post-meta-label">评论:</span>
                            <a th:if="${#strings.equals(theme.config.comments.use, 'commentWidget')}"
                               href="#post-comment"><span id="comment-count"
                                                          th:text="${post.stats.comment}"></span></a>

                            <a th:if="${#strings.equals(theme.config.comments.use, 'Twikoo')}" href="#post-comment">
                                <span id="twikoo-count"></span></a>
                        </span>
                    </div>

                </div>
            </div>
            <section class="main-hero-waves-area waves-area">
                <svg class="waves-svg" preserveAspectRatio="none" shape-rendering="auto" viewBox="0 24 150 28"
                     xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <path
                                d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"
                                id="gentle-wave"></path>
                    </defs>
                    <g class="parallax">
                        <use href="#gentle-wave" x="48" y="0"></use>
                        <use href="#gentle-wave" x="48" y="3"></use>
                        <use href="#gentle-wave" x="48" y="5"></use>
                        <use href="#gentle-wave" x="48" y="7"></use>
                    </g>
                </svg>
            </section>
        </header>
        <main class="layout" id="content-inner" th:classappend="${theme.config.sidebar.location}">
            <div id="post">


                <!-- 文章ai摘要 -->
                <div class="post-ai" th:if="${theme.config.post.aiDescription.aiDescriptionEnable}">
                    <div class="ai-title"><i class="haofont hao-icon-bilibili"></i>
                        <div class="ai-title-text">AI-摘要</div>
                        <div th:if="${theme.config.post.aiDescription.switchBtn}" id="ai-Toggle">切换</div>
                        <i class="haofont hao-icon-arrow-rotate-right"></i>

                        <div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'local')}" class="ai-tag" id="ai-tag">[[${theme.config.post.aiDescription.gptName}]] GPT</div>
                        <div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'tianli')}" class="ai-tag" id="ai-tag">Tianli GPT</div>
                    </div>
                    <div class="ai-explanation" style="display: block;">AI初始化中...</div>
                    <div class="ai-btn-box">
                        <div class="ai-btn-item">介绍自己</div>
                        <div class="ai-btn-item">生成本文简介</div>
                        <div class="ai-btn-item">推荐相关文章</div>
                        <div class="ai-btn-item">前往主页</div>
                        <div class="ai-btn-item" id="go-tianli-blog">前往tianli博客</div>
                    </div>
                </div>

                <!-- 文章内容 -->
                <article th:class="'post-content  '+${ theme.config.code.enable_line || pluginFinder.available('PluginPrismJS') ? 'line-numbers' : ''}" id="article-container" th:utext="${post.content.content}">
                </article>

                <!-- 文章ai摘要 -->
                <script  data-pjax th:if="${theme.config.post.aiDescription.aiDescriptionEnable}"
                         th:src="${assets_link + '/libs/gpt/post-ai.js'}"></script>

                <!-- 版权声明 -->
                <th:block th:replace="~{modules/post/copyright :: copyright}"></th:block>

                <nav class="pagination-post" id="pagination"
                     th:with="postCursor = ${postFinder.cursor(post.metadata.name)}">
                    <div th:class="${postCursor.hasPrevious()==true && postCursor.hasNext()==false} ? 'prev-post2 pull-left postcarnepre' : 'prev-post pull-left'">
                        <a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
                            <img alt="cover" id="preimg" class="nolazyload"
                                 th:src="${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}">
                            <div class="pagination-info">
                                <div class="label">上一篇</div>
                                <div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
                            </div>
                        </a>
                    </div>
                    <div th:class="${postCursor.hasPrevious()==false && postCursor.hasNext()==true} ? 'next-post2 pull-right postcarnepre':'next-post pull-right'">
                        <a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
                            <img alt="cover" id="preimg" class="nolazyload"
                                 th:src="${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}">
                            <div class="pagination-info">
                                <div class="label">下一篇</div>
                                <div class="next_info" th:text="${postCursor.next.spec.title}"></div>
                            </div>
                        </a>
                    </div>
                </nav>
                <div class="relatedPosts" th:if="${not #lists.isEmpty(post.categories)}">

                    <div class="headline">
                        <i class="iconfont icon-robot"></i>
                        <span>阅读建议</span>
                    </div>
                    <div class="relatedPosts-list"
                         th:with="recommandPosts = ${postFinder.listByCategory(1, theme.config.post.recommendQuantity, post.categories.get(0).metadata.name)}">
                        <!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
                        <div th:each="recommandPost :${recommandPosts}">
                            <a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
                                <img alt="cover" class="cover" loading="lazy" id="preimg"
                                     th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
                                <div class="content is-center" >
                                    <div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
                                        [[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]
                                    </div>
                                    <div class="title" style="color: white" th:text="${recommandPost.spec.title}"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <hr>
                <!--/* 评论组件 */-->
                <th:block
                        th:replace="~{modules/comment :: comment(group = 'content.halo.run',
                  kind = 'Post',
                  name = ${post.metadata.name},
                  allowComment = ${post.spec.allowComment})}"/>

            </div>

            <!-- 侧栏 -->
            <div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.postWidgets})}"></div>
        </main>

        <!-- 底部 -->
        <footer th:replace="~{modules/footer :: footer}"></footer>

    </div>

</th:block>

</html>
