<!DOCTYPE html>
<html lang="en" class="theme-{{theme.mode}}" dir="{{uiTextDirection}}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,width=device-width">
    <meta name="color-scheme" content="dark light">
    <title>{{userProjectName}}</title>
    <base href="{{basePath}}" />
    <script src="{{projectName}}/js/main{{#if isBuild}}.build{{/if}}.js" {{#if miyagiDev}}type="module"
      {{/if}}{{#if miyagiProd}}defer{{/if}}></script>
    <link rel="stylesheet" href="{{projectName}}/css/main.css">
    <style>
      html {
        {{#if theme.fontFamily}}--Miyagi-fontFamily: {{theme.fontFamily}};{{/if}}
        {{#if theme.light.navigation.colorText}}--Miyagi-color-Text: {{theme.light.navigation.colorText}};{{/if}}
        {{#if theme.light.navigation.colorBackground}}--Miyagi-color-Background: {{theme.light.navigation.colorBackground}};{{/if}}
        {{#if theme.light.navigation.colorLinks}}--Miyagi-color-Link: {{theme.light.navigation.colorLinks}};{{/if}}
        {{#if theme.light.navigation.colorLinksActive}}--Miyagi-color-Link-active: {{theme.light.navigation.colorLinksActive}};{{/if}}
        {{#if theme.light.navigation.colorLinksActiveBackground}}--Miyagi-color-Link-active-background: {{theme.light.navigation.colorLinksActiveBackground}};{{/if}}
        {{#if theme.light.navigation.colorSearchText}}--Miyagi-color-Search-text: {{theme.light.navigation.colorSearchText}};{{/if}}
        {{#if theme.light.navigation.colorSearchBackground}}--Miyagi-color-Search-background: {{theme.light.navigation.colorSearchBackground}};{{/if}}
        {{#if theme.light.navigation.colorSearchBorder}}--Miyagi-color-Search-border: {{theme.light.navigation.colorSearchBorder}};{{/if}}
      }

      @media (prefers-color-scheme: dark) {
        html {
          {{#if theme.dark.navigation.colorText}}--Miyagi-color-Text: {{theme.dark.navigation.colorText}};{{/if}}
          {{#if theme.dark.navigation.colorBackground}}--Miyagi-color-Background: {{theme.dark.navigation.colorBackground}};{{/if}}
          {{#if theme.dark.navigation.colorLinks}}--Miyagi-color-Link: {{theme.dark.navigation.colorLinks}};{{/if}}
          {{#if theme.dark.navigation.colorLinksActive}}--Miyagi-color-Link-active: {{theme.dark.navigation.colorLinksActive}};{{/if}}
          {{#if theme.dark.navigation.colorLinksActiveBackground}}--Miyagi-color-Link-active-background: {{theme.dark.navigation.colorLinksActiveBackground}};{{/if}}
          {{#if theme.dark.navigation.colorSearchText}}--Miyagi-color-Search-text: {{theme.dark.navigation.colorSearchText}};{{/if}}
          {{#if theme.dark.navigation.colorSearchBackground}}--Miyagi-color-Search-background: {{theme.dark.navigation.colorSearchBackground}};{{/if}}
          {{#if theme.dark.navigation.colorSearchBorder}}--Miyagi-color-Search-border: {{theme.dark.navigation.colorSearchBorder}};{{/if}}
        }
      }

      .theme-light {
        {{#if theme.light.navigation.colorText}}--Miyagi-color-Text: {{theme.light.navigation.colorText}};{{/if}}
        {{#if theme.light.navigation.colorBackground}}--Miyagi-color-Background: {{theme.light.navigation.colorBackground}};{{/if}}
        {{#if theme.light.navigation.colorLinks}}--Miyagi-color-Link: {{theme.light.navigation.colorLinks}};{{/if}}
        {{#if theme.light.navigation.colorLinksActive}}--Miyagi-color-Link-active: {{theme.light.navigation.colorLinksActive}};{{/if}}
        {{#if theme.light.navigation.colorLinksActiveBackground}}--Miyagi-color-Link-active-background: {{theme.light.navigation.colorLinksActiveBackground}};{{/if}}
        {{#if theme.light.navigation.colorSearchText}}--Miyagi-color-Search-text: {{theme.light.navigation.colorSearchText}};{{/if}}
        {{#if theme.light.navigation.colorSearchBackground}}--Miyagi-color-Search-background: {{theme.light.navigation.colorSearchBackground}};{{/if}}
        {{#if theme.light.navigation.colorSearchBorder}}--Miyagi-color-Search-border: {{theme.light.navigation.colorSearchBorder}};{{/if}}
      }

      .theme-dark {
        {{#if theme.dark.navigation.colorText}}--Miyagi-color-Text: {{theme.dark.navigation.colorText}};{{/if}}
        {{#if theme.dark.navigation.colorBackground}}--Miyagi-color-Background: {{theme.dark.navigation.colorBackground}};{{/if}}
        {{#if theme.dark.navigation.colorLinks}}--Miyagi-color-Link: {{theme.dark.navigation.colorLinks}};{{/if}}
        {{#if theme.dark.navigation.colorLinksActive}}--Miyagi-color-Link-active: {{theme.dark.navigation.colorLinksActive}};{{/if}}
        {{#if theme.dark.navigation.colorLinksActiveBackground}}--Miyagi-color-Link-active-background: {{theme.dark.navigation.colorLinksActiveBackground}};{{/if}}
        {{#if theme.dark.navigation.colorSearchText}}--Miyagi-color-Search-text: {{theme.dark.navigation.colorSearchText}};{{/if}}
        {{#if theme.dark.navigation.colorSearchBackground}}--Miyagi-color-Search-background: {{theme.dark.navigation.colorSearchBackground}};{{/if}}
        {{#if theme.dark.navigation.colorSearchBorder}}--Miyagi-color-Search-border: {{theme.dark.navigation.colorSearchBorder}};{{/if}}
      }
    </style>
    <style>
      {{{theme.css}}}
    </style>
  </head>
  <body>
    <nav class="Nav">
      <h1 class="Nav-title">
        <a class="Menu-link Menu-link--showAll{{#if theme.light.logo}} has-logo{{/if}}" href="{{ indexPath }}"
          target="iframe" {{#if showAll }} aria-current="page" {{/if}}>
          {{#if theme.light.logo}}
            <picture class="Nav-projectLogo">
              {{#ifEquals theme.mode "auto"}}
                <source srcset="{{ theme.dark.logo }}" media="(prefers-color-scheme: dark)">
                <source srcset="{{ theme.light.logo }}" media="(prefers-color-scheme: light)">
              {{/ifEquals}}
              <img
                src="
                  {{#ifEquals theme.mode "dark"}}{{ theme.dark.logo }}{{/ifEquals}}
                  {{#ifEquals theme.mode "light"}}{{ theme.light.logo }}{{/ifEquals}}
                  {{#ifEquals theme.mode "auto"}}{{ theme.light.logo }}{{/ifEquals}}
                "
                data-light="{{ theme.light.logo }}"
                data-dark="{{ theme.dark.logo }}"
                alt="{{ userProjectName }}"
              >
            </picture>
          {{/if}}
          <span class="Nav-projectName">Overview</span>
        </a>
      </h1>
      <button class="Nav-toggleMobileMenu" aria-label="Show menu" aria-expanded="false"></button>
      <div class="Nav-content">
        {{#if folders}}
          <div class="Menu">
            <form class="Menu-search">
              <label class="Menu-searchLabel" for="search">
                <span class="u-hiddenVisually">Search</span>
                <svg class="Menu-searchIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path d="M13.3 0h1.4c1.2.1 2.4.5 3.5 1a9.6 9.6 0 0 1 5.4 9.6 9.5 9.5 0 0 1-10.4 8.7 9.5 9.5 0 0 1-4.7-1.5l-.2-.2-.1.2-5.3 5.5c-.3.3-.6.6-1 .7h-.4l-.7-.4c-.5-.5-.5-1.2 0-1.8l5.4-5.5.3-.3-1-1.5c-1.6-3-1.8-6-.3-9A9.4 9.4 0 0 1 11.8.3l1.5-.3zm.6 2.5a7.2 7.2 0 0 0 0 14.4 7.2 7.2 0 0 0 0-14.4z" />
                </svg>
              </label>
              <input id="search" class="Menu-searchInput" type="search" name="search" autocomplete="off" placeholder="Search …">
              <button class="Menu-searchClear" type="button" hidden>
                <svg class="Menu-searchIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.6 12 2.2 2.3c.4.3.5.7.3 1.1-.2.8-1.2 1-1.8.4l-2-2-.3-.3-1 1L9.7 16c-.5.4-1.2.4-1.6 0a1 1 0 0 1-.2-1.4l.2-.2 2-2 .4-.3-1.1-1-1.2-1.3c-.5-.4-.5-1.1 0-1.6.4-.4 1-.4 1.5 0l2 2.1.3.3 1-1 1-1.3c.6-.7 1.4-.5 1.7-.2.4.4.6 1.1-.1 1.7l-2 2-.1.2h.1z"/><circle cx="11.9" cy="12.1" r="11" stroke-width="2" stroke-miterlimit="10"></svg>
                <span class="u-hiddenVisually">Clear search query</span>
              </button>
            </form>
            {{#menu folders requestedComponent requestedVariation null null }}{{/menu}}
          </div>
        {{/if}}

        {{#if buildDate}}
          <p class="Nav-buildDate">Built at: <time datetime="{{buildDate}}">{{formattedBuildDate}}</time></p>
          <script>
            const time = document.querySelector(".Nav-buildDate time");
            time.textContent = new Date(time.dateTime).toLocaleString();
          </script>
        {{/if}}

        <div class="ConfigSwitchers">
          <form class="ConfigSwitcher js-ThemeSwitcher">
            <fieldset class="ConfigSwitcher-wrapper">
              <legend class="ConfigSwitcher-title">Color scheme</legend>
              <div class="ConfigSwitcher-options">
                <div class="ConfigSwitcher-option">
                  <input type="radio" name="theme" value="light" id="theme-light"{{#ifEquals theme.mode "light"}} checked{{/ifEquals}}>
                  <label for="theme-light">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="theme-light-title"><title id="theme-light-title">light</title><path d="M24 12.2v.2c-.2.4-.6.7-1.2.8H21c-.6 0-1.1-.6-1.1-1.2 0-.7.5-1.2 1.2-1.2h1.8c.6 0 1 .3 1.2.9v.5zM11.8 24h-.2c-.4-.2-.7-.6-.8-1.2V21c0-.6.6-1.1 1.2-1.1.7 0 1.2.5 1.2 1.2v1.8c0 .6-.3 1-.9 1.2h-.5zM12.2 0h.2c.4.2.7.6.8 1.2V3c0 .6-.6 1.1-1.2 1.1-.7 0-1.2-.5-1.2-1.1V1.2c0-.6.3-1 .9-1.1V0h.5zM0 11.8v-.2c.2-.4.6-.7 1.2-.8H3c.6 0 1.1.6 1.1 1.2 0 .7-.5 1.2-1.1 1.2H1c-.4 0-.8-.3-1-.8l-.1-.2v-.4zM12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM4.4 20.9c-.6 0-1-.3-1.1-.7-.2-.5-.2-.9.1-1.2L5 17.3c.4-.4 1-.3 1.5.1.4.4.5 1 0 1.5l-1.4 1.6-.7.3zM3.2 4.3c0-.4.2-.8.6-1 .5-.2.9-.2 1.3.1L6.6 5c.4.4.3 1-.1 1.5-.4.4-1.1.5-1.5 0L3.4 5.2l-.3-.7zM19.6 3.2c.5 0 .9.2 1.1.6.2.5.2 1-.1 1.3L19 6.6c-.4.4-1 .3-1.5 0-.4-.5-.5-1.2 0-1.6l1.4-1.6.7-.3zM20.9 19.6c0 .5-.3.9-.7 1.1-.4.2-.9.2-1.2-.1L17.4 19c-.4-.4-.3-1 .1-1.5.4-.4 1.1-.5 1.5 0 .6.4 1 1 1.6 1.5l.3.6z"/></svg>
                  </label>
                </div>
                <div class="ConfigSwitcher-option">
                  <input type="radio" name="theme" value="dark" id="theme-dark"{{#ifEquals theme.mode "dark"}} checked{{/ifEquals}}>
                  <label for="theme-dark">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="theme-dark-title"><title id="theme-dark-title">dark</title><path d="M17.2 18.4c1.9 0 3.6-.5 5.3-1.5.3-.2.5-.2.7 0 .2.1.2.4 0 .7-2 3.5-5 5.6-9 6.2A12.1 12.1 0 0 1 9.4.2c.4-.1.7 0 .8.2.2.2.1.5-.1.8a10.1 10.1 0 0 0 5.2 17l2 .2z"/></svg>
                  </label>
                </div>
                <div class="ConfigSwitcher-option">
                  <input type="radio" name="theme" value="auto" id="theme-auto"{{#ifEquals theme.mode "auto"}} checked{{/ifEquals}}>
                  <label for="theme-auto">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="theme-auto-title"><title id="theme-auto-title">auto</title><path d="M24 2.3v14.5c-.3 1-1 1.2-1.7 1.2H1.5c-.3 0-.7-.1-1-.4-.3-.2-.4-.5-.5-.8V2.3c.2-.8.9-1.1 1.7-1.1h21c.4 0 .7.1 1 .5l.3.6z"/><path class="st0" d="M8.3 21.4H4.6c-.5 0-.8.3-.8.7 0 .4.3.7.8.7h14.8c.5 0 .8-.3.8-.7 0-.4-.3-.7-.8-.7h-3.7v-2H8.3v2z"/><path d="M8.3 21.4v-2h7.4v2H19.4c.5 0 .8.3.8.7 0 .4-.3.7-.8.7H4.6c-.5 0-.8-.3-.8-.7 0-.4.3-.7.8-.7h3.7z"/></svg>
                  </label>
                </div>
              </div>
            </fieldset>
          </form>

          <form class="ConfigSwitcher js-TextDirectionSwitcher">
            <fieldset class="ConfigSwitcher-wrapper">
              <legend class="ConfigSwitcher-title">Text direction</legend>
              <div class="ConfigSwitcher-options">
                <div class="ConfigSwitcher-option">
                  <input type="radio" name="text_direction" value="ltr" id="text-direction-ltr"{{#ifEquals componentTextDirection "ltr"}} checked{{/ifEquals}}>
                  <label for="text-direction-ltr">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="text-direction-ltr-title"><title id="text-direction-ltr-title">left to right</title><path d="M12 24c.5-.1.8-.5 1.2-.8l10-10c.4-.5.6-1 .4-1.7A10075.2 10075.2 0 0 0 12.8.5c-.6-.7-1.6-.7-2.2 0L9.2 1.8c-.7.7-.7 1.6 0 2.3l5.1 5.1.2.2H2c-.7 0-1.2.3-1.5 1l-.2.7V13c0 1 .7 1.7 1.7 1.7h12.5l-.2.2-5 5c-.6.6-.8 1.4-.4 2l2 2 .5.2h.6z"/><</svg>
                  </label>
                </div>
                <div class="ConfigSwitcher-option">
                  <input type="radio" name="text_direction" value="rtl" id="text-direction-rtl"{{#ifEquals componentTextDirection "rtl"}} checked{{/ifEquals}}>
                  <label for="text-direction-rtl">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="text-direction-rtl-title"><title id="text-direction-rtl-title">right to left</title><path d="M12 24c-.5-.1-.8-.5-1.2-.8l-10-10c-.4-.5-.6-1-.4-1.7 0-.2.2-.5.4-.6L11.2.5c.7-.7 1.6-.7 2.3 0l1.3 1.3c.7.7.7 1.6 0 2.3L9.7 9.2l-.2.2H22c.7 0 1.2.3 1.5 1l.2.7V13c0 1-.7 1.7-1.7 1.7H9.5l.2.2 5 5c.6.6.8 1.4.4 2l-2 2-.5.2H12z"/></svg>
                  </label>
                </div>
              </div>
            </fieldset>
          </form>
        </div>
      </div>

      <form class="GoTo u-hiddenVisually" data-url-pattern="{{flatUrlPattern}}" autocomplete="off">
        <label class="GoTo-label" for="goto-input">Go to…</label>
        <input class="GoTo-input" type="text" list="goto-list" id="goto-input">
        <datalist id="goto-list">
          {{#each components}}
            <option value="{{this.value}}">{{this.shortPath}}</option>
          {{/each}}
        </datalist>
      </form>
    </nav>

    <main class="Content">
      <div class="FrameWrapper">
        <iframe class="Frame" id="iframe" src="{{iframeSrc}}" name="iframe" title="Components"></iframe>
      </div>
    </main>

    <aside class="Tests" {{#if hideTests}} hidden{{/if}}>
      {{#each tests}}
        <div class="Test Test--{{this.alias}}" hidden>
          <b class="Test-title">{{this.title}}</b>
          {{#each this.results}}
            <details class="Results Results--{{this.alias}}">
              <summary class="Results-summary">
                {{this.label}}: <span class="Results-value Results-value--{{this.class}}">0</span>
              </summary>
              <div class="Results-details"></div>
            </details>
          {{/each}}
        </div>
      {{/each}}
    </aside>
  </body>
</html>
