<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
    th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${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">
            <div class="normal_list">
                <div class="normal_list_inner" uk-height-viewport="offset-top: true">

                    <!-- 分类导航 -->
                    <div class="photos_cat_nav">
                        <ul id="cat_nav_items">
                            <li>
                                <!-- 修改：href 改为 data-href，并添加一个通用 class 如 'cat-link' -->
                                <a th:attr="data-href=@{/photos}"
                                    th:classappend="${#lists.isEmpty(param.group) ? 'active' : ''}" class="cat-link">
                                    全部<span></span>
                                </a>
                            </li>
                            <th:block th:each="group : ${groups}">
                                <li>
                                    <!-- 修改：这里也改为 data-href -->
                                    <a th:attr="data-href=@{|/photos?group=${group.metadata.name}|}"
                                        th:classappend="${#lists.contains(param.group, group.metadata.name) ? 'active' : ''}"
                                        th:text="${group.spec.displayName}" class="cat-link">
                                        <span></span>
                                    </a>
                                </li>
                            </th:block>
                        </ul>
                    </div>

                    <!-- 相册列表 -->
                    <div id="photos_item" class="norpost_list">
                        <div th:unless="${#lists.isEmpty(photos.items)}" class="gallery-photos page">

                            <div th:each="photo : ${photos.items}" class="gallery-photo">

                                <th:block th:with="
        img = ${!#strings.isEmpty(photo.spec.cover) ? photo.spec.cover : photo.spec.url},
        isVideo = ${#strings.endsWith(img, '.mp4') or #strings.endsWith(img, '.webm') or #strings.endsWith(img, '.ogg')}
    ">

                                    <span th:if="${isVideo}" th:href="${img}" data-fancybox="gallery"
                                        class="fancybox video-fancybox"
                                        style="position: relative; display: block; cursor: pointer;">
                                        <video class="photo-img" preload="metadata" muted playsinline>
                                            <source th:src="${img}" th:type="${#strings.endsWith(img, '.mp4') ? 'video/mp4' : 
                         (#strings.endsWith(img, '.webm') ? 'video/webm' : 'video/ogg')}" />
                                        </video>
                                        <div
                                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
                                            <i class="ri-play-circle-line play-icon"
                                                style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
                                        </div>
                                    </span>

                                    <span th:unless="${isVideo}" th:href="${img}" data-fancybox="gallery"
                                        class="fancybox" th:data-thumb="${img}"
                                        style="position: relative; display: block;">
                                        <img class="photo-img" loading="lazy" th:src="${img}" />
                                    </span>

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

                        <!-- 空数据 -->
                        <th:block th:if="${#lists.isEmpty(photos.items)}">
                            <th:block th:replace="~{macro/tpl/content-none}" />
                        </th:block>
                    </div>

                    <!-- 分页 -->
                    <th:block th:if="${photos.hasPrevious()} or ${photos.hasNext()}">
                        <div id="p_pagination">
                            <div class="post-paging" th:if="${photos.hasNext()}">
                                <a th:data="@{${photos.nextUrl}}" th:text="${theme.config.base_set.site_page}"></a>
                            </div>
                        </div>
                    </th:block>

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

        <!-- 瀑布流自适应 -->
        <script>
            window.onresize = () => {
                const galleryPhotos = document.querySelectorAll('.gallery-photos .gallery-photo');
                if (galleryPhotos.length > 0) {
                    waterfall('.gallery-photos');
                }
            };
        </script>

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

</th:block>

</html>