<th:block th:fragment="content-single" th:with="mu_on = ${#annotations.get(post, 'mu_on')},plays_id = ${#annotations.get(post, 'plays_id')},
  cover_img=${#strings.contains(theme.config.post.post_banner,'http') ? ((#strings.contains(theme.config.post.post_banner,'?') ? theme.config.post.post_banner : theme.config.post.post_banner+'?')+','+post.spec.title): theme.config.post.post_banner}
  ,_cover = ${not #strings.isEmpty(post.spec.cover) ? post.spec.cover : cover_img}">

    <div class="blog_header">

        <div th:if="${mu_on == 'true' && not #strings.isEmpty(plays_id)}" class="single_music_header">
            <div class="mu_img"><img class="round12 shadow lazy" src="/themes/theme-pix/assets/img/logo.webp" th:data-src="${_cover}" ></div>
            <div class="right_info">
                <h2 class="entry-title" th:text="${post.spec.title}"></h2>
                <div class="header_meta">
                    <span class="single_time">
                        <i class="ri-time-line"></i>
                        <time itemprop="datePublished" th:datetime="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}">
                            <th:block th:replace="~{modules/widgets/time :: time(${post.spec.publishTime})}"></th:block>
                        </time>
                    </span>
                    <span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span>
                    <span class="edit_post" th:if="${roleName == 'super-role'}">
                        <a th:href="${'/console/posts/editor?name='+post.metadata.name+'&returnToView=true'}"
                            target="_self">
                            <i class="ri-edit-line"></i>编辑</a>
                    </span>
                </div>
                
                <div class="single-content_header">
                    <span class="single_cat">
                        <ul class="post-categories">
                            <li th:each="category : ${post.categories}">
                                <a th:href="@{${category.status.permalink}}" th:text="${category.spec.displayName}"
                                    th:title="${category.spec.displayName}" rel="category tag"></a>
                            </li>
                        </ul>
                    </span>
                </div>

                <div class="mu_des"><th:block th:utext="${#annotations.get(post, 'mu_des')}"></th:block></div>
            </div>
        </div>


        <div th:unless="${mu_on == 'true' && not #strings.isEmpty(plays_id)}" class="post_header">
            <h2 class="entry-title" th:text="${post.spec.title}"></h2>
            <ul>
                <div class="header_meta">
                    <span class="single_time">
                        <i class="ri-time-line"></i>
                        <time itemprop="datePublished"
                            th:datetime="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}">
                            <th:block th:replace="~{modules/widgets/time :: time(${post.spec.publishTime})}"></th:block>
                        </time>
                    </span>
                    <span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span>
                    <span class="edit_post" th:if="${roleName == 'super-role'}">
                        <a th:href="${'/console/posts/editor?name='+post.metadata.name+'&returnToView=true'}"
                            target="_self">
                            <i class="ri-edit-line"></i>编辑</a>
                    </span>
                </div>
                <div class="single-content_header">
                    <span class="single_cat">
                        <ul class="post-categories">
                            <li th:each="category : ${post.categories}">
                                <a th:href="@{${category.status.permalink}}" th:text="${category.spec.displayName}"
                                    th:title="${category.spec.displayName}" rel="category tag"></a>
                            </li>
                        </ul>
                    </span>
                </div>
            </ul>
        </div>
    </div>

    <div class="single-inner">
        <th:block th:if="${mu_on == 'true' && not #strings.isEmpty(plays_id)}">
            <div th:if="${mu_on == 'true' && not #strings.isEmpty(plays_id)}" class="mu_l_title"><i class="ri-play-list-line"></i>歌曲列表</div>
            <div class="posts_mu_list" th:pid="${post.metadata.name}" th:plays_id="${plays_id}" 
            th:mus_source="${#annotations.get(post, 'mus_source')}"
            th:mus_type="${#annotations.getOrDefault(post, 'mus_type', 'playlist')}"
            th:mu_on="${mu_on}"></div>
        </th:block>
        <div class="single-content" th:utext="${post.content.content}">
        </div>
        <div class="single-footer">
            <div class="single_footer_box">
                <a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
                    <i class="ri-heart-2-line"></i>
                    <span>[[${post.stats.upvote}]]</span>
                </a>

                <div class="pix_share_btn">
                    <a class="pix_icon share_btn_icon cr_poster"
                       th:poster-data="${post.metadata.name}"
                       th:banner = "${_cover}"
                       th:uk-toggle="${'target: #share_modal_'+post.metadata.name}"
                       uk-tooltip="title: 文章分享; pos: top;">
                        <i class="ri-share-line"></i>
                    </a>
                    <div th:id="${'share_modal_'+post.metadata.name}" class="uk-flex-top poster_modal"
                         uk-modal>
                        <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
                            <button class="uk-modal-close-outside" type="button" uk-close></button>
                            <div class="poster_box_ap"></div>
                            <div class="post_share_box hide">
                                <a
                                        th:onclick="handleShare('wb','[(${_cover})]','[(${post.spec.title})]','[(${post.status.permalink})]')"
                                        uk-tooltip="title: 微博分享; pos: top;" target="_blank"><i
                                        class="ri-weibo-line"></i>
                                </a>
                                <a th:onclick="handleShare('qzone','[(${_cover})]','[(${post.spec.title})]','[(${post.status.permalink})]')"
                                   uk-tooltip="title: QQ分享; pos: top;" target="_blank">
                                    <i class="ri-chrome-line"></i>
                                </a>
                                <a
                                        th:onclick="handleShare('qq','[(${_cover})]','[(${post.spec.title})]','[(${post.status.permalink})]')"
                                        uk-tooltip="title: QQ好友分享; pos: top;" target="_blank">
                                    <i class="ri-qq-line"></i>
                                </a>
                                <a th:onclick="handleShare('copy','','','[(${post.status.permalink})]')"
                                    uk-tooltip="title: 复制链接; pos: top;">
                                    <i class="ri-file-copy-line"></i>
                                </a>
                                <a class="poster_download" uk-tooltip="title: 下载海报; pos: top;">
                                    <i class="ri-download-line"></i>
                                </a>
                            </div>
                            <img id="twoCode" style="display: none;" />
                        </div>
                    </div>
                </div>
                <div class="pix_donate_btn" th:if="${theme.config.post.donate_on}">
                    <a class="pix_icon donate_btn_icon" uk-toggle="target: #donate_modal" uk-tooltip="title: 打赏作者; pos: top;">
                        <i class="ri-gift-2-line"></i>
                    </a>
                    <div id="donate_modal" class="uk-flex-top donate_modal" uk-modal>
                        <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
                            <button class="uk-modal-close-outside" type="button" uk-close></button>
                            <div class="donate_des" th:text="${theme.config.post.donate_des}"></div>
                            <div class="donate_pic"><img th:src="${theme.config.post.donate_pic}"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</th:block>