<footer th:fragment="footer" class="z-footer">
  <nav class="footer-nav">
    <div
      class="footer-nav-group"
      th:if="${theme.config.footer.explore?.show_rss != false or theme.config.footer.explore?.show_travellings != false or (theme.config.footer.explore?.links != null and !theme.config.footer.explore.links.isEmpty())}"
    >
      <h3 th:text="${theme.config.footer.explore?.title ?: '探索'}"></h3>
      <menu>
        <li th:if="${theme.config.footer.explore?.show_rss != false}">
          <a th:href="${theme.config.footer.explore?.rss_url} ?: '/rss.xml'" target="_blank">
            <span class="icon-[ph--rss-simple-bold]"></span>
            <span class="nav-text">RSS 订阅</span>
          </a>
        </li>
        <li th:if="${theme.config.footer.explore?.show_travellings != false}">
          <a href="https://www.travellings.cn/go.html" target="_blank">
            <span class="icon-[ph--train-regional-bold]"></span>
            <span class="nav-text">开往</span>
          </a>
        </li>
        <li th:each="link : ${theme.config.footer.explore?.links}">
          <a th:href="${link.url}" target="_blank">
            <th:block
              th:if="${link.icon != null}"
              th:with="iconVal = ${link.icon.value != null ? link.icon.value : (link.icon instanceof T(String) ? link.icon : null)}"
            >
              <img
                th:if="${iconVal != null and not #strings.isEmpty(iconVal)}"
                th:src="${iconVal}"
                alt=""
                class="link-icon"
              />
            </th:block>
            <span class="nav-text" th:text="${link.text}"></span>
          </a>
        </li>
      </menu>
    </div>

    <div
      class="footer-nav-group"
      th:if="${theme.config.footer.links?.items != null and !theme.config.footer.links.items.isEmpty()}"
    >
      <h3 th:text="${theme.config.footer.links?.title} ?: '链接'"></h3>
      <menu>
        <li th:each="link : ${theme.config.footer.links.items}">
          <a th:href="${link.url}" target="_blank">
            <th:block
              th:if="${link.icon != null}"
              th:with="iconVal = ${link.icon.value != null ? link.icon.value : (link.icon instanceof T(String) ? link.icon : null)}"
            >
              <img
                th:if="${iconVal != null and not #strings.isEmpty(iconVal)}"
                th:src="${iconVal}"
                alt=""
                class="link-icon"
              />
            </th:block>
            <span class="nav-text" th:text="${link.text}"></span>
          </a>
        </li>
      </menu>
    </div>

    <div class="footer-nav-group">
      <h3>信息</h3>
      <menu>
        <li>
          <a href="https://halo.run" target="_blank">
            <span class="icon-[ph--cube-bold]"></span>
            <span class="nav-text" th:if="${!theme.config.footer.halo_version}">架构于 Halo</span>
            <span class="nav-text" th:if="${theme.config.footer.halo_version}" th:text="'架构于 Halo ' + ${site.version}"></span>
          </a>
        </li>
        <li>
          <a href="https://github.com/acanyo/theme-clarity" target="_blank">
            <span class="icon-[ph--mountains-bold]"></span>
            <span class="nav-text" th:text="'驱动 Clarity ' + ${theme.spec.version}"></span>
          </a>
        </li>
        <li th:if="${not #strings.isEmpty(theme.config.footer.beian)}">
          <a href="https://beian.miit.gov.cn/" target="_blank">
            <img th:src="@{/assets/images/icp.webp}" alt="ICP" class="beian-icon" />
            <span class="nav-text" th:text="${theme.config.footer.beian}"></span>
          </a>
        </li>
        <li th:if="${not #strings.isEmpty(theme.config.footer.gongan_beian)}">
          <a id="gongan-beian-link" href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">
            <img th:src="@{/assets/images/gonganbeian.png}" alt="公安备案" class="beian-icon" />
            <span id="gongan-beian-text" class="nav-text" th:text="${theme.config.footer.gongan_beian}"></span>
          </a>
          <script>
            (function () {
              const text = document.getElementById("gongan-beian-text").innerText;
              const code = text.replace(/[^0-9]/g, "");
              if (code) {
                document.getElementById("gongan-beian-link").href =
                  "https://beian.mps.gov.cn/#/query/webSearch?code=" + code;
              }
            })();
          </script>
        </li>
        <li th:if="${theme.config.footer.enable_uptime_kuma}" class="xhhaocom-dataStatistics-v2-uptime-kuma"></li>
      </menu>
    </div>
  </nav>

  <div class="footer-inject">
    <halo:footer />
  </div>

  <p>© <span th:text="${#temporals.year(#temporals.createNow())}"></span> <span th:text="${site.title}"></span></p>
</footer>
