<!doctype html>
<html th:lang="${#locale.toLanguageTag}" th:fragment="layout (title,head,body)">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
    <title th:text="${title}"></title>

    <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.development.enabled}">
      <script type="module" src="http://localhost:5173/@vite/client"></script>
      <script type="module" src="http://localhost:5173/main.ts"></script>
      <script type="module" src="http://localhost:5173/auth.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>
      <link
        rel="stylesheet"
        th:href="@{/assets/dist/auth/halo.css?v={version}(version=${theme.spec.version})}"
        th:if="${theme.config.auth.style == 'halo'}"
      />
      <link
        rel="stylesheet"
        th:href="@{/assets/dist/auth/animated-characters.css?v={version}(version=${theme.spec.version})}"
        th:if="${theme.config.auth.style == 'animated-characters'}"
      />
    </th:block>

    <th:block th:replace="~{gateway_fragments/common::basicScriptResources}"></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;
      }
      .halo-logo {
        display: none !important;
      }
      .returntosite-content {
        display: none !important;
      }
    </style>
    <script>
      (function () {
        const theme = localStorage.getItem("theme") || "system";
        const isDark =
          theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
        if (isDark) {
          document.documentElement.classList.add("dark");
        }
      })();
    </script>
    <th:block th:if="${head != null}">
      <th:block th:replace="${head}" />
    </th:block>
  </head>
  <body id="clarity-root">
    <th:block th:if="${theme.config.auth.style == 'animated-characters'}">
      <th:block th:replace="~{gateway_fragments/modules/animated-characters :: layout(${title}, ${head}, ${body})}" />
    </th:block>
    <th:block th:if="${theme.config.auth.style == 'halo' or theme.config.auth.style == null}">
      <th:block th:replace="~{gateway_fragments/modules/halo :: layout(${title}, ${head}, ${body})}" />
    </th:block>
  </body>
</html>
