<!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" th:with="
            page = ${#lists.isEmpty(param.page) or #strings.isEmpty(param.page[0]) ? 1 : param.page[0]},
            tag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]},
            groupParam = ${#lists.isEmpty(param.group) ? null : param.group[0]},
            requestTag = ${not #strings.isEmpty(tag) ? tag : groupParam}
        ">
            <th:block th:if="${#strings.isEmpty(requestTag)}">
                <th:block th:with="photoPage = ${#lists.isEmpty(param.page) ? photos : photoFinder.list(page, photos.size)}">
                    <th:block th:replace="~{macro/home-photos :: home-photos(${photoPage},${groups},null,null)}"></th:block>
                </th:block>
            </th:block>

            <th:block th:unless="${#strings.isEmpty(requestTag)}" th:each="photoGroup : ${groups}">
                <th:block th:if="${#strings.equals(requestTag, photoGroup.spec.displayName) or #strings.equals(requestTag, photoGroup.metadata.name)}"
                    th:with="photoPage = ${photoFinder.list(page, photos.size, photoGroup.metadata.name)}">
                    <th:block th:replace="~{macro/home-photos :: home-photos(${photoPage},${groups},${photoGroup.spec.displayName},${photoGroup.metadata.name})}"></th:block>
                </th:block>
            </th:block>
        </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>
