<!doctype html>
<html lang="{{ theme_locale ?? 'en-US' }}"
  data-color-scheme="{{ (option.color_scheme ?? {})|json_encode|raw|e("html_attr") }}"
  class="group/html">

<head>
  {% include "@theme/snippets/script-tags/head.twig" %}

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="">

  <link rel="icon" type="image/x-icon"
    href="{{ option.brand.favicon ?? ('favicon.ico' | asset_url) }}">

  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.34.0/tabler-icons.min.css" />
  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:wght@100;300;400;500;600;700&display=swap"
    rel="stylesheet">

  {% if option.pwa.is_enabled is defined and option.pwa.is_enabled %}
  <link rel="manifest" href="app.webmanifest">
  {% endif %}

  <meta name="description" content="{{ option.site.description ?? null }}">
  <meta name="keywords" content="{{ option.site.keywords ?? null }}">

  <style>
    :root {
      /* Typography */
      --font-family-primary: 'Inter', sans-serif;
      --font-family-secondary: 'Inter', sans-serif;
      --font-family-editor: 'Inter', sans-serif;
      --font-family-editor-heading: 'Noto Serif';

      /* Theme colors */

      /* Primary text color */
      /* Solid/Gray/Dark/Gray - 700 (Dark) */
      --color-primary: 36 40 44;

      /* Secondary text color (sidebar menu) */
      /* Solid/Gray/Dark/Gray - 500 (Dark) */
      --color-secondary: 90 93 96;

      /* Tertiary text color */
      /* Solid/Gray/Dark/Gray - 200 (Dark) */
      --color-tertiary: 172 174 175;

      /* Solid/Gray/Dark/Gray - 700 (Dark) */
      --color-accent: 36 40 44;

      /* Primary background color */
      --color-contrast-primary: 255 255 255;

      /* Secondary background color (cards, sidebar) */
      /* Solid/Gray/Dark/Gray - 25 (Dark) */
      --color-contrast-secondary: 245 246 246;

      /* Solid/Primary/Main-1/Brand - 700 V1 */
      --color-contrast-accent: 211 243 107;

      /* Solid/Gray/Dark/Gray - 100 (Dark) state:active, hover */
      --color-line-primary: 200 201 202;

      /* Solid/Gray/Dark/Gray - 50 (Dark) inputs */
      --color-line-secondary: 227 228 228;

      /* Solid/Gray/Dark/Gray - 25 (Dark) state: normal */
      --color-line-tertiary: 245 246 246;

      /* Solid/Gray/Dark/Gray - 700 (Dark) */
      --color-line-accent: 36 40 44;

      /* Solid/Notifications/Information/Info - 700 */
      --color-info: 0 166 251;

      /* Solid/Notifications/Success/Success - 700 */
      --color-success: 48 200 98;

      /* Solid/Notifications/Fail/Fail - 700 */
      --color-failure: 254 81 87;
    }

    :root[data-mode="dark"] {
      /* Theme colors */

      /* Primary text color */
      /* Solid/Gray/Dark/Gray - 50 (Dark) */
      --color-primary: 227 228 228;

      /* Secondary text color (sidebar menu) */
      /* Solid/Gray/Dark/Gray - 200 (Dark) */
      --color-secondary: 172 174 175;

      /* Tertiary text color */
      /* Solid/Gray/Dark/Gray - 400 (Dark) */
      --color-tertiary: 118 120 123;

      /* Primary background color */
      /* Solid/Gray/Dark/Gray - 700 (Dark) */
      --color-contrast-primary: 36 40 44;

      /* Secondary background color (cards, sidebar) */
      /* Solid/Gray/Dark/Gray - 800 (Dark) */
      --color-contrast-secondary: 22 25 27;
      /* Solid/Gray/Dark/Gray - 600 (Dark) */
      /*--color-contrast-secondary: 63 66 70;*/

      /* Solid/Gray/Dark/Gray - 300 (Dark) */
      --color-line-primary: 145 147 149;

      /* Solid/Gray/Dark/Gray - 400 (Dark) */
      --color-line-secondary: 118 120 123;

      /* Solid/Gray/Dark/Gray - 600 (Dark) */
      --color-line-tertiary: 63 66 70;

      /* Solid/Primary/Main-1/Brand - 700 V1 */
      --color-line-accent: 211 243 107;
    }
  </style>

  <title>
    {% block title %}{% endblock %}
    {{ block('title') is empty ? '' : ' | ' }}
    {{ option.site.name ?? null }}
  </title>

  <script>
    window.currency = JSON.parse('{{currency|json_encode|raw}}');
    document.cookie = `locale={{theme_locale}}; expires=${new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365).toGMTString()}; path=/`
  </script>

  <script>
    let scheme = {
      ...{
        modes: ['light', 'dark'],
        default: 'system',
      },
      ...JSON.parse(document.documentElement.dataset.colorScheme),
    };

    if (scheme.modes.length > 1) {
      if (!('mode' in localStorage) || scheme.modes.indexOf(localStorage.mode) === -1) {
        if (scheme.default === 'system') {
          localStorage.mode = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'dark'
            : 'light';
        } else {
          localStorage.mode = scheme.default;
        }
      }
    } else if (scheme.modes.length === 1) {
      localStorage.mode = scheme.modes[0];
    } else {
      localStorage.mode = window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark'
        : 'light';
    }

    document.documentElement.dataset.mode = localStorage.mode;
  </script>
</head>

<body
  class="bg-contrast-primary text-primary font-primary data-[overlay]:overflow-hidden data-[overlay]:pr-[var(--scrollbar-width)] group/body"
  x-data="">
  {% include "@theme/snippets/script-tags/body.twig" %}

  <div class="container">
    {% include "@theme/sections/header.twig" %}
    {% block template %}{% endblock %}
    {% include "@theme/sections/footer.twig" %}
  </div>

  <script src="{{ 'theme.js' | asset_url }}"></script>

  {% include "@theme/snippets/script-tags/end.twig" %}
</body>

</html>