<!doctype html>
<th:block
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{components/base-layout/template :: html(
    title = |#{page.tags.page-title} - ${site.title}|,
    head = ~{:: head},
    content = ~{:: body},
    header = ~{components/header/template :: body},
    navbar = ~{}
  )}"
>
  <head th:remove="tag">
    <meta
      name="description"
      th:attr="content=${#strings.isEmpty(theme.config?.tags_page_styles?.description) ? site?.seo?.description : theme.config?.tags_page_styles?.description}"
    />
    <link
      rel="canonical"
      th:if="${theme.config?.tags_page_styles?.is_enable_canonical_link}"
      th:href="${siteUrl} + @{{prefix}(prefix = ${site.routes.tagsUri})}"
    />
    <th:block th:insert="~{components/header/template :: head}"></th:block>
    <script type="module" crossorigin src="/themes/howiehz-higan/assets/1.65.0Bk5FHpu.js" integrity="sha384-cg6x7Pb77Zqih642wbHELBIb8vuQ0VeuH0Zb6tWgHC6J1oxIpFMgVUPeGS0CiGHV"></script>
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0Nu1u8yY.css" integrity="sha384-h6WHiBEsz55L9LeaTSvyYRiiYVLTekMvNJhG+VjwyKti556zI6k8M+nZTayAbuwQ">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0Cm9WtK3.css" integrity="sha384-5mfy54dXwG1cmBTIyGmUrsB3qeIVPGQgWH4kbcQitHteMy1Z/6vggwO0SNTdAEHx">
  </head>
  <body th:remove="tag">
    <h1>
      <th:block th:text="#{page.tags.title}">标题替换位</th:block>
    </h1>
    <ul th:unless="${#lists.isEmpty(tags)}" class="tw-mb" id="tags-list">
      <th:block th:if="${theme.config?.tags_page_styles?.tags_sort_order == 'default'}">
        <th:block th:each="tag : ${tags}">
          <li
            th:with="tagColor = ${tag.spec?.color}"
            th:style="${tagColor != null
                      and !#strings.equalsIgnoreCase(tagColor, '#ffffff')}
                    ? |--tag-hash-color:${tagColor};|
                    : null"
          >
            <a th:href="@{${tag.status?.permalink}}">
              <th:block
                th:text="${tag.spec?.displayName} + (${theme.config?.tags_page_styles?.is_show_the_number_of_posts_per_tag}? ( ${theme.config?.tags_page_styles?.characters_to_the_left_of_the_number_of_posts} + ${tag.postCount} + ${theme.config?.tags_page_styles?.characters_to_the_right_of_the_number_of_posts} ) : '')"
              >
              </th:block>
            </a>
          </li>
        </th:block>
      </th:block>
    </ul>
    <script
      th:if="${theme.config?.tags_page_styles?.tags_sort_order != 'default'}"
      th:data-tags-sort-order="${theme.config?.tags_page_styles?.tags_sort_order}"
      th:data-is-show-post-count="${theme.config?.tags_page_styles?.is_show_the_number_of_posts_per_tag}"
      th:data-left-char="${theme.config?.tags_page_styles?.characters_to_the_left_of_the_number_of_posts}"
      th:data-right-char="${theme.config?.tags_page_styles?.characters_to_the_right_of_the_number_of_posts}"
    >
      const tagsConfigScript = document.currentScript;
      const tagsSortOrder = tagsConfigScript?.dataset.tagsSortOrder ?? "count_desc";
      const isShowPostCount = tagsConfigScript?.dataset.isShowPostCount === "true";
      const leftChar = tagsConfigScript?.dataset.leftChar ?? "(";
      const rightChar = tagsConfigScript?.dataset.rightChar ?? ")";
      fetch("/apis/api.content.halo.run/v1alpha1/tags?page=1&size=2147483647")
        .then((response) => response.json())
        .then((data) => {
          const tagsList = document.querySelector("#tags-list");
          if (!tagsList) return;
          const fragment = document.createDocumentFragment();
          (
            data.items.sort((a, b) => {
              switch (tagsSortOrder) {
                case "count_desc":
                  return (b.postCount || 0) - (a.postCount || 0);
                case "count_asc":
                  return (a.postCount || 0) - (b.postCount || 0);
                case "name_asc":
                  return (a.spec?.displayName || "").localeCompare(b.spec?.displayName || "");
                case "name_desc":
                  return (b.spec?.displayName || "").localeCompare(a.spec?.displayName || "");
                default:
                  return 0;
              }
            }) || []
          ).forEach((tag) => {
            const li = document.createElement("li");
            const color = tag.spec?.color || "";
            if (color && color.toLowerCase() !== "#ffffff") {
              li.style.setProperty("--tag-hash-color", color);
            }
            const a = document.createElement("a");
            a.href = tag.status?.permalink || "#";
            const displayName = tag.spec?.displayName || "";
            a.textContent = isShowPostCount
              ? `${displayName}${leftChar}${tag.postCount || 0}${rightChar}`
              : displayName;
            li.appendChild(a);
            fragment.appendChild(li);
          });
          tagsList.appendChild(fragment);
        })
        .catch((error) => {
          console.error("[Higan Haozi][tags] Error fetching tags:", error);
        });
    </script>
  </body>
</th:block>
