<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${'瞬间' + ' - ' + site.title})}">

<th:block th:fragment="content">

    <div class="page_main uk-width-2-3@m">

        <th:block th:replace="~{modules/header}" />

        <div id="pjax-container">

            <main id="primary" class="site-main">
                <div class="moment_single single_content" uk-height-viewport="offset-top: true">

                    <div th:id="|post-${moment.metadata.name}|"
                         th:class="|loop_content p_item moment_item moment_single post-${moment.metadata.name} moment type-moment status-publish hentry moments-music sticky|">
                        <div class="p_item_inner">
                            <div class="list_user_meta">
                                <div class="avatar">
                                    <img th:src="@{${moment.owner.avatar}}">
                                </div>
                                <div class="name">
                                    [[${moment.owner.displayName}]] <time itemprop="datePublished"
                                                                          th:datetime="${#dates.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm')}">
                                    <th:block th:replace="~{modules/widgets/time :: time(${moment.spec.releaseTime})}"></th:block>
                                </time>
                                </div>
                            </div>

                            <div class="blog_content">
                                <div class="entry-content" th:with="content=${moment.spec.content}">
                                    <div class="p_title"></div>
                                    <div class="t_content" th:utext="${content.html}">
                                        <th:block th:utext="${content.html}"></th:block>
                                    </div>
                                    <th:block th:replace="~{'macro/tpl/moment-medium'}" />
                                </div>
                                <span class="ip_loca" th:if="${not #strings.isEmpty(moment.metadata.annotations.mylocal)}">
                                    <i class="ri-map-pin-2-line"></i>
                                    [[${moment.metadata.annotations.mylocal}]]
                                </span>
                                <div class="entry-footer">
                                    <div class="post_footer_meta">
                                        <div class="left">
                                            <a class="up_like " data-action="up" data-key="moment" th:data-id="${moment.metadata.name}">
                                                <i class="ri-heart-2-line"></i>
                                                <span th:text="${moment.stats.upvote}"></span>
                                            </a>
                                            <div class="pix_share_btn" th:with="_cover = ${not #strings.isEmpty(theme.config.moments.banner) ? theme.config.moments.banner : '/themes/theme-pix/assets/img/banner-all.webp'}">
                                                <a class="pix_icon share_btn_icon cr_poster"
                                                   th:poster-data="${moment.metadata.name}"
                                                   th:banner = "${_cover}"
                                                   th:uk-toggle="|target: #share_modal_${moment.metadata.name}|"
                                                   uk-tooltip="title: 瞬间分享; pos: top;" tabindex="0" title=""
                                                   aria-describedby="uk-tooltip-250" aria-expanded="false"><i
                                                        class="ri-share-forward-box-line"></i></a>
                                                <div th:id="|share_modal_${moment.metadata.name}|" class="uk-flex-top poster_modal uk-modal"
                                                     uk-modal>
                                                    <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
                                                        <button class="uk-modal-close-outside uk-icon uk-close"
                                                                type="button" uk-close></button>
                                                        <div class="poster_box_ap"></div>
                                                        <div class="post_share_box hide">
                                                            <a th:onclick="handleShare('wb','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
                                                               uk-tooltip="title: 微博分享; pos: top;" target="_blank">
                                                                <i class="ri-weibo-line"></i></a>
                                                            <a th:onclick="handleShare('qzone','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
                                                               uk-tooltip="title: QQ分享; pos: top;" target="_blank">
                                                                <i class="ri-chrome-line"></i>
                                                            </a>
                                                            <a th:onclick="handleShare('qq','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
                                                               uk-tooltip="title: QQ好友分享; pos: top;" target="_blank">
                                                                <i class="ri-qq-line"></i>
                                                            </a>
                                                            <a th:onclick="handleShare('copy','','','[(${'/moments/'+moment.metadata.name})]')"
                                                               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>
                                        <div th:if="${roleName == 'super-role' || moment.owner.name == user.name}" class="right" th:pid="${moment.metadata.name}">
                                            <a class="control_edit_post control_type" uk-toggle="target: #create_post_box" >
                                                <i class="ri-edit-line"></i>编辑
                                            </a>

                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>

                    <div id="comments" class="comments comments-area" data="normal" th:if="${(not theme.config.com.com_close) && haloCommentEnabled}">
                        <div class="halo-comment">
                            <th:block th:replace="~{modules/widgets/halo-comment :: halo-comment(name=${moment.metadata.name},kind='Moment',group='moment.halo.run')}"></th:block>
                        </div>
                    </div>

                </div>

            </main>

        </div>

        <th:block th:replace="~{modules/footer-main}" />

    </div>
</th:block>

</html>