<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${singlePage != null ? singlePage.spec.title : '图库集'}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/photos.css}" />
  <script th:src="@{/assets/js/lightbox.js}" defer></script>
  <script th:src="@{/assets/js/photos.js}" defer></script>
  <meta property="og:type" content="website" />
  <meta property="og:title" th:content="${singlePage != null ? singlePage.spec.title : '图库集'}" />
  <meta property="og:description" th:content="${singlePage != null && singlePage.status.excerpt != null ? singlePage.status.excerpt : (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle)}" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" th:content="${singlePage != null ? singlePage.spec.title : '图库集'}" />
</th:block>
<th:block th:fragment="content">
  <main class="main">
    <div class="container">
      <section class="photos-page" th:with="photoGroups = ${photoFinder != null ? photoFinder.groupBy() : null}">
        
        <div class="photos-header" data-aos="fade-up">
          <h1 class="photos-title" th:text="${(theme.config.watermark?.photos?.enabled == true ? theme.config.watermark.photos.title : null) ?: (singlePage != null ? singlePage.spec.title : '图库集')}">图库集</h1>
          <p class="photos-subtitle" th:text="${(theme.config.watermark?.photos?.enabled == true ? theme.config.watermark.photos.subtitle : null) ?: '用镜头记录生活的美好瞬间'}">用镜头记录生活的美好瞬间</p>
        </div>
        
        <!-- 未安装插件提示 -->
        <div th:if="${photoFinder == null}" class="plugin-notice" data-aos="fade-up">
          <div class="plugin-notice-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              <circle cx="8.5" cy="8.5" r="1.5"/>
              <polyline points="21 15 16 10 5 21"/>
            </svg>
          </div>
          <h3 class="plugin-notice-title">图库功能需要安装插件</h3>
          <p class="plugin-notice-desc">请先安装并启用「图库」插件</p>
        </div>
        
        <!-- 分组筛选标签 -->
        <div th:if="${photoGroups != null && !photoGroups.isEmpty()}" class="photos-filter" data-aos="fade-up">
          <button class="filter-btn active" data-group="all">全部</button>
          <th:block th:each="group : ${photoGroups}">
            <button class="filter-btn" th:data-group="${group.metadata.name}" th:text="${group.spec.displayName}">分组</button>
          </th:block>
        </div>
        
        <!-- 图片瀑布流 -->
        <th:block th:if="${photoGroups != null && !photoGroups.isEmpty()}">
          <div class="photos-masonry" id="photos-masonry">
            <th:block th:each="group : ${photoGroups}">
              <th:block th:each="photo : ${group.photos}">
                <div class="photo-item" th:data-group="${group.metadata.name}" data-aos="fade-up">
                  <div class="photo-wrapper">
                    <img th:src="${photo.spec.url}" 
                         th:alt="${photo.spec.displayName}" 
                         loading="lazy" />
                    <span class="photo-time" th:if="${photo.metadata.creationTimestamp}" th:text="${#temporals.format(photo.metadata.creationTimestamp, 'yyyy-MM-dd')}"></span>
                    <div class="photo-overlay">
                      <span class="photo-name" th:if="${photo.spec.displayName}" th:text="${photo.spec.displayName}">图片名称</span>
                      <span class="photo-group" th:text="${group.spec.displayName}">分组</span>
                    </div>
                  </div>
                </div>
              </th:block>
            </th:block>
          </div>
        </th:block>
        
        <!-- 无数据占位 -->
        <th:block th:if="${photoFinder != null && (photoGroups == null || photoGroups.isEmpty())}">
          <div class="plugin-notice" data-aos="fade-up">
            <div class="plugin-notice-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
              </svg>
            </div>
            <h3 class="plugin-notice-title">暂无照片</h3>
            <p class="plugin-notice-desc">上传照片后将在此展示</p>
          </div>
        </th:block>
        
      </section>
    </div>
  </main>
</th:block>
</html>
