<!DOCTYPE html>
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ description }}">
    {% if noindex %}<meta name="robots" content="noindex">{% endif %}

    <title>{{ title }}</title>

    <link rel="icon" href="/assets/images/webawesome-logo.svg" />
    <link rel="apple-touch-icon" href="/assets/images/app-icon.png">

    {# Scripts #}
    {# Hydration stuff #}
    <script src="/assets/scripts/hydration-errors.js"></script>
    <link rel="stylesheet" href="/assets/styles/hydration-errors.css">
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>

    {# Web Awesome #}
    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
    <link rel="stylesheet" id="theme-stylesheet" />
    <link rel="stylesheet" href="/dist/themes/applied.css" />
    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
    <link rel="stylesheet" href="/dist/themes/forms.css" />

    {# Set the theme to prevent flashing #}
    <script>
      function getColorScheme() {
        return localStorage.getItem('colorScheme') || 'auto';
      }

      function getPresetTheme () {
        return localStorage.getItem('presetTheme') || 'default';
      }

      function isDark() {
        const colorScheme = getColorScheme()
        if (colorScheme === 'auto') {
          return window.matchMedia('(prefers-color-scheme: dark)').matches;
        }
        return colorScheme === 'dark';
      }

      const stylesheet = document.getElementById("theme-stylesheet")
      let preset = getPresetTheme()

      stylesheet.href = `/dist/themes/${preset}.css`

      document.documentElement.classList.toggle(
        `wa-theme-${preset}-dark`,
        isDark()
      );
    </script>
  </head>
  <body class="layout-{{ layout | stripExtension }}">

        {% block beforeContent %}{% endblock %}

        {% block content %}
          {{ content | safe }}
        {% endblock %}

        {% block afterContent %}{% endblock %}

  </body>
</html>
