<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${tag.spec.displayName ?: 'JavaScript'}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/archives.css}" />
  <link rel="canonical" th:href="${site.url + tag.status.permalink}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" th:content="${tag.spec.displayName + ' - ' + (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="${'标签「' + tag.spec.displayName + '」下的所有文章'}" />
  <meta property="og:url" th:content="${site.url + tag.status.permalink}" />
  <meta name="twitter:title" th:content="${tag.spec.displayName + ' - ' + (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="${'标签「' + tag.spec.displayName + '」下的所有文章'}" />
  <script th:if="${theme.config.seo != null && theme.config.seo.seoConfig != null && (theme.config.seo.seoConfig.enableJsonLd == null || theme.config.seo.seoConfig.enableJsonLd)}" type="application/ld+json" th:inline="javascript">
  {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": /*[[${tag.spec.displayName}]]*/ "",
    "description": /*[[${'标签「' + tag.spec.displayName + '」下的所有文章'}]]*/ "",
    "url": /*[[${site.url + tag.status.permalink}]]*/ "",
    "isPartOf": {
      "@type": "WebSite",
      "name": /*[[${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title}]]*/ "",
      "url": /*[[${site.url}]]*/ ""
    }
  }
  </script>
</th:block>
<th:block th:fragment="content">
  <div class="page-gradient"></div>

  <main class="main">
    <div class="container">
      <header class="page-header">
        <h1 class="page-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:24px;height:24px;vertical-align:middle;margin-right:8px;color:var(--color-accent)"><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}">JavaScript</span>
        </h1>
        <p class="page-desc" th:if="${posts.total}">共 <span th:text="${posts.total}">15</span> 篇文章</p>
        <p class="page-desc" th:unless="${posts.total}">共 15 篇文章</p>
      </header>

      <div class="archive-list">
        <th:block th:if="${not #lists.isEmpty(posts.items)}">
          <a th:each="post : ${posts.items}" 
             th:href="@{${post.status.permalink}}" 
             class="archive-card"
             th:classappend="${post.spec.pinned ? 'pinned' : ''}">
            <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>
                <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:if="${#lists.isEmpty(posts.items)}">
          <div class="plugin-notice">
            <div class="plugin-notice-icon">
              <svg 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>
            </div>
            <h3 class="plugin-notice-title">该标签下暂无文章</h3>
            <p class="plugin-notice-desc">发布文章并添加该标签后将在此展示</p>
          </div>
        </th:block>
      </div>

      <nav class="pagination">
        <div class="pagination-info">
          <span>共 <strong th:text="${posts.total}">0</strong> 篇文章</span>
        </div>
        
        <div class="pagination-controls">
          <a th:if="${posts.hasPrevious()}" class="pagination-arrow" th:href="@{${tag.status.permalink} + '/page/' + ${posts.page - 1}}" 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="${posts.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="${posts.page}">1</span> / <span th:text="${posts.totalPages}">1</span>
          </span>
          
          <a th:if="${posts.hasNext()}" class="pagination-arrow" th:href="@{${tag.status.permalink} + '/page/' + ${posts.page + 1}}" 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="${posts.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>
  </main>
</th:block>
</html>
