<!doctype html>
<html
  lang="zh-CN"
  th:fragment="html (content, showAside, pageTitle, head)"
  th:data-page-transition="${theme.config.style.page_transition ?: 'fade-scale'}"
  th:data-nav-active="${theme.config.style.nav_active_indicator != false}"
>
  <head>
    <th:block th:replace="~{modules/seo :: seo(pageTitle=${pageTitle})}" />

    <th:block th:if="${head} != null">
      <th:block th:replace="${head}" />
    </th:block>

    <th:block th:if="${theme.config.custom.preconnect_urls != null and !theme.config.custom.preconnect_urls.isEmpty()}">
      <th:block th:each="item : ${theme.config.custom.preconnect_urls}">
        <link rel="preconnect" th:href="${item.url}" crossorigin />
        <link rel="dns-prefetch" th:href="${item.url}" />
      </th:block>
    </th:block>

    <link
      rel="preload"
      th:href="@{/assets/fonts/JetBrainsMono-Regular/6096f8ea8ec1ddec37a08da471025894.woff2}"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="stylesheet"
      th:href="@{/assets/fonts/JetBrainsMono-Regular/jetBrainsMonoRegular.css?v={version}(version=${theme.spec.version})}"
      media="print"
      onload="this.media = 'all'"
    />
    <link
      rel="stylesheet"
      th:href="@{/assets/fonts/JetBrainsMono-Italic/jetBrainsMonoItalic.css?v={version}(version=${theme.spec.version})}"
      media="print"
      onload="this.media = 'all'"
    />

    <th:block th:if="${theme.config.style?.logo_font_css}">
      <style th:utext="${theme.config.style.logo_font_css}"></style>
    </th:block>

    <th:block th:if="${theme.config.links?.title_font_css}">
      <style th:utext="${theme.config.links.title_font_css}"></style>
    </th:block>

    <th:block th:if="${theme.config.development.enabled}">
      <script type="module" src="http://localhost:5173/@vite/client"></script>
      <script type="module" src="http://localhost:5173/main.ts"></script>
    </th:block>

    <th:block th:unless="${theme.config.development.enabled}">
      <th:block th:if="${theme.config.style?.font_source == null or theme.config.style.font_source == 'theme'}">
        <link rel="stylesheet" th:href="@{/assets/dist/chinese-fonts.css?v={version}(version=${theme.spec.version})}" />
      </th:block>
      <th:block th:if="${theme.config.style?.font_source == 'custom' and theme.config.style?.custom_font_css}">
        <style th:utext="${theme.config.style.custom_font_css}"></style>
      </th:block>
      <link rel="stylesheet" th:href="@{/assets/dist/main.css?v={version}(version=${theme.spec.version})}" />
      <script type="module" th:src="@{/assets/dist/main.js?v={version}(version=${theme.spec.version})}"></script>
    </th:block>
    <style th:inline="text">
      :root,
      :root.light,
      :root.dark {
        --c-primary: [(${theme.config.style.primary_color})] !important;
        --c-primary-soft: color-mix(in srgb, [(${theme.config.style.primary_color})], transparent 85%) !important;
        --c-accent: [(${theme.config.style.accent_color})] !important;
      }
    </style>
    <script th:inline="javascript" data-theme-config>
      window.themeConfig = window.themeConfig || {};
      window.themeConfig.custom = window.themeConfig.custom || {};
      window.themeConfig.custom.img_alt = /*[[${theme.config.custom.img_alt}]]*/ false;
      window.themeConfig.custom.enable_fancybox = /*[[${theme.config.custom.enable_fancybox}]]*/ true;
      window.themeConfig.custom.enable_swup = /*[[${theme.config.custom.enable_swup}]]*/ false;
      window.themeConfig.custom.swup_timeout = /*[[${theme.config.custom.swup_timeout}]]*/ 5000;
      window.themeConfig.custom.enable_page_jump = /*[[${theme.config.custom.enable_page_jump}]]*/ false;
      window.themeConfig.custom.caption_blacklist = /*[[${theme.config.custom.caption_blacklist}]]*/ [];
      window.themeConfig.style = window.themeConfig.style || {};
      window.themeConfig.style.theme_mode = /*[[${theme.config.style.theme_mode}]]*/ "light";
      window.themeConfig.header = window.themeConfig.header || {};
      window.themeConfig.header.menu_mouse_hover = /*[[${theme.config.header.menu_mouse_hover}]]*/ false;
    </script>
    <script>
      (function () {
        const theme = localStorage.getItem("theme") || window.themeConfig?.style?.theme_mode || "system";

        const isDark =
          theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);

        if (isDark) {
          document.documentElement.classList.add("dark");
        }
      })();
    </script>
  </head>
  <body id="clarity-root">
    <div
      id="z-sidebar-bgmask"
      class="hidden"
      onclick="
        document.getElementById('z-sidebar').classList.remove('show');
        this.classList.add('hidden');
        document.getElementById('toggle-sidebar')?.classList.remove('active');
      "
    ></div>

    <div
      id="z-aside-bgmask"
      class="hidden"
      onclick="
        document.getElementById('z-aside').classList.remove('show');
        this.classList.add('hidden');
        document.getElementById('toggle-aside')?.classList.remove('active');
      "
    ></div>

    <th:block th:replace="~{modules/sidebar :: sidebar}" />

    <div id="content">
      <main id="main-content">
        <th:block th:replace="${content}" />

        <th:block th:replace="~{modules/footer :: footer}" />
      </main>

      <th:block th:if="${showAside == null or showAside}">
        <th:block th:replace="~{modules/aside :: aside}" />
      </th:block>
      <th:block th:unless="${showAside == null or showAside}">
        <aside id="z-aside" style="display: none"></aside>
      </th:block>
    </div>

    <div id="z-panel">
      <button
        id="toggle-sidebar"
        aria-label="切换菜单"
        onclick="
          (function (btn) {
            var sb = document.getElementById('z-sidebar'),
              mk = document.getElementById('z-sidebar-bgmask');
            sb.classList.toggle('show');
            mk.classList.toggle('hidden');
            btn.classList.toggle('active');
          })(this)
        "
      >
        <span class="icon-[ph--sidebar-duotone] rtl-flip" style="display: block"></span>
      </button>
      <button
        th:if="${(showAside == null or showAside) and isLinksPage != true}"
        id="toggle-aside"
        aria-label="切换侧边栏"
        onclick="
          (function (btn) {
            var as = document.getElementById('z-aside'),
              mk = document.getElementById('z-aside-bgmask');
            as.classList.toggle('show');
            mk.classList.toggle('hidden');
            btn.classList.toggle('active');
          })(this)
        "
      >
        <span class="icon-[ph--align-right-duotone] rtl-flip" style="display: block"></span>
      </button>
      <button
        th:if="${isLinksPage == true and theme.config != null and theme.config.links != null and theme.config.links.enable_random != false}"
        id="mobile-random-link-btn"
        aria-label="随机穿梭"
        onclick="randomVisitLink()"
      >
        <span class="icon-[ph--shuffle-bold]" style="display: block"></span>
      </button>
      <button th:if="${docTree != null}" id="mobile-doc-tree-btn" aria-label="文档树" onclick="openDocTreeModal()">
        <span class="icon-[ph--list-duotone]" style="display: block"></span>
      </button>
      <button id="back-to-top" aria-label="返回顶部" style="display: none">
        <span class="icon-[ph--arrow-up-bold]" style="display: block"></span>
      </button>
    </div>

    <button id="pc-back-to-top" class="pc-back-to-top" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
      <svg class="svgIcon" viewBox="0 0 384 512">
        <path
          d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
        ></path>
      </svg>
    </button>

    <th:block th:replace="~{modules/music-player :: player}" />
  </body>
</html>
