<th:block th:fragment="home-photos(photoPage,groups,tag,selectedGroup)">
    <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="${#strings.isEmpty(tag) and #strings.isEmpty(selectedGroup) ? 'active' : ''}"
                            class="cat-link">
                            全部<span></span>
                        </a>
                    </li>
                    <th:block th:each="photoGroup : ${groups}">
                        <li>
                            <!-- 修改：这里也改为 data-href -->
                            <a th:attr="data-href=@{/photos(tag=${photoGroup.spec.displayName})}"
                                th:classappend="${#strings.equals(tag, photoGroup.spec.displayName) or #strings.equals(selectedGroup, photoGroup.metadata.name) ? 'active' : ''}"
                                th:text="${photoGroup.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(photoPage.items)}" class="gallery-photos page">

                    <div th:each="photo : ${photoPage.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(photoPage.items)}">
                    <th:block th:replace="~{macro/tpl/content-none}" />
                </th:block>
            </div>

            <!-- 分页 -->
            <th:block th:if="${photoPage.hasPrevious()} or ${photoPage.hasNext()}">
                <div id="p_pagination">
                    <div class="post-paging"
                        th:with="_page = ${photoPage.page+1}">
                        <a th:if="${photoPage.hasNext() and #strings.isEmpty(tag)}"
                            th:data="@{/photos(page=${_page})}"
                            th:text="${theme.config.base_set.site_page}"></a>
                        <a th:if="${photoPage.hasNext() and not #strings.isEmpty(tag)}"
                            th:data="@{/photos(tag=${tag},page=${_page})}"
                            th:text="${theme.config.base_set.site_page}"></a>
                        <form class="page-jump-form" method="get" action="/photos">
                            <span class="page-jump-label">转到</span>
                            <input th:if="${not #strings.isEmpty(tag)}" type="hidden" name="tag" th:value="${tag}" />
                            <span class="page-jump-input-wrap">
                                <button class="page-jump-step page-jump-step-down" type="button"
                                    title="减少页码" aria-label="减少页码"><i class="ri-subtract-line"
                                        aria-hidden="true"></i></button>
                                <input class="page-jump-input" type="number" name="page" min="1"
                                    th:max="${photoPage.totalPages}" th:value="${photoPage.page}"
                                    inputmode="numeric" aria-label="页码" autocomplete="off" required />
                                <button class="page-jump-step page-jump-step-up" type="button"
                                    title="增加页码" aria-label="增加页码"><i class="ri-add-line"
                                        aria-hidden="true"></i></button>
                            </span>
                            <span class="page-jump-total">/ [[${photoPage.totalPages}]]</span>
                            <button class="page-jump-submit" type="submit" title="跳转到指定页"
                                aria-label="跳转到指定页"><i class="ri-arrow-right-line"></i></button>
                        </form>
                    </div>
                </div>
            </th:block>

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