<!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 }}">
    <meta name="theme-color" content="#f36944">
    {% 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>

    <script type="module" src="/assets/scripts/code-examples.js"></script>
    <script type="module" src="/assets/scripts/color-scheme.js"></script>
    <script type="module" src="/assets/scripts/copy-code.js"></script>
    <script type="module" src="/assets/scripts/preset-theme.js"></script>
    <script type="module" src="/assets/scripts/scroll.js"></script>
    <script type="module" src="/assets/scripts/turbo.js"></script>
    <script type="module" src="/assets/scripts/search.js"></script>
    <script type="module" src="/assets/scripts/outline.js"></script>
    <script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>

    {# Web Awesome #}
    <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
    <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
    <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" />

    {# Docs styles #}
    <link rel="stylesheet" href="/assets/styles/docs.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 oldStylesheet = document.querySelector("#theme-stylesheet")

      const newStylesheet = document.createElement("link")

      let preset = getPresetTheme()
      newStylesheet.href = `/dist/themes/${preset}.css`
      newStylesheet.rel = "preload"
      newStylesheet.as = "style"

      document.head.append(newStylesheet)

      function updateStylesheet () {
        newStylesheet.rel = "stylesheet"
        newStylesheet.id = "theme-stylesheet"
        requestAnimationFrame(() => oldStylesheet.remove())
      }

      newStylesheet.addEventListener("load", updateStylesheet)

      document.documentElement.classList.toggle(
        `wa-theme-${preset}-dark`,
        isDark()
      );
    </script>
  </head>
  <body class="layout-{{ layout | stripExtension }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
    <wa-page view="desktop" disable-navigation-toggle="">
      <header slot="header">
        {# Logo #}
        <div id="docs-branding">
          {# Nav toggle #}
          <wa-button appearance="text" size="small" data-toggle-nav>
            <wa-icon name="bars" label="Toggle navigation"></wa-icon>
          </wa-button>

          <a href="/" aria-label="Web Awesome">
            <span class="only-desktop">{% include "logo.njk" %}</span>
            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
          </a>
          <small id="version-number" class="only-desktop">{{ package.version }}</small>
          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
        </div>

        <div id="docs-toolbar">
          {# Desktop selectors #}
          <div class="only-desktop">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>

          {# Search #}
          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
            Search
            <kbd slot="suffix" class="only-desktop">/</kbd>
          </wa-button>
        </div>
      </header>

      {# Sidebar #}
      {% if hasSidebar %}
        {# Mobile selectors #}
        <div class="only-mobile" slot="navigation-header">
          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>
        </div>
        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
          {% include "sidebar.njk" %}
        </div>
      {% endif %}

      {# Outline #}
      {% if hasOutline %}
        <aside slot="aside" id="outline" class="docs-aside">
          <nav id="outline-standard" class="outline-links">
            <h2><a href="#content">{{ title }}</a></h2>
          </nav>
        </aside>
      {% endif %}

      {# Main #}
      <main id="content">
        {# Expandable outline #}
        <nav id="outline-expandable">
          <details class="outline-links">
            <summary>On this page</summary>
          </details>
        </nav>

        {% block beforeContent %}{% endblock %}

        {% block content %}
          <h1 class="title">{{ title }}</h1>

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

        {% block afterContent %}{% endblock %}
      </main>

      {% include 'search.njk' %}
    </wa-page>

  </body>
</html>
