<!DOCTYPE html>
<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
  <head>
    {% include 'head.njk' %}
    <meta name="theme-color" content="#f36944">

    <script type="module" src="/assets/scripts/code-examples.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/search-list.js"></script>
    <script type="module" src="/assets/scripts/outline.js"></script>
    <script type="module" src="/assets/scripts/color-scheme.js"></script>
    <script type="module" src="/assets/scripts/theme.js"></script>
    {% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
    <script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>

    {% block head %}
      <link rel="stylesheet" href="/assets/styles/docs.css" />
    {% endblock %}

    <script type="module">
      // Set the initial color scheme before the page renders to prevent flashing
      const value = localStorage.getItem('color-scheme') || 'auto';
      const isDark = value === 'dark' || (value === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
      document.documentElement.classList.toggle('wa-dark', isDark);
    </script>
  </head>
  <body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
    {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %}
    {% set waPageAttributes = waPageAttributes or {} %}
    {% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
    <wa-page
      {% for key, value in mergedWaPageAttributes %}
        {% if value != null and value != false %}
          {{ key }}="{{ value }}"
        {% endif %}
      {% endfor %}
    >
        {% block pageHeader %}
          <header slot="header" class="wa-split">
            {# Nav toggle #}
              <wa-button appearance="plain" size="small" data-toggle-nav>
                <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
                <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
              </wa-button>

              {# Logo - Desktop #}
              <a class="brand-logo wa-desktop-only" href="/" aria-label="Web Awesome">
                {% include "logo.njk" %}
              </a>

            {#- Logo - mobile branding -#}
            <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">
              {# Logo - Mobile #}
              {% include "logo-simple.njk" %}
            </a>

            <div id="docs-toolbar" class="wa-cluster gap-s">
              <div class="wa-desktop-only wa-cluster wa-gap-2xs">
                {% include "theme-selector.njk" %}
                {% include "color-scheme-selector.njk" %}
                {% include "github-icon-buttons.njk" %}
              </div>
              {#- Login -#}
              {% include "login-or-avatar.njk" ignore missing %}
            </div>
          </header>
        {% endblock %}

      {# Sidebar #}
      {% if hasSidebar %}
        {# Mobile selectors #}
        <div class="wa-mobile-only" slot="navigation-header">
          <div class="wa-cluster wa-gap-s">
            <a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
            <div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
              {% include "theme-selector.njk" %}
              {% include "color-scheme-selector.njk" %}
              {% include "github-icon-buttons.njk" %}
            </div>
          </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 #}
        {% if hasOutline %}
        <nav id="outline-expandable">
          <details class="outline-links">
            <summary>On this page</summary>
          </details>
        </nav>
        {% endif %}

        <div id="flashes">{% server "flashes" %}</div>

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

        {% block beforeContent %}{% endblock %}

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

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

      {% include 'search.njk' %}

      {# Footer #}
      {% block pageFooter %}{% endblock %}
    </wa-page>

  </body>
</html>
