<!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>

    {% if pageType == 'marketing' %}
      {# Marketing styles #}
      <link rel="stylesheet" href="/assets/styles/marketing.css" />
    {% else %}
      {# Docs styles (default) #}
      <link rel="stylesheet" href="/assets/styles/docs.css" />
    {% endif %}


    {% block head %}{% 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>

    <script type="module">
      // Set the initial theme before the page renders to prevent flashing
      const savedTheme = localStorage.getItem('theme') || 'default';

      // Update the theme stylesheet link first
      const themeStylesheet = document.getElementById('theme-stylesheet');
      if (themeStylesheet) {
        themeStylesheet.href = `/dist/styles/themes/${savedTheme}.css`;
      }

      if (savedTheme !== 'default') {
        document.documentElement.classList.add(`wa-theme-${savedTheme}`);
      }
    </script>
  </head>
  <body class="layout-{{ layout | stripExtension }} page-{{ page.fileSlug or 'home' }}{{ ' page-wide' if wide }} page-{{ pageType or 'docs' }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
    <wa-page view="desktop" disable-navigation-toggle {% if pageType == 'marketing' %}disable-sticky="header"{% endif %} mobile-breakpoint="1180">
      {% if pageHeader %}
        {% include pageHeader %}
      {% else %}
        <header slot="header" class="wa-split">
          {# Logo #}
          <div id="docs-branding">
            {# Nav toggle #}
            <wa-button appearance="plain" size="small" data-toggle-nav>
              <wa-icon name="bars" label="Toggle navigation"></wa-icon>
            </wa-button>

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

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

            <wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>

            <div id="github-buttons" class="wa-cluster wa-gap-xs">
              <wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
                <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
              </wa-button>
              <wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
              <wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
                <wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
              </wa-button>
              <wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
            </div>

            <wa-divider orientation="vertical"></wa-divider>

            {# Login #}
            {% server "loginOrAvatar" %}
          </div>
        </header>
      {% endif %}

      {# Sidebar #}
      {% if hasSidebar %}
        {# Mobile selectors #}
        <div class="wa-mobile-only" slot="navigation-header">
          <div class="wa-cluster wa-gap-xs" style="flex-wrap: nowrap;">
            {% include "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 #}
        {% 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 #}
      {% if pageFooter %}
        {% include pageFooter %}
      {% endif %}
    </wa-page>

  </body>
</html>
