<!DOCTYPE html>
<html
  lang="en"
  data-layout="{{ layout }}"
  data-terra-ui-components-version="{{ meta.version }}"
>
    <head>
        {# Metadata #}
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="description" content="{{ meta.description }}"/>
        <title>{{ meta.title }}</title>

        {# Opt out of Turbo caching #}
        <meta name="turbo-cache-control">

        {# Stylesheets #}
        <link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}"/>
        <link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}"/>
        <link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}"/>

        {# Favicons #}
        <link rel="icon" href="{{ assetUrl('images/logo.white.png') }}" type="image/x-icon"/>

        {# Twitter Cards #}
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:creator" content="nasa_terra-ui"/>
        <meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}"/>

        {# OpenGraph #}
        <meta property="og:url" content="{{ rootUrl(page.url, true) }}"/>
        <meta property="og:title" content="{{ meta.title }}"/>
        <meta property="og:description" content="{{ meta.description }}"/>
        <meta property="og:image" content="{{ assetUrl(meta.image, true) }}"/>

        {# Components #}
        <link rel="stylesheet" href="/dist/themes/horizon.css"/>
        <script type="module" src="/dist/terra-ui-components-autoloader.js"></script>

        {# Set the initial theme and menu states here to prevent flashing #}
        <script>
            (() => {
                const prefersDark = window
                    .matchMedia('(prefers-color-scheme: dark)')
                    .matches;
                const theme = localStorage.getItem('theme') || 'auto';
                document
                    .documentElement
                    .classList
                    .toggle('terra-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
            })();
        </script>

        {# Turbo + Scroll positioning #}
        <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
        <script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
        <script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
        <script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
        <script src="{{ assetUrl('scripts/search.js') }}" defer></script>

        <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=Bebas+Neue&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=DM+Mono&family=Inter&family=Public+Sans&display=swap" rel="stylesheet">

        <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/shoelace-autoloader.js"></script>
    </head>
    <body>
        <a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
      Skip to main content
    </a>

        {# Menu toggle #}
        <button id="menu-toggle" type="button" aria-label="Menu">
            <svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
                <g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
                    <path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
                </g>
            </svg>
        </button>

        {# Icon toolbar #}
        <div id="icon-toolbar">
            {# GitHub #}
            <a href="https://github.com/terra-ui/components" title="View Terra UI Components on GitHub">
                <sl-icon name="github"></sl-icon>
            </a>
            <sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
                <terra-button slot="trigger" size="large" variant="text" caret="" title="Press \ to toggle" data-optional="" data-valid="" data-user-valid="">
                    <sl-icon class="only-light" name="sun-fill" aria-hidden="true" library="default"></sl-icon>
                    <sl-icon class="only-dark" name="moon-fill" aria-hidden="true" library="default"></sl-icon>
                </terra-button>
                <sl-menu role="menu">
                    <sl-menu-item type="checkbox" value="light" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Light</sl-menu-item>
                    <sl-menu-item type="checkbox" value="dark" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Dark</sl-menu-item>
                    <sl-divider role="separator" aria-orientation="horizontal"></sl-divider>
                    <sl-menu-item type="checkbox" value="auto" tabindex="0" role="menuitemcheckbox" aria-checked="true" aria-disabled="false" checked="">System</sl-menu-item>
                </sl-menu>
            </sl-dropdown>
        </div>

        <aside id="sidebar" data-preserve-scroll>
            <header>
                <a href="/" class="sidebar-logo">
                    <img src="{{ assetUrl('images/logo.svg') }}" alt="Terra UI Components"/>
                    Terra UI Components
                </a>
                <div class="sidebar-version">
                    {{ meta.version }}
                </div>
            </header>

            <div class="sidebar-buttons">
                <terra-button size="small" class="repo-button repo-button--github" href="https://github.com/terra-ui/components" target="_blank">
                    <sl-icon slot="prefix" name="github"></sl-icon> Code
        </terra-button>
                <terra-button size="small" class="repo-button repo-button--star" href="https://github.com/terra-ui/components/stargazers" target="_blank">
                    <sl-icon slot="prefix" name="star-fill"></sl-icon> Star
        </terra-button>
            </div>

            <button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
                <sl-icon name="search"></sl-icon>
                <span>Search</span>
            </button>

            <nav>
                {% include 'sidebar.njk' %}
            </nav>
        </aside>

        {# Content #}
        <main>
            <a id="main-content"></a>
            <article id="content" class="content{% if (meta.toc is defined and meta.toc) or (meta.toc is not defined and toc) %} content--with-toc{% endif %}">
                {% if (meta.toc is defined and meta.toc) 
                    or(meta.toc is not defined and toc) %}
                    <div class="content__toc">
                        <ul>
                            <li class="top">
                                <a href="#">{{ meta.title }}</a>
                            </li>
                        </ul>
                    </div>
                {% endif %}

                <div class="content__body">
                    {% block content %}
                        {{ content | safe }}
                    {% endblock %}
                </div>
            </article>
        </main>
    </body>
</html>