<th:block xmlns:th="https://www.thymeleaf.org"
     th:fragment="article (post, type)"
     th:with="updateInterval = ${T(java.lang.Math).floor((#dates.createNow().getTime()/1000.0 - post.status.lastModifyTime.getEpochSecond())/86400.0).intValue()},
     isPost = ${type == 'Post'},
     skillUrl = ${theme.config.basic_style.expand_login_skill},
     thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'xl')}">

    <div th:if="${!#strings.isEmpty(thumbnail)}" class="card widget">
        <div class="cover-image" th:style="'background-image: url(' + ${thumbnail} + ')'">
            <div th:if="${isPost && !#lists.isEmpty(post.categories)}" class="category">
                <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}"
                   th:text="${cy.spec.displayName}"></a>&nbsp;
            </div>
            <div class="details">
                <h1 class="title" th:text="${post.spec.title}"></h1>
                <ul class="breadcrumb">
                    <li th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"></li>
                    <li><i class="ri-eye-line"></i>[[${post.stats.visit}]]</li>
                    <li th:if="${post.spec.allowComment}" class="is-hidden-mobile"><i class="ri-question-answer-line"></i>[[${post.stats.comment}]]
                    </li>
                    <li><i class="ri-thumb-up-line"></i>[[${post.stats.upvote}]]</li>
                    <li><i class="ri-quill-pen-line"></i>[[${#strings.length(#strings.trim(post.content.content))}]]</li>
                    <li th:if="${logonUserName == post.spec.owner && (skillUrl == 'console' || (skillUrl == 'uc' && isPost))}" class="is-hidden-laptop">
                        <a target="_blank" title="编辑文章" th:href="@{|/${skillUrl}/${isPost ? 'posts' : 'single-pages'}/editor?name=${post.metadata.name}|}"><i class="ri-edit-2-line"></i>编辑</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div th:if="${!#strings.isEmpty(theme.config.post.invalid_tips_day) && updateInterval > T(java.lang.Long).parseLong(theme.config.post.invalid_tips_day)}"
         class="card tips brightness"><i class="ri-close-line click-close" data-close=".tips"></i>本文最后更新于
        [[${#dates.format(post.status.lastModifyTime,'yyyy-MM-dd')}]]，距今已有 [[${updateInterval}]]
        天，若文章内容或图片链接失效，请留言反馈。
    </div>

    <div th:if="${!#strings.isEmpty(post.metadata.annotations.get('tips'))}" class="card tips brightness"><i
      class="ri-close-line click-close" data-close=".tips"></i>[[${post.metadata.annotations.tips}]]
    </div>

    <div class="card">
        <div class="card-content main">
            <th:block th:if="${#strings.isEmpty(thumbnail)}">
                <h1 class="title" th:text="${post.spec.title}"></h1>
                <div class="meta">
                    <ul class="breadcrumb">
                        <li th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"></li>
                        <li><i class="ri-eye-line"></i>[[${post.stats.visit}]]</li>
                        <li th:if="${post.spec.allowComment}" class="is-hidden-mobile"><i class="ri-question-answer-line"></i>[[${post.stats.comment}]]
                        </li>
                        <li><i class="ri-thumb-up-line"></i>[[${post.stats.upvote}]]</li>
                        <li><i class="ri-quill-pen-line"></i>[[${#strings.length(#strings.trim(post.content.content))}]]</li>
                        <li th:if="${logonUserName == post.spec.owner && (skillUrl == 'console' || (skillUrl == 'uc' && isPost))}" class="is-hidden-laptop">
                            <a target="_blank" title="编辑文章"  th:href="@{|/${skillUrl}/${isPost ? 'posts' : 'single-pages'}/editor?name=${post.metadata.name}|}"><i class="ri-edit-2-line"></i>编辑</a></li>
                    </ul>
                    <div th:if="${isPost && !#lists.isEmpty(post.categories)}" class="level-item">
                        <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}"
                           th:text="${cy.spec.displayName}"></a>&nbsp;
                    </div>
                </div>
                <hr/>
            </th:block>

            <div th:data-id="${post.metadata.name}" th:data-target="${type}" class="main-content article"
                 th:utext="${post.content.content}">
            </div>

            <th:block th:replace="~{main/admire}"/>

            <div th:if="${isPost && !#lists.isEmpty(post.tags)}" class="article-operation">
                <div class="level-item">
                    <a th:each=" tag : ${post.tags}" th:href="${tag.status.permalink}"
                       th:text="${tag.spec.displayName}"></a>&nbsp;
                </div>
            </div>
            <th:bolck th:if="${enableCopyright || enableShare}">
                <hr/>
                <th:block th:if="${enableCopyright}">
                    <th:block th:replace="~{main/copyright}"/>
                </th:block>
                <div th:if="${enableShare}" class="dshare"></div>
            </th:bolck>
        </div>
    </div>

    <th:block th:if="${isPost}" th:with="postCursor = ${postFinder.cursor(post.metadata.name)}">
        <div th:if="${postCursor.hasPrevious() || postCursor.hasNext()}" class="card">
            <div class="level post-navigation card-content">
                <a th:if="${postCursor.hasPrevious()}" class="level-item"
                   th:href="@{${postCursor.previous.status.permalink}}">
                    <i class="ri-arrow-left-s-line"></i><span th:text="${postCursor.previous.spec.title}"></span>
                </a>
                <a th:if="${postCursor.hasNext()}" class="level-item" th:href="@{${postCursor.next.status.permalink}}">
                    <span th:text="${postCursor.next.spec.title}"></span><i class="ri-arrow-right-s-line"></i>
                </a>
            </div>
        </div>
    </th:block>

    <div class="card card-content comment-wrapper-z-index" id="comment-wrapper" th:if="${enableComment}">
        <h3 class="comment-title">评论</h3>
        <halo:comment
                group="content.halo.run"
                th:kind="${type}"
                th:attr="name=${post.metadata.name}"
        />
    </div>
</th:block>