<html
  xmlns:th="http://www.thymeleaf.org"
  th:with="color_schema = ${theme.config?.styles?.color_schema},
           theme_auto = ${theme.config?.styles?.theme_auto},
           theme_light = ${theme.config?.styles?.theme_light},
           theme_dark = ${theme.config?.styles?.theme_dark},
           custom_color_schema_config = ${theme.config?.styles?.custom_color_schema},
           custom_color_schema_init_id = ${theme.config?.styles?.custom_color_schema_init_id},
           custom_theme_auto_id = ${theme.config?.styles?.custom_theme_auto_id},
           custom_theme_light_id = ${theme.config?.styles?.custom_theme_light_id},
           custom_theme_dark_id = ${theme.config?.styles?.custom_theme_dark_id},
           page_language=${language ?: ('' + param.lang != '' ? '' + param.lang : (theme.config?.global?.default_page_language ?: 'zh'))},
           siteUrl = ${#strings.substring(site.url, #strings.length(site.url) - 1) == '/'
                       ? #strings.substring(site.url, 0, #strings.length(site.url) - 1)
                       : site.url},
           isSidebar = ${theme.config?.styles?.footer_content_sidebar_position != 'inline'},
           isBottomSidebarContent = ${theme.config?.styles?.is_footer_content_show
                                      or theme.config?.styles?.is_18n_footer_content_show}"
  th:lang="${page_language}"
  th:attr="data-color-scheme = ${color_schema} == 'custom' ? 'auto' :
                               (${color_schema} == 'auto' ? 'auto' :
                               (${color_schema} == 'light' ? 'light' :
                               (${color_schema} == 'dark' ? 'dark' :
                               (${color_schema} == 'auto-blue' ? 'auto' :
                               (${color_schema} == 'light-blue' ? 'light' :
                               (${color_schema} == 'dark-blue' ? 'dark' :
                               (${color_schema} == 'gray' ? 'light' : 'auto'))))))),
           theme = ${color_schema} != 'custom' ? ${color_schema} : 'theme-'+${custom_color_schema_init_id}"
  th:fragment="html"
