<!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/moments.css}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" th:content="${(singlePage != null ? singlePage.spec.title : '碎碎念') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta property="og:description" content="记录生活中的点滴，留住那些值得回忆的瞬间" />
  <meta name="twitter:title" th:content="${(singlePage != null ? singlePage.spec.title : '碎碎念') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta name="twitter:description" content="记录生活中的点滴，留住那些值得回忆的瞬间" />
  <script th:src="@{/assets/js/lightbox.js}" defer></script>
</th:block>
<th:block th:fragment="content">
  <main class="main">
    <div class="container">
      <section class="moments-page" th:with="momentsResult = ${momentFinder != null ? momentFinder.list(1, 9999) : null}">
        
        <div class="moments-header" data-aos="fade-up">
          <h1 class="moments-title" th:text="${(theme.config.watermark?.moments?.enabled == true ? theme.config.watermark.moments.title : null) ?: (singlePage != null ? singlePage.spec.title : '碎碎念')}">碎碎念</h1>
          <p class="moments-subtitle" th:text="${(theme.config.watermark?.moments?.enabled == true ? theme.config.watermark.moments.subtitle : null) ?: '记录生活中的点滴，留住那些值得回忆的瞬间'}">记录生活中的点滴，留住那些值得回忆的瞬间</p>
          <div class="moments-stats" th:if="${momentsResult != null}">
            <div class="moments-stat">
              <span class="moments-stat-num" th:text="${momentsResult.total}">0</span>
              <span class="moments-stat-label">条动态</span>
            </div>
          </div>
        </div>
        
        <!-- 未安装插件提示 -->
        <div th:if="${momentFinder == 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">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
          </div>
          <h3 class="plugin-notice-title">碎碎念功能需要安装插件</h3>
          <p class="plugin-notice-desc">请先安装并启用「瞬间」插件</p>
        </div>
        
        <!-- 动态列表 -->
        <th:block th:if="${momentFinder != null && momentsResult != null}">
          <div class="moments-container">
            <div class="moments-list">
              <th:block th:each="moment, iterStat : ${momentsResult.items}">
                <div class="moment-item" 
                     data-aos="fade-up" 
                     th:attr="data-aos-delay=${iterStat.index * 80}"
                     th:with="content = ${moment.spec.content}">
                  <!-- 头像 -->
                  <img class="moment-avatar" 
                       th:src="${moment.owner != null && moment.owner.avatar != null ? moment.owner.avatar : (site.logo ?: '/themes/theme-Serenity/assets/public/ics6.webp')}" 
                       alt="avatar" />
                  
                  <!-- 气泡 -->
                  <div class="moment-bubble">
                    <!-- 头部：作者和时间 -->
                    <div class="moment-bubble-header">
                      <span class="moment-author" th:text="${moment.owner != null && moment.owner.displayName != null ? moment.owner.displayName : (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.author != null ? theme.config.basic.siteInfo.author : site.title)}">作者</span>
                      <span class="moment-time" th:text="${moment.spec.releaseTime != null ? #temporals.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm:ss') : ''}">时间</span>
                    </div>
                    
                    <!-- 内容 -->
                    <div class="moment-content" 
                         th:if="${content != null && content.html != null && !#strings.isEmpty(content.html)}" 
                         th:utext="${content.html}">内容</div>
                    
                    <!-- 媒体内容 -->
                    <div class="moment-media" 
                         th:if="${content != null && content.medium != null && !#lists.isEmpty(content.medium)}">
                      <th:block th:each="medium : ${content.medium}">
                        <img th:if="${medium.type.name() == 'PHOTO'}" 
                             th:src="${medium.url}" 
                             th:attr="data-src=${medium.url}"
                             class="moment-img" 
                             alt="图片" 
                             loading="lazy" />
                        <video th:if="${medium.type.name() == 'VIDEO'}" 
                               th:src="${medium.url}" 
                               class="moment-video"
                               controls 
                               preload="metadata"></video>
                        <audio th:if="${medium.type.name() == 'AUDIO'}" 
                               th:src="${medium.url}" 
                               class="moment-audio"
                               controls></audio>
                      </th:block>
                    </div>
                    
                    <!-- 标签 -->
                    <div class="moment-tags" th:if="${moment.spec.tags != null && !#lists.isEmpty(moment.spec.tags)}">
                      <span class="moment-tag" th:each="tag : ${moment.spec.tags}" th:text="'#' + ${tag}">#标签</span>
                    </div>
                    
                    <!-- 底部操作栏 -->
                    <div class="moment-footer">
                      <button class="moment-action-btn moment-comment-btn"
                              th:attr="data-moment-name=${moment.metadata.name}">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        </svg>
                        <span th:text="${moment.stats != null ? moment.stats.approvedComment : 0}">0</span>
                      </button>
                    </div>
                    
                    <!-- 评论区 -->
                    <div class="moment-comments" th:id="'comments-' + ${moment.metadata.name}">
                      <halo:comment group="moment.halo.run" 
                                    kind="Moment" 
                                    th:name="${moment.metadata.name}"
                                    colorScheme="auto" />
                    </div>
                  </div>
                </div>
              </th:block>
            </div>
            
            <!-- 分页 -->
            <div class="moments-pagination" th:if="${false}" data-aos="fade-up">
              <span class="pagination-info" th:text="|第 ${momentsResult.page} 页 / 共 ${momentsResult.totalPages} 页|">分页信息</span>
            </div>
            
            <!-- 空状态 -->
            <div class="plugin-notice" th:if="${#lists.isEmpty(momentsResult.items)}" data-aos="fade-up">
              <div class="plugin-notice-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
              </div>
              <h3 class="plugin-notice-title">暂无动态</h3>
              <p class="plugin-notice-desc">发布瞬间后将在此展示</p>
            </div>
          </div>
        </th:block>
        
      </section>
    </div>
  </main>
  
  <script th:inline="javascript">
    (function() {
      document.addEventListener('click', (e) => {
        const commentBtn = e.target.closest('.moment-comment-btn');
        if (!commentBtn) return;
        
        const name = commentBtn.dataset.momentName;
        const commentsEl = document.getElementById('comments-' + name);
        
        if (commentsEl) {
          commentsEl.classList.toggle('active');
          commentBtn.classList.toggle('active');
        }
      });

      if (!window.__momentLightbox && typeof SerenityLightbox !== 'undefined') {
        var momentMedia = document.querySelector('.moment-media');
        if (momentMedia) {
          window.__momentLightbox = SerenityLightbox.create({
            className: 'moment-lightbox',
            delegateSelector: '.moment-media img'
          });
        }
      }
    })();
  </script>
</th:block>
</html>
