<th:block th:if="${not #lists.isEmpty(content.medium)}">

    <div class="img_list">
        <div class="list_inner" th:num="${content.medium.size}">
            <th:block th:each="momentItem : ${content.medium}">

                <th:block th:with="isStrictVideo=${momentItem.type.name == 'VIDEO'}, 
                                isVideoExt=${#strings.endsWith(#strings.toLowerCase(momentItem.url), '.mp4') 
                                                || #strings.endsWith(#strings.toLowerCase(momentItem.url), '.webm') 
                                                || #strings.endsWith(#strings.toLowerCase(momentItem.url), '.ogv')}">

                    <div class="pix_bili_player" th:if="${isStrictVideo && momentItem.originType == 'video/bili'}">
                        <iframe th:src="|//player.bilibili.com/player.html?bvid=${momentItem.url}&autoplay=0&page=1|"
                            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
                    </div>

                    <!-- 非 Bilibili 视频：使用 Fancybox 灯箱 -->
                    <span th:if="${(isStrictVideo || isVideoExt) && momentItem.originType != 'video/bili'}"
                        class="fancybox mo_img" th:href="${momentItem.url}"
                        th:data-fancybox="${'post-images-' + moment.metadata.name}" th:data-type="video">
                        <video th:src="${momentItem.url}" class="pix_video"
                            style="width:100%; border-radius:8px;"></video>
                        <div
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
                            <i class="ri-play-circle-line"
                                style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
                        </div>
                    </span>

                    <span th:if="${momentItem.type.name == 'PHOTO' && !isVideoExt}" class="fancybox mo_img"
                        th:href="${momentItem.url}" th:data-fancybox="${'post-images-' + moment.metadata.name}">
                        <img class="lazy" th:src="@{/assets/img/logo.webp}" th:data-src="${momentItem.url}">
                    </span>

                </th:block>

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

    <div class="audio_list" th:if="${#strings.contains(content.medium,'AUDIO')}">
        <div class="list_inner">
            <th:block th:each="momentItem : ${content.medium}">
                <div class="pix_player loacl_audio" th:if="${momentItem.type.name == 'AUDIO' &&
                    (momentItem.originType != 'audio/netease' && momentItem.originType != 'audio/tencent' &&
                    momentItem.originType != 'audio/kugou' && momentItem.originType != 'audio/kuwo')}">
                    <audio th:src="${momentItem.url}" controls></audio>
                </div>
                <div class="pix_player qt" th:if="${momentItem.type.name == 'AUDIO' &&
                    (momentItem.originType == 'audio/netease' || momentItem.originType == 'audio/tencent' ||
                    momentItem.originType == 'audio/kugou' || momentItem.originType == 'audio/kuwo')}"
                    th:id="${momentItem.url}" th:type="${momentItem.originType}">
                </div>
            </th:block>
        </div>

    </div>
    <div class="card_list" th:if="${#strings.contains(content.medium,'POST')}">
        <div class="list_inner">
            <th:block th:each="momentItem : ${content.medium}">
                <th:block th:if="${momentItem.type.name == 'POST'}">
                    <div class="moment_card_item loop_card_item" th:pid="${momentItem.url}"
                        th:type="${momentItem.originType}">
                        <th:block th:if="${momentItem.originType == 'post'}">
                            <a th:with="post = ${postFinder.getByName(momentItem.url)}"
                                th:href="@{${post.status.permalink}}">
                                <div class="left"><img th:src="${post.spec.cover}"></div>
                                <div class="right">
                                    <h4 th:text="${post.spec.title}"></h4>
                                    <div class="content">
                                        <th:block th:if="${!post.spec.excerpt.autoGenerate}"
                                            th:text="${post.spec.excerpt.raw}" />
                                    </div>
                                </div>
                            </a>
                        </th:block>
                        <th:block th:if="${momentItem.originType == 'page'}">
                            <a th:with="page = ${singlePageFinder.getByName(momentItem.url)}"
                                th:href="@{${page.status.permalink}}" target="_blank">
                                <div class="left"><img th:src="${page.spec.cover}"></div>
                                <div class="right">
                                    <h4 th:text="${page.spec.title}"></h4>
                                    <div class="content">
                                        <th:block th:if="${!page.spec.excerpt.autoGenerate}"
                                            th:text="${page.spec.excerpt.raw}" />
                                    </div>
                                </div>
                            </a>
                        </th:block>

                    </div>
                </th:block>

            </th:block>

        </div>
    </div>

</th:block>