>
  <head>
    <meta charset="utf-8" />
    <meta
      th:if="${theme.config?.global?.upgrade_insecure_requests}"
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <th:block
      th:if="${theme.config?.global?.is_performance_monitor_enable}"
      th:insert="~{components/performance-monitor/template :: head}"
    ></th:block>
    <th:block th:insert="~{components/meta-theme-color/template :: head}"></th:block>
    <meta name="color-scheme" content="light dark" />
    <title th:text="${#strings.defaultString(title, site.title)}"></title>
    <th:block th:if="${pluginFinder.available('PluginFeed')}">
      <link rel="alternate" type="application/rss+xml" title="Posts - All" th:href="@{'/rss.xml'}" />
    </th:block>
    <th:block th:each="item : ${theme.config?.sns?.sns_list}">
      <th:block th:if="${item?.type == 'rss'}" th:with="href = ${item?.input_value}">
        <link
          th:if="${href != '/rss.xml' or !pluginFinder.available('PluginFeed')}"
          rel="alternate"
          type="application/rss+xml"
          title="RSS feed"
          th:href="@{${href}}"
        />
      </th:block>
    </th:block>
    <th:block th:if="${theme.config?.styles?.is_custom_font_files_enable}">
      <th:block
        th:each="fontConfig : ${theme.config?.styles?.custom_font_configs}"
        th:with="fontFile = ${fontConfig.font_file},
                fontExt = ${fontFile.substring(fontFile.lastIndexOf('.') + 1)},
                fontMime = ${fontExt == 'woff2'
                             ? 'font/woff2'
                             : (fontExt == 'woff'
                                ? 'font/woff'
                                : (fontExt == 'ttf'
                                   ? 'font/ttf'
                                   : (fontExt == 'otf'
                                      ? 'font/otf'
                                      : (fontExt == 'sfnt'
                                         ? 'font/sfnt'
                                         : (fontExt == 'eot'
                                            ? 'application/vnd.ms-fontobject'
                                            : ((fontExt == 'ttc'
                                                or fontExt == 'otc')
                                               ? 'font/collection'
                                               : 'application/octet-stream'))))))}"
      >
        <link rel="preload" th:href="${fontFile}" as="font" th:type="${fontMime}" crossorigin />
      </th:block>
      <th:block
        th:if="${theme.config?.styles?.is_custom_font_files_enable}"
        th:insert="~{components/custom-font-face-style/template :: body}"
      ></th:block>
      <style>:root{--higan-font-family:custom, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"!important}:root.webkit{--higan-font-family:custom!important}</style>
    </th:block>
    <script>
      (function (userAgent) {
        if (!/(apple)?webkit\/537\.36/i.test(userAgent) && /(apple)?webkit/i.test(userAgent)) {
          document.documentElement.classList.add("webkit");
        }
      })(navigator.userAgent);
    </script>
    <th:block
      th:insert="~{components/footer-sidebar/template :: head(
                    isSidebar = ${isSidebar},
                    isBottomSidebarContent = ${isBottomSidebarContent}
                  )}"
    >
    </th:block>
    <th:block
      th:if="${theme.config?.styles?.is_custom_cursor_files_enable}"
      th:insert="~{components/custom-cursor-style/template :: body}"
    ></th:block>
    <th:block th:unless="${theme.config?.styles?.is_custom_cursor_files_enable}">
      <style>.v-cursor-pointer{cursor:pointer}</style>
    </th:block>
    <th:block
      th:if="${color_schema == 'custom'
               or theme_dark == 'custom'
               or theme_light == 'custom'
               or theme_auto == 'custom'}"
      th:insert="~{components/custom-color-schema-config/template :: head}"
    ></th:block>
    <script th:if="${color_schema == 'custom'}" th:data-custom-color-schema-init-id="${custom_color_schema_init_id}">
      (function (dataset) {
        const matchedSchema = allCustomColorSchema.find((schema) => schema.id === dataset?.customColorSchemaInitId);
        if (!matchedSchema?.type) {
          return;
        }
        document.documentElement.setAttribute("data-color-scheme", matchedSchema.type);
      })(document.currentScript?.dataset);
    </script>
    <th:block
      th:if="${!#lists.isEmpty(custom_color_schema_config)
               and (color_schema == 'custom'
                    or theme_dark == 'custom'
                    or theme_light == 'custom'
                    or theme_auto == 'custom')}"
    >
      <th:block th:each="colorSchema : ${custom_color_schema_config}">
        <th:block
          th:if="${custom_color_schema_init_id == colorSchema.id or 
                   custom_theme_auto_id == colorSchema.id or 
                   custom_theme_light_id == colorSchema.id or 
                   custom_theme_dark_id == colorSchema.id}"
        >
          <th:block
            th:if="${colorSchema.type == 'dark'}"
            th:insert="~{components/color-scheme-dark/template :: head}"
          ></th:block>
          <th:block
            th:if="${colorSchema.type == 'light'}"
            th:insert="~{components/color-scheme-light/template :: head}"
          ></th:block>
          <th:block
            th:if="${colorSchema.type == 'auto'}"
            th:insert="~{components/color-scheme-auto/template :: head}"
          ></th:block>
          <th:block
            th:insert="~{components/custom-color-schema-style/template :: body(colorSchema=${colorSchema})}"
          ></th:block>
        </th:block>
      </th:block>
    </th:block>
    <th:block th:unless="${theme.config?.styles?.is_show_color_scheme_toggle_button}">
      <th:block
        th:if="${color_schema == 'light'
                 or color_schema == 'light-blue'
                 or color_schema == 'gray'}"
        th:insert="~{components/color-scheme-light/template :: head}"
      ></th:block>
      <th:block
        th:if="${color_schema == 'dark'
                 or color_schema == 'dark-blue'}"
        th:insert="~{components/color-scheme-dark/template :: head}"
      ></th:block>
      <th:block
        th:if="${color_schema == 'auto'
                 or color_schema == 'auto-blue'}"
        th:insert="~{components/color-scheme-auto/template :: head}"
      ></th:block>
    </th:block>
    <th:block th:if="${theme.config?.styles?.is_show_color_scheme_toggle_button}">
      <th:block
        th:if="${theme_dark == 'light'
                 or theme_light == 'light'
                 or theme_auto == 'light'
                 or color_schema == 'light'
                 or theme_dark == 'light-blue'
                 or theme_light == 'light-blue'
                 or theme_auto == 'light-blue'
                 or color_schema == 'light-blue'
                 or theme_dark == 'gray'
                 or theme_light == 'gray'
                 or theme_auto == 'gray'
                 or color_schema == 'gray'}"
        th:insert="~{components/color-scheme-light/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'dark'
                 or theme_light == 'dark'
                 or theme_auto == 'dark'
                 or color_schema == 'dark'
                 or theme_dark == 'dark-blue'
                 or theme_light == 'dark-blue'
                 or theme_auto == 'dark-blue'
                 or color_schema == 'dark-blue'}"
        th:insert="~{components/color-scheme-dark/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'auto'
                 or theme_light == 'auto'
                 or theme_auto == 'auto'
                 or color_schema == 'auto'
                 or theme_dark == 'auto-blue'
                 or theme_light == 'auto-blue'
                 or theme_auto == 'auto-blue'
                 or color_schema == 'auto-blue'}"
        th:insert="~{components/color-scheme-auto/template :: head}"
      ></th:block>
    </th:block>
    <th:block th:unless="${theme.config?.styles?.is_show_color_scheme_toggle_button}">
      <th:block
        th:if="${color_schema == 'auto-blue'}"
        th:insert="~{components/theme-auto-blue/template :: head}"
      ></th:block>
      <th:block th:if="${color_schema == 'auto'}" th:insert="~{components/theme-auto/template :: head}"></th:block>
      <th:block
        th:if="${color_schema == 'dark-blue'}"
        th:insert="~{components/theme-dark-blue/template :: head}"
      ></th:block>
      <th:block th:if="${color_schema == 'dark'}" th:insert="~{components/theme-dark/template :: head}"></th:block>
      <th:block th:if="${color_schema == 'gray'}" th:insert="~{components/theme-gray/template :: head}"></th:block>
      <th:block
        th:if="${color_schema == 'light-blue'}"
        th:insert="~{components/theme-light-blue/template :: head}"
      ></th:block>
      <th:block th:if="${color_schema == 'light'}" th:insert="~{components/theme-light/template :: head}"></th:block>
    </th:block>
    <th:block th:if="${theme.config?.styles?.is_show_color_scheme_toggle_button}">
      <th:block
        th:if="${theme_dark == 'auto-blue'
                 or theme_light == 'auto-blue'
                 or theme_auto == 'auto-blue'
                 or color_schema == 'auto-blue'}"
        th:insert="~{components/theme-auto-blue/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'auto'
                 or theme_light == 'auto'
                 or theme_auto == 'auto'
                 or color_schema == 'auto'}"
        th:insert="~{components/theme-auto/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'dark-blue'
                 or theme_light == 'dark-blue'
                 or theme_auto == 'dark-blue'
                 or color_schema == 'dark-blue'}"
        th:insert="~{components/theme-dark-blue/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'dark'
                 or theme_light == 'dark'
                 or theme_auto == 'dark'
                 or color_schema == 'dark'}"
        th:insert="~{components/theme-dark/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'gray'
                 or theme_light == 'gray'
                 or theme_auto == 'gray'
                 or color_schema == 'gray'}"
        th:insert="~{components/theme-gray/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'light-blue'
                 or theme_light == 'light-blue'
                 or theme_auto == 'light-blue'
                 or color_schema == 'light-blue'}"
        th:insert="~{components/theme-light-blue/template :: head}"
      ></th:block>
      <th:block
        th:if="${theme_dark == 'light'
                 or theme_light == 'light'
                 or theme_auto == 'light'
                 or color_schema == 'light'}"
        th:insert="~{components/theme-light/template :: head}"
      ></th:block>
    </th:block>
    <th:block
      th:if="${theme.config?.styles?.text_size == 'small'}"
      th:insert="~{components/text-size-small/template :: head}"
    ></th:block>
    <th:block
      th:if="${theme.config?.styles?.text_size == 'normal'}"
      th:insert="~{components/text-size-normal/template :: head}"
    ></th:block>
    <th:block
      th:if="${theme.config?.styles?.text_size == 'large'}"
      th:insert="~{components/text-size-large/template :: head}"
    ></th:block>
    <th:block th:insert="~{components/inline-code-style/template :: head}"></th:block>
    <th:block th:insert="~{components/dark-content-text-style/template :: head}"></th:block>
    <script
      th:if="${theme.config?.global?.anti_mirror_site}"
      th:data-target-url="${theme.config?.global?.target_url}"
      th:data-domain-whitelist="${#lists.isEmpty(theme.config?.global?.allow_site_whitelist)
                                  ? null
                                  : #strings.listJoin(theme.config?.global?.allow_site_whitelist.![input_domain], ' ')}"
      th:data-keep-path-and-query="${theme.config?.global?.is_keep_path_and_query}"
    >
      (function (dataset) {
        const encodedRedirectUrl = dataset?.targetUrl?.trim();
        if (!encodedRedirectUrl) {
          return;
        }
        const rawDomainWhiteList = dataset?.domainWhitelist?.trim();
        if (!rawDomainWhiteList) {
          return;
        }
        const domainWhiteList = rawDomainWhiteList.split(" ").map((item) => atob(item));
        const isKeepPathAndQuery = dataset?.keepPathAndQuery === "true";
        const targetRedirectUrl = isKeepPathAndQuery
          ? atob(encodedRedirectUrl) + window.location.pathname + window.location.search
          : atob(encodedRedirectUrl);
        if (!domainWhiteList.includes(document.location.hostname)) {
          window.location.href = targetRedirectUrl;
        }
      })(document.currentScript?.dataset);
    </script>
    <script
      th:if="${theme.config?.global?.is_auto_redirect_to_browser_language}"
      th:with="page_language_override=${language},
               requested_language_param=${'' + param.lang},
               default_page_language=${theme.config?.global?.default_page_language},
               auto_redirect_target_languages=${#lists.isEmpty(theme.config?.global?.auto_redirect_target_language_list)
                                                ? null
                                                : #strings.listJoin(theme.config?.global?.auto_redirect_target_language_list.![v], ',')},
               is_prefix_match_mode=${theme.config?.global?.is_i18n_prefix_match_mode}"
      th:data-page-language-override="${page_language_override}"
      th:data-requested-language-param="${requested_language_param}"
      th:data-default-page-language="${default_page_language}"
      th:data-auto-redirect-target-languages="${auto_redirect_target_languages}"
      th:data-prefix-match-mode="${is_prefix_match_mode}"
    >
      (function (dataset) {
        const pageLanguageOverride = dataset?.pageLanguageOverride;
        if (pageLanguageOverride) {
          return;
        }
        const requestedLanguageParam = dataset?.requestedLanguageParam;
        if (requestedLanguageParam) {
          return;
        }
        let defaultPageLanguage = dataset?.defaultPageLanguage;
        if (!defaultPageLanguage) {
          defaultPageLanguage = "zh";
        }
        const browserLang = navigator.language;
        const autoRedirectTargetLanguages = dataset?.autoRedirectTargetLanguages?.split(",").filter(Boolean);
        if (!autoRedirectTargetLanguages?.length) {
          return;
        }
        const prefixMode = dataset?.prefixMatchMode === "true";
        const matchedLang = prefixMode
          ? autoRedirectTargetLanguages.find((lang) => browserLang.startsWith(lang))
          : autoRedirectTargetLanguages.find((lang) => browserLang === lang);
        if (!matchedLang) {
          return;
        }
        if (
          (prefixMode && defaultPageLanguage.startsWith(matchedLang)) ||
          (!prefixMode && defaultPageLanguage === matchedLang)
        ) {
          return;
        }
        const url = new URL(window.location);
        url.searchParams.set("lang", matchedLang);
        window.location.href = url;
      })(document.currentScript?.dataset);
    </script>
    <th:block th:replace="${head}"></th:block>
    <th:block
      th:if="${theme.config?.global?.is_mermaid_enable}"
      th:insert="~{components/mermaid-injection/template :: head}"
    ></th:block>
    <script
      th:if="${theme.config?.styles?.is_show_color_scheme_toggle_button}"
      th:data-theme-dark="${theme_dark}"
      th:data-theme-light="${theme_light}"
      th:data-theme-auto="${theme_auto}"
      th:data-save-color-scheme-settings-to-browser="${theme.config?.styles?.is_save_color_scheme_settings_to_browser}"
      th:data-auto-switch-color-scheme-based-on-browser-settings="${theme.config?.styles?.is_auto_switch_color_scheme_based_on_browser_settings}"
      th:data-custom-theme-dark-id="${custom_theme_dark_id}"
      th:data-custom-theme-light-id="${custom_theme_light_id}"
      th:data-custom-theme-auto-id="${custom_theme_auto_id}"
    >
      (function (dataset) {
        const customColorSchemeConfigElement = document.querySelector("#custom-color-config");
        let THEME_DARK = dataset?.themeDark;
        let THEME_LIGHT = dataset?.themeLight;
        let THEME_AUTO = dataset?.themeAuto;
        const is_save_color_scheme_settings_to_browser = dataset?.saveColorSchemeSettingsToBrowser === "true";
        const themeColorSchemeMap = {
          auto: "auto",
          dark: "dark",
          light: "light",
          "auto-blue": "auto",
          "dark-blue": "dark",
          "light-blue": "light",
          gray: "light",
        };
        if (THEME_DARK == "custom") {
          let customColorSchema = allCustomColorSchema.find((schema) => schema.id === dataset?.customThemeDarkId);
          if (customColorSchema) {
            THEME_DARK = "theme-" + customColorSchema.id;
            themeColorSchemeMap["theme-" + customColorSchema.id] = customColorSchema.type;
          }
        }
        if (THEME_LIGHT == "custom") {
          let customColorSchema = allCustomColorSchema.find((schema) => schema.id === dataset?.customThemeLightId);
          if (customColorSchema) {
            THEME_LIGHT = "theme-" + customColorSchema.id;
            themeColorSchemeMap["theme-" + customColorSchema.id] = customColorSchema.type;
          }
        }
        if (THEME_AUTO == "custom") {
          let customColorSchema = allCustomColorSchema.find((schema) => schema.id === dataset?.customThemeAutoId);
          if (customColorSchema) {
            THEME_AUTO = "theme-" + customColorSchema.id;
            themeColorSchemeMap["theme-" + customColorSchema.id] = customColorSchema.type;
          }
        }
        function updateThemeIcon(theme) {
          const themeIcon = document.getElementById("theme-toggle-button-icon");
          if (!themeIcon) return;
          themeIcon.style.removeProperty("display"); 
          Array.from(themeIcon.classList).forEach((c) => {
            if (c.startsWith("ph--")) themeIcon.classList.remove(c);
          });
          if (theme === THEME_LIGHT) {
            themeIcon.classList.add("ph--sun-bold");
          } else if (theme === THEME_DARK) {
            themeIcon.classList.add("ph--moon-bold");
          } else {
            themeIcon.classList.add("ph--circle-bold");
          }
        }
        function updateTagAttribute(theme) {
          document.documentElement.setAttribute("data-color-scheme", themeColorSchemeMap[theme]);
          document.documentElement.setAttribute("theme", theme);
        }
        function applyThemeNoSave(theme) {
          updateTagAttribute(theme);
          updateThemeIcon(theme);
        }
        function applyTheme(theme) {
          if (is_save_color_scheme_settings_to_browser === true && typeof Storage !== "undefined") {
            localStorage.setItem("pref-theme", themeColorSchemeMap[theme]);
          } else if (typeof Storage === "undefined") {
            console.log("[Higan Haozi][base-layout] Sorry, your browser does not support web storage...");
          }
          applyThemeNoSave(theme);
        }
        function getPreferredTheme() {
          const storedTheme = localStorage.getItem("pref-theme");
          if (storedTheme) {
            return storedTheme;
          }
          if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
            return "dark";
          }
          return "light";
        }
        if (is_save_color_scheme_settings_to_browser !== true && typeof Storage !== "undefined") {
          localStorage.removeItem("pref-theme");
        }
        const is_auto_switch_color_scheme_based_on_browser_settings =
          dataset?.autoSwitchColorSchemeBasedOnBrowserSettings === "true";
        if (is_auto_switch_color_scheme_based_on_browser_settings) {
          switch (getPreferredTheme()) {
            case "dark":
              updateTagAttribute(THEME_DARK);
              break;
            case "light":
              updateTagAttribute(THEME_LIGHT);
              break;
            case "auto":
              updateTagAttribute(THEME_AUTO);
              break;
          }
        }
        document.addEventListener("DOMContentLoaded", function () {
          switch (getPreferredTheme()) {
            case "dark":
              updateThemeIcon(THEME_DARK);
              break;
            case "light":
              updateThemeIcon(THEME_LIGHT);
              break;
            case "auto":
              updateThemeIcon(THEME_AUTO);
              break;
          }
        });
        function toggleTheme(event) {
          event.preventDefault(); 
          const currentTheme = document.documentElement.attributes["theme"].value;
          let newTheme;
          if (currentTheme === THEME_LIGHT) {
            newTheme = THEME_DARK;
          } else if (currentTheme === THEME_DARK) {
            newTheme = THEME_AUTO;
          } else {
            newTheme = THEME_LIGHT;
          }
          applyTheme(newTheme);
        }
        document.addEventListener("DOMContentLoaded", function () {
          document.getElementById("theme-toggle-button").addEventListener("click", toggleTheme);
        });
      })(document.currentScript?.dataset);
    </script>
    <script type="module" crossorigin src="/themes/howiehz-higan/assets/1.65.00NMFmRI.js" integrity="sha384-pAGQLjJXgEt4SJ5VkIwKJxJbSODTHc3c2ts3AlX/0ewAue2j5Y1CO+Af5ZxwZn9C"></script>
  </head>
  <body class="tw-e tw-ea" th:classappend="|text-size-${theme.config?.styles?.text_size}|">
    <script th:if="${theme.config?.global?.is_i18n_menu_show}">
      document.addEventListener("DOMContentLoaded", function () {
        const targetElementList = document.querySelectorAll(".matched-menu");
        if (targetElementList.length === 0) {
          const defaultMenus = document.querySelectorAll(".default-menu");
          defaultMenus.forEach((menu) => {
            if (menu.style.display === "none") {
              menu.style.display = ""; 
            }
          });
        } else {
          const defaultMenus = document.querySelectorAll(".default-menu");
          defaultMenus.forEach((menu) => {
            menu.remove();
          });
        }
      });
    </script>
    <script th:if="${theme.config?.index_styles?.is_i18n_resume_show}">
      document.addEventListener("DOMContentLoaded", function () {
        const targetElementList = document.querySelectorAll(".matched-resume");
        if (targetElementList.length === 0) {
          const defaultResumes = document.querySelectorAll(".default-resume");
          defaultResumes.forEach((resume) => {
            if (resume.style.display === "none") {
              resume.style.display = ""; 
            }
          });
        } else {
          const defaultResumes = document.querySelectorAll(".default-resume");
          defaultResumes.forEach((resume) => {
            resume.remove();
          });
        }
      });
    </script>
    <script th:if="${theme.config?.styles?.is_18n_footer_content_show}">
      document.addEventListener("DOMContentLoaded", function () {
        const targetElementList = document.querySelectorAll(".matched-footer-content");
        if (targetElementList.length === 0) {
          const defaultFooterContents = document.querySelectorAll(".default-footer-content");
          defaultFooterContents.forEach((footer_content) => {
            if (footer_content.style.display === "none") {
              footer_content.style.display = ""; 
            }
          });
        } else {
          const defaultFooterContents = document.querySelectorAll(".default-footer-content");
          defaultFooterContents.forEach((footer_content) => {
            footer_content.remove();
          });
        }
      });
    </script>
    <th:block
      th:if="${theme.config?.styles?.is_max_width_settings}"
      th:insert="~{components/layout-max-width-style/template :: body}"
    ></th:block>
    <th:block
      th:if="${theme.config?.styles?.is_min_width_settings}"
      th:insert="~{components/layout-min-width-style/template :: body}"
    ></th:block>
    <style th:if="${theme.config?.styles?.is_force_min_width_settings}">.min-width{min-width:var(--content-min-width)!important}</style>
    <th:block
      th:if="${theme.config?.styles?.is_content_width_style_settings}"
      th:insert="~{components/layout-content-width-style/template :: body}"
    ></th:block>
    <style th:if="${theme.config?.styles?.is_h3_underline}">body h3{text-decoration:underline}</style>
    <style th:if="${theme.config?.styles?.is_preserve_empty_lines_in_blockquote}">article .content blockquote p{margin:inherit;margin-left:0;margin-right:0}article .content blockquote p:first-child{margin-top:0}article .content blockquote p:last-child{margin-bottom:0}</style>
    <style th:if="${theme.config?.styles?.is_show_the_quote_before_blockquote}">article .content blockquote:before{color:var(--color-secondary);content:"“";vertical-align:-.4em;margin-right:.25em;font-size:2em;line-height:.1em}</style>
    <style th:if="${theme.config?.styles?.is_show_the_quote_after_blockquote}">article .content blockquote:after{color:var(--color-secondary);content:"”";float:right;vertical-align:.4em;margin-top:.4em;margin-left:.25em;font-size:2em;line-height:.1em}</style>
    <th:block
      th:if="${theme.config?.styles?.is_show_the_table_bottom_border}"
      th:insert="~{components/layout-table-bottom-border-style/template :: body}"
    ></th:block>
    <th:block th:insert="~{components/layout-heading-paragraph-margin-style/template :: body}"></th:block>
    <th:block
      th:replace="~{components/footer-sidebar/template :: body(
                    wrapped = ~{:: .max-width},
                    isSidebar = ${isSidebar},
                    isBottomSidebarContent = ${isBottomSidebarContent}
                  )}"
    >
      <div class="max-width min-width content-width tw-hc tw-ud tw-jc">
        <th:block th:replace="${navbar}"></th:block>
        <div
          class="content index tw-yc"
          th:classappend="${theme.config?.styles?.is_footer_force_bottom} ? 'min-h-100vh' : '' "
        >
          <th:block th:replace="${header}"></th:block>
          <main>
            <th:block th:replace="${content}"></th:block>
          </main>
          <footer id="footer" class="tw-gc tw-ed tw-td">
            <div class="footer-left">
              <halo:footer></halo:footer>
              <div th:if="${theme.config?.styles?.is_footer_site_stats_show}">
                <ul class="site-stats" th:with="stats = ${siteStatsFinder.getStats()}">
                  <li
                    th:each="item : ${theme.config?.styles?.footer_site_stats}"
                    th:if="${item?.type == 'visit'
                           or item?.type == 'post'
                           or item?.type == 'upvote'
                           or item?.type == 'comment'
                           or item?.type == 'category'
                           or (item?.type == 'wordcount' 
                               and pluginFinder.available('extra-api', '3.*'))}"
                  >
                    <span
                      class="iconify"
                      th:style="|--svg:url('${item?.icon.value}')|"
                      th:if="${item?.icon != null and item?.icon != ''}"
                    ></span>
                    <th:block th:if="not ${item?.i18n_text}">
                      <span th:text="${stats.visit}" th:if="${item?.type == 'visit'}"></span>
                      <span th:text="${stats.post}" th:if="${item?.type == 'post'}"></span>
                      <span th:text="${stats.upvote}" th:if="${item?.type == 'upvote'}"></span>
                      <span th:text="${stats.comment}" th:if="${item?.type == 'comment'}"></span>
                      <span th:text="${stats.category}" th:if="${item?.type == 'category'}"></span>
                      <span
                        th:text="${extraApiStatsFinder.getPostWordCount()}"
                        th:if="${item?.type == 'wordcount'}"
                      ></span>
                    </th:block>
                    <th:block th:if="${item?.i18n_text}">
                      <span th:text="#{common.siteTotalVisit(${stats.visit})}" th:if="${item?.type == 'visit'}"></span>
                      <span th:text="#{common.siteTotalPost(${stats.post})}" th:if="${item?.type == 'post'}"></span>
                      <span
                        th:text="#{common.siteTotalUpvote(${stats.upvote})}"
                        th:if="${item?.type == 'upvote'}"
                      ></span>
                      <span
                        th:text="#{common.siteTotalComment(${stats.comment})}"
                        th:if="${item?.type == 'comment'}"
                      ></span>
                      <span
                        th:text="#{common.siteTotalCategory(${stats.category})}"
                        th:if="${item?.type == 'category'}"
                      ></span>
                      <span
                        th:text="#{common.siteTotalWordcount(${extraApiStatsFinder.getPostWordCount()})}"
                        th:if="${item?.type == 'wordcount'}"
                      ></span>
                    </th:block>
                  </li>
                </ul>
              </div>
              <div
                th:if="${theme.config?.styles?.is_footer_theme_info_show
                       or theme.config?.styles?.is_footer_copyright_show}"
              >
                <br />
                <span class="info" th:if="${theme.config?.styles?.is_footer_theme_info_show}">
                  Theme is
                  <a
                    href="https://howiehz.top/halo-theme-higan-haozi/"
                    rel="noopener"
                    target="_blank"
                    th:text="${theme.config?.styles?.footer_theme_info_theme_name}"
                    >higan-hz</a
                  >
                  Powered by
                  <a
                    href="https://halo.run"
                    rel="noopener"
                    target="_blank"
                    th:text="${theme.config?.styles?.footer_theme_info_halo_version_name}"
                    >Halo</a
                  >
                </span>
                <span class="copyright" th:if="${theme.config?.styles?.is_footer_copyright_show}">
                  ©
                  <span
                    id="site_date"
                    th:with="now = ${#temporals.createNow()}"
                    th:text="${#temporals.format(now, 'yyyy')}"
                  ></span>
                  <span
                    th:text="${#strings.defaultString(theme.config?.styles?.footer_copyright_custom_name, site?.title)}"
                  ></span>
                </span>
              </div>
            </div>
            <div class="footer-right" th:if="${theme.config?.styles?.is_footer_menu_show}">
              <ul>
                <th:block th:insert="~{components/common/template :: base-menu}"></th:block>
              </ul>
            </div>
          </footer>
          <th:block
            th:if="${not isSidebar and isBottomSidebarContent}"
            th:insert="~{components/footer-bottom-content/template :: body(
                           className = 'footer-bottom',
                           classAppend = '',
                           styleText = ''
                          )}"
          ></th:block>
        </div>
      </div>
    </th:block>
    <th:block
      th:if="${theme.config?.global?.is_instant_page_enable}"
      th:insert="~{components/instantpage-injection/template :: head}"
    ></th:block>
  </body>
</html>
