<!--
  Copyright 2021 The Go Authors. All rights reserved.
  Use of this source code is governed by a BSD-style
  license that can be found in the LICENSE file.
-->

{{define "title"}}<title>Style Guide · pkg.go.dev</title>{{end}}

{{define "pre-content"}}
  <link href="/static/frontend/unit/unit.css" rel="stylesheet">
  <link href="/static/frontend/styleguide/styleguide.css" rel="stylesheet">
{{end}}

{{define "post-content"}}
  <script type="module">
    loadScript("/static/frontend/unit/unit.js", {async: true})
    loadScript("/static/frontend/styleguide/styleguide.js", {async: true})
  </script>
{{end}}

{{define "main"}}
  <main class="go-Main">
    <header class="go-Main-header js-mainHeader">
      {{- block "main-header" .}}{{end -}}
    </header>
    <aside class="js-mainAside"></aside>
    <nav class="go-Main-nav go-Main-nav--sticky js-mainNav" aria-label="Outline">
      {{- block "main-nav" .}}{{end -}}
    </nav>
    <article class="go-Main-article js-mainContent">
      {{- block "main-content" .}}{{end -}}
    </article>
  </main>
{{end}}

{{define "main-header"}}
  <nav class="go-Main-headerBreadcrumb go-Breadcrumb" aria-label="Breadcrumb">
    <ol>
      <li><a href="/" data-gtmc="breadcrumb link">Packages</a></li>
      <li>
        <a href="#breadcrumb" data-gtmc="breadcrumb link" aria-current="location">Style Guide</a>
      </li>
    </ol>
  </nav>
  <div class="go-Main-headerContent">
    <div class="go-Main-headerTitle">
      <a class="go-Main-headerLogo" href="https://go.dev/" aria-hidden="true" tabindex="-1" data-gtmc="header link"
          aria-label="Link to Go Homepage">
        <img height="78" width="207" src="/static/shared/logo/go-blue.svg" alt="Go">
      </a>
      <h1>Style Guide</h1>
    </div>
    <div class="go-Main-headerDetails">
      <fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
        <legend>Theme</legend>
        <div class="go-InputGroup">
          <button class="go-Button go-Button--inverted js-toggleTheme" data-value="light" title="Light"
              aria-label="Set light theme">
            <img class="go-Icon" height="24" width="24" src="/static/shared/icon/light_mode_gm_grey_24dp.svg"
                alt="">
          </button>
          <button class="go-Button go-Button--inverted js-toggleTheme" data-value="dark" title="Dark"
              aria-label="Set dark theme">
            <img class="go-Icon" height="24" width="24" alt=""
              src="/static/shared/icon/brightness_2_gm_grey_24dp.svg">
          </button>
        </div>
      </fieldset>
      <fieldset class="go-Main-headerDetailItem go-Label go-Label--inline MainHeader-toggle">
        <legend>Layout</legend>
        <div class="go-InputGroup">
          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="responsive"
              title="Responsive" aria-label="Set responsive layout">
            <img class="go-Icon" height="24" width="24" src="/static/shared/icon/responsive_layout_gm_grey_24dp.svg"
                alt="">
          </button>
          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="stacked"
              title="Stacked" aria-label="Set stacked layout">
            <img class="go-Icon" height="24" width="24" src="/static/shared/icon/table_rows_gm_grey_24dp.svg"
                alt="">
          </button>
          <button class="go-Button go-Button--inverted js-toggleLayout" data-value="compact"
              title="Compact" aria-label="Set compact layout">
            <img class="go-Icon" height="24" width="24" src="/static/shared/icon/toolbar_gm_grey_24dp.svg"
                alt="">
          </button>
        </div>
      </fieldset>
    </div>
  </div>
{{end}}

{{define "main-nav"}}
  <div class="go-Main-navDesktop">
    {{template "tree-nav" .Outline}}
  </div>
  <div class="go-Main-navMobile js-mainNavMobile">
    <!-- Generated -->
  </div>
{{end}}

{{define "main-content"}}
  <div class="StyleGuide">
    {{range .Sections}}
      <section class="{{.Title}}">
        {{.Content}}
      </section>
    {{end}}
  </div>
{{end}}