<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${(theme.config.watermark?.archives?.enabled == true ? theme.config.watermark.archives.title : null) ?: '归档'}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/archives.css}" />
  <script th:src="@{/assets/js/archives.js}" defer></script>
  <meta property="og:type" content="website" />
  <meta property="og:title" th:content="${((theme.config.watermark?.archives?.enabled == true ? theme.config.watermark.archives.title : null) ?: '归档') + ' - ' + (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" th:content="${'全部文章归档列表'}" />
  <meta name="twitter:title" th:content="${((theme.config.watermark?.archives?.enabled == true ? theme.config.watermark.archives.title : null) ?: '归档') + ' - ' + (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" th:content="${'全部文章归档列表'}" />
</th:block>
<th:block th:fragment="content">
  <div class="container">
    <header class="page-header" data-aos="fade-up">
      <h1 class="page-title" th:text="${(theme.config.watermark?.archives?.enabled == true ? theme.config.watermark.archives.title : null) ?: '归档'}">归档</h1>
      <p class="page-desc" th:text="${(theme.config.watermark?.archives?.enabled == true ? theme.config.watermark.archives.subtitle : null) ?: '时光荏苒，文字留痕'}">时光荏苒，文字留痕</p>
      <p class="page-desc" th:if="${archives.total}">共 <span th:text="${archives.total}">42</span> 篇文章</p>
      <p class="page-desc" th:unless="${archives.total}">共 42 篇文章</p>
    </header>
    
    <div class="archive-layout">
      <div class="archive-main" data-aos="fade-up" data-aos-delay="100">
        <div class="archive-list">
          <th:block th:if="${not #lists.isEmpty(archives.items)}">
            <th:block th:each="archive : ${archives.items}">
              <th:block th:each="month : ${archive.months}">
                <a th:each="post : ${month.posts}" th:href="@{${post.status.permalink}}" class="archive-card" th:classappend="${post.spec.pinned ? 'pinned' : ''}" data-aos="fade-up" data-aos-delay="200">
                  <!-- 置顶标识 -->
                  <span class="archive-card-pin" th:if="${post.spec.pinned}" title="置顶文章">
                    <svg viewBox="0 0 1024 1024" width="16" height="16">
                      <path d="M618.666667 209.066667V213.333333v-4.266666zM870.4 345.6l-196.266667-196.266667h-4.266666c-12.8-12.8-34.133333-21.333333-55.466667-21.333333s-42.666667 8.533333-55.466667 25.6H554.666667v4.266667c-17.066667 21.333333-25.6 46.933333-17.066667 76.8l17.066667 59.733333L435.2 384l-128-21.333333h-4.266667c-17.066667-4.266667-38.4 0-51.2 12.8-8.533333 0-12.8 4.266667-17.066666 8.533333l-51.2 51.2c-12.8 12.8-17.066667 21.333333-17.066667 34.133333 0 12.8 4.266667 21.333333 12.8 29.866667L324.266667 640l-183.466667 183.466667c-8.533333 12.8-12.8 21.333333-12.8 34.133333 0 12.8 4.266667 21.333333 12.8 29.866667s17.066667 8.533333 29.866667 8.533333c12.8 0 21.333333-4.266667 29.866666-12.8L384 699.733333l145.066667 145.066667c8.533333 8.533333 17.066667 12.8 29.866666 12.8 12.8 0 21.333333-4.266667 29.866667-12.8l51.2-51.2c4.266667-4.266667 8.533333-8.533333 8.533333-17.066667 8.533333-17.066667 12.8-34.133333 12.8-55.466666l-21.333333-128 89.6-119.466667 59.733333 17.066667h4.266667c21.333333 4.266667 42.666667 0 59.733333-8.533334 17.066667-12.8 29.866667-25.6 38.4-51.2 8.533333-34.133333 4.266667-59.733333-21.333333-85.333333zM810.666667 405.333333l-89.6-25.6c-17.066667-4.266667-34.133333 0-42.666667 17.066667L563.2 554.666667c-8.533333 8.533333-8.533333 21.333333-8.533333 29.866666l21.333333 145.066667c-4.266667 4.266667-4.266667 8.533333-8.533333 8.533333l-12.8 17.066667L268.8 469.333333l12.8-12.8c4.266667 0 8.533333-4.266667 12.8-8.533333l145.066667 21.333333c12.8 0 21.333333 0 29.866666-8.533333L627.2 341.333333c17.066667-12.8 21.333333-25.6 17.066667-42.666666l-25.6-85.333334L810.666667 405.333333z" fill="currentColor"/>
                    </svg>
                  </span>
                  <div class="archive-card-cover">
                    <img th:src="${post.spec.cover ?: 'https://picsum.photos/seed/post/300/200'}" 
                         th:alt="${post.spec.title}" alt="Cover" />
                  </div>
                  <div class="archive-card-content">
                    <h2 class="archive-card-title" th:text="${post.spec.title}">文章标题</h2>
                    <p class="archive-card-desc" th:text="${post.status.excerpt ?: '暂无摘要...'}">文章摘要...</p>
                    <div class="archive-card-meta">
                      <div class="archive-card-categories" th:if="${post.categories != null and not #lists.isEmpty(post.categories)}">
                        <span th:each="category : ${post.categories}" class="archive-category">
                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                          <span th:text="${category.spec.displayName}">分类</span>
                        </span>
                      </div>
                      <div class="archive-card-tags" th:if="${post.tags != null and not #lists.isEmpty(post.tags)}">
                        <span th:each="tag : ${post.tags}" class="archive-tag">
                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
                          <span th:text="${tag.spec.displayName}">标签</span>
                        </span>
                      </div>
                      <time class="archive-card-date" th:text="${#temporals.format(post.spec.publishTime, 'MM-dd')}">01-15</time>
                    </div>
                  </div>
                  <span class="archive-card-month" th:text="${#temporals.format(post.spec.publishTime, 'M') + '月'}">1月</span>
                  <th:block th:replace="~{modules/watermark :: watermark('archive-card-watermark')}" />
                </a>
              </th:block>
            </th:block>
          </th:block>
          <div th:if="${#lists.isEmpty(archives.items)}" 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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
              </svg>
            </div>
            <h3 class="plugin-notice-title">暂无文章</h3>
            <p class="plugin-notice-desc">去写一篇新的文章吧</p>
          </div>

        </div>

        <nav class="pagination">
          <div class="pagination-info">
            <span>共 <strong th:text="${archives.total}">0</strong> 篇文章</span>
          </div>
          
          <div class="pagination-controls">
            <a th:if="${archives.hasPrevious()}" class="pagination-arrow" th:href="@{${archives.prevUrl}}" title="上一页" aria-label="上一页">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <path d="M15 18l-6-6 6-6"/>
              </svg>
            </a>
            <span th:unless="${archives.hasPrevious()}" class="pagination-arrow disabled">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <path d="M15 18l-6-6 6-6"/>
              </svg>
            </span>
            
            <span class="pagination-current">
              <span th:text="${archives.page}">1</span> / <span th:text="${archives.totalPages}">1</span>
            </span>
            
            <a th:if="${archives.hasNext()}" class="pagination-arrow" th:href="@{${archives.nextUrl}}" title="下一页" aria-label="下一页">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <path d="M9 18l6-6-6-6"/>
              </svg>
            </a>
            <span th:unless="${archives.hasNext()}" class="pagination-arrow disabled">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <path d="M9 18l6-6-6-6"/>
              </svg>
            </span>
          </div>
        </nav>
      </div>

      <aside class="archive-sidebar">
        <div class="sidebar-widget" th:if="${theme.config.sidebar == null || theme.config.sidebar.fortuneConfig == null || theme.config.sidebar.fortuneConfig.showFortune == null || theme.config.sidebar.fortuneConfig.showFortune}">
          <div class="widget-header">
            <svg class="widget-icon" 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 class="widget-divider"></span>
            <span class="widget-title">一言</span>
          </div>
          <div class="widget-hitokoto" id="hitokoto-widget" th:attr="data-api=${theme.config.sidebar != null && theme.config.sidebar.fortuneConfig != null && theme.config.sidebar.fortuneConfig.hitokotoApi != null && !#strings.isEmpty(theme.config.sidebar.fortuneConfig.hitokotoApi) ? theme.config.sidebar.fortuneConfig.hitokotoApi : 'https://v1.hitokoto.cn/?c=a&c=b&c=c&c=d&c=i&c=k'}">
            <p class="hitokoto-text" id="hitokoto-text">热爱可抵岁月漫长</p>
            <p class="hitokoto-from" id="hitokoto-from"></p>
          </div>
        </div>

        <div class="sidebar-widget" th:if="${theme.config.sidebar == null || theme.config.sidebar.hotPostsConfig == null || theme.config.sidebar.hotPostsConfig.showHotPosts == null || theme.config.sidebar.hotPostsConfig.showHotPosts}" th:with="hotPostsCount = ${theme.config.sidebar != null && theme.config.sidebar.hotPostsConfig != null && theme.config.sidebar.hotPostsConfig.hotPostsCount != null ? theme.config.sidebar.hotPostsConfig.hotPostsCount : 5}">
          <div class="widget-header">
            <svg class="widget-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            <span class="widget-divider"></span>
            <span class="widget-title">热门文章</span>
          </div>
          <ul class="widget-list">
            <th:block th:if="${not #lists.isEmpty(postFinder.list(1, hotPostsCount).items)}">
              <li th:each="post : ${postFinder.list(1, hotPostsCount).items}">
                <a th:href="@{${post.status.permalink}}" th:text="${post.spec.title}">文章标题</a>
              </li>
            </th:block>
            <th:block th:if="${#lists.isEmpty(postFinder.list(1, hotPostsCount).items)}">
              <li style="text-align:center;padding:1rem 0;color:var(--color-text-muted);opacity:0.6;font-size:0.85rem;">暂无文章</li>
            </th:block>
          </ul>
        </div>

        <div class="sidebar-widget" th:if="${theme.config.sidebar == null || theme.config.sidebar.recentCommentsConfig == null || theme.config.sidebar.recentCommentsConfig.showRecentComments == null || theme.config.sidebar.recentCommentsConfig.showRecentComments}" th:attr="data-comment-count=${theme.config.sidebar != null && theme.config.sidebar.recentCommentsConfig != null && theme.config.sidebar.recentCommentsConfig.recentCommentsCount != null ? theme.config.sidebar.recentCommentsConfig.recentCommentsCount : 3}">
          <div class="widget-header">
            <svg class="widget-icon" 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 class="widget-divider"></span>
            <span class="widget-title">最新评论</span>
          </div>
          <div class="widget-comments" id="latestComments">
            <div class="comment-loading">加载中...</div>
          </div>
        </div>

        <div class="sidebar-widget" th:if="${theme.config.sidebar == null || theme.config.sidebar.tagCloudConfig == null || theme.config.sidebar.tagCloudConfig.showTagCloud == null || theme.config.sidebar.tagCloudConfig.showTagCloud}">
          <div class="widget-header">
            <svg class="widget-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
            <span class="widget-divider"></span>
            <span class="widget-title">标签云</span>
          </div>
          <div class="widget-tags">
            <th:block th:if="${not #lists.isEmpty(tagFinder.listAll())}">
              <a th:each="tag : ${tagFinder.listAll()}" 
                 th:href="@{${tag.status.permalink}}" 
                 class="widget-tag" 
                 th:text="${tag.spec.displayName}">标签</a>
            </th:block>
            <th:block th:if="${#lists.isEmpty(tagFinder.listAll())}">
              <span class="widget-tag" style="opacity:0.5;cursor:default;">暂无标签</span>
            </th:block>
          </div>
          <a th:if="${#lists.size(tagFinder.listAll()) > 6}" th:href="@{/tags}" class="widget-tags-more">
            查看更多 <span>&gt;</span>
          </a>
        </div>
      </aside>
    </div>
  </div>

</th:block>
</html>
