<!doctype html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{/components/base-layout/template :: html(
    title=${error.status},
    head = ~{:: head},
    content = ~{:: body},
    header = ~{components/header/template :: body},
    navbar = ~{}
  )}"
>
  <head th:remove="tag">
    <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.0Bicc1e3.css" integrity="sha384-JZPOQ+7mdAeT6L3rX1fi/Xvhtbr+lZd0Wy165luHFqtcM5hQXidOHfpB5R/zc686">
  </head>
  <body th:remove="tag">
    <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
      <div class="content" itemprop="articleBody">
        <h1>
          <th:block th:text="${error.status}">标题替换位</th:block>
        </h1>
        <p th:if="${#strings.isEmpty(error.title)}" th:text="#{common.error.internalServerError}"></p>
        <p th:unless="${#strings.isEmpty(error.title)}" th:text="${error.title}"></p>
        <p th:unless="${#strings.isEmpty(error.detail)}" th:text="${error.detail}"></p>
        <th:block
          th:if="${theme.config?.error_page_styles?.is_auto_redirect}"
          th:with="siteUrl = ${#strings.substring(site.url, #strings.length(site.url) - 1) == '/'
                               ? #strings.substring(site.url, 0, #strings.length(site.url) - 1)
                               : site.url}"
        >
          <p id="countdown" style="opacity: 0%; transition: opacity 1s"></p>
          <script
            th:data-site-url="${siteUrl}"
            th:data-target-url="${theme.config?.error_page_styles?.target_url}"
            th:data-redirect-wait-time="${theme.config?.error_page_styles?.redirect_wait_time}"
            th:data-origin-text="#{page.error.auto-refresh}"
          >
            const currentScript = document.currentScript;
            const countdownElement = document.getElementById("countdown");
            const siteUrl = currentScript?.dataset.siteUrl ?? "";
            let targetUrl = currentScript?.dataset.targetUrl ?? "/";
            if (targetUrl.startsWith("/")) {
              targetUrl = siteUrl + targetUrl;
            }
            let currentTimeLeft = Number(currentScript?.dataset.redirectWaitTime ?? "5");
            const originText = currentScript?.dataset.originText ?? "";
            document.addEventListener("DOMContentLoaded", () => {
              countdownElement.innerHTML = `${originText
                .replace("{0}", currentTimeLeft)
                .replace("{1}", `<a href="${targetUrl}">${targetUrl}</a>`)}`;
              countdownElement.style.opacity = 1; 
              currentTimeLeft -= 1;
              const countdownInterval = setInterval(() => {
                if (currentTimeLeft <= 0) {
                  clearInterval(countdownInterval);
                  window.location.href = targetUrl;
                }
                countdownElement.innerHTML = `${originText
                  .replace("{0}", currentTimeLeft)
                  .replace("{1}", `<a href="${targetUrl}">${targetUrl}</a>`)}`;
                currentTimeLeft -= 1;
              }, 1000);
            });
          </script>
        </th:block>
      </div>
    </article>
  </body>
</html>
