<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${(theme.config.watermark?.categories?.enabled == true ? theme.config.watermark.categories.title : null) ?: '分类'}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/tags.css}" />
</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?.categories?.enabled == true ? theme.config.watermark.categories.title : null) ?: '分类'}">分类</h1>
      <p class="page-desc" th:text="${(theme.config.watermark?.categories?.enabled == true ? theme.config.watermark.categories.subtitle : null) ?: '按分类浏览全部内容'}">按分类浏览全部内容</p>
      <p class="page-desc" th:if="${not #lists.isEmpty(categories)}">
        共 <span th:text="${#lists.size(categories)}">6</span> 个分类
      </p>
      <p class="page-desc" th:unless="${not #lists.isEmpty(categories)}">共 6 个分类</p>
    </header>

    <div class="categories-list">
      <th:block th:if="${not #lists.isEmpty(categories)}">
        <a th:each="category, iterStat : ${categories}" 
           th:href="@{${category.status.permalink}}" 
           class="category-card"
           data-aos="fade-up"
           th:attr="data-aos-delay=${100 + iterStat.index * 50}">
          <div class="category-icon">
            <!-- 默认SVG图标 -->
            <th:block th:switch="${iterStat.index % 6}">
              <svg th:case="0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l2-2-2-2"/><path d="M8 6L6 8l2 2"/><path d="M14.5 4l-5 16"/></svg>
              <svg th:case="1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
              <svg th:case="2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
              <svg th:case="3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
              <svg th:case="4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
              <svg th:case="5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
            </th:block>
          </div>
          <div class="category-info">
            <h2 class="category-name" th:text="${category.spec.displayName}">分类名称</h2>
            <span class="category-count">
              <span th:text="${category.status.postCount}">0</span> 篇文章
            </span>
          </div>
          <th:block th:replace="~{modules/watermark :: watermark('category-watermark')}" />
        </a>
      </th:block>

      <th:block th:if="${#lists.isEmpty(categories)}">
        <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">
              <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>
          </div>
          <h3 class="plugin-notice-title">暂无分类</h3>
          <p class="plugin-notice-desc">创建分类后将在此展示</p>
        </div>
      </th:block>
    </div>
    <!-- 根据分类slug匹配自定义图标 -->
    <script th:inline="javascript">
      var rawIcons = /*[[${theme.config.basic != null ? theme.config.basic.categoryIcons : {}}]]*/ [];
      if (!Array.isArray(rawIcons)) rawIcons = [];
      var categoryIcons = rawIcons.map(function(item) { return item && (item.realNode || item); }).filter(function(item) { return item && item.slug; });
      var categories = /*[[${categories}]]*/ [];
      
      document.querySelectorAll('.category-card').forEach(function(card, index) {
        var iconDiv = card.querySelector('.category-icon');
        var svg = iconDiv ? iconDiv.querySelector('svg') : null;
        var categorySlug = categories[index] ? categories[index].spec.slug : null;
        
        var matchedConfig = null;
        categoryIcons.forEach(function(config) {
          if (config.slug === categorySlug) matchedConfig = config;
        });
        
        if (matchedConfig && matchedConfig.icon) {
          var customIcon = document.createElement('i');
          customIcon.className = 'custom-category-icon ' + matchedConfig.icon;
          customIcon.style.color = matchedConfig.color || '';
          if (svg) {
            iconDiv.insertBefore(customIcon, svg);
            svg.style.display = 'none';
          } else {
            iconDiv.appendChild(customIcon);
          }
        }
      });
    </script>
  </div>
</th:block>
</html>
