<!DOCTYPE html>
<html
  class="zn-cloak"
  lang="en"
  data-layout="{{ layout }}"
  data-zinc-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">

  {# Twitter Cards #}
  <meta name="twitter:card" content="summary"/>
  <meta name="twitter:creator" content="kubex"/>
  <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) }}"/>

  {# 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') }}"/>

  {# Zinc #}
  <script type="module" src="/dist/zn.min.js"></script>
  <link rel="stylesheet" href="/dist/zn.min.css"/>

  {# Scripts #}
  <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>
</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/kubex/zinc" title="View zinc on GitHub">
    <zn-icon src="code"></zn-icon>
  </a>

  {# Theme selector #}
  <zn-dropdown id="theme-selector" placement="bottom-end" distance="3">
    <zn-button slot="trigger" size="content" color="transparent" title="Press \ to toggle">
      <zn-icon class="only-light" src="light_mode"></zn-icon>
      <zn-icon class="only-dark" src="dark_mode"></zn-icon>
    </zn-button>
    <zn-menu>
      <zn-menu-item type="checkbox" value="light">Light</zn-menu-item>
      <zn-menu-item type="checkbox" value="dark">Dark</zn-menu-item>
      <zn-menu-item type="checkbox" value="auto">System</zn-menu-item>
    </zn-menu>
  </zn-dropdown>
</div>

{# Content #}
<aside id="sidebar" data-preserve-scroll>
  <header>
    <a href="/">
      <img src="{{ assetUrl('images/watermark.svg') }}" alt="zinc"/>
    </a>
    <div class="sidebar-version">
      {{ meta.version }}
    </div>
  </header>

  <div class="sidebar-buttons">
    <zn-button size="small" class="repo-button repo-button--github" href="https://github.com/kubex/zinc"
               target="_blank" icon="folder_open" color="secondary">
      Code
    </zn-button>
    <zn-button size="small" class="repo-button repo-button--star" color="secondary"
               href="https://github.com/kubex/zinc/stargazers" target="_blank" icon="star">
      Star
    </zn-button>
  </div>

  <zn-button icon="search"
             class="search-box"
             color="transparent"
             size="small"
             type="button"
             title="Press / to search"
             aria-label="Search"
             data-plugin="search">
    <span>Search</span>
  </zn-button>

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

{# Content #}
<main>
  <a id="main-content"></a>
  <article id="content"
           class="content{% if toc %} content--with-toc{% endif %}{% if fullWidth %} content--full-width{% endif %}">
    {% if 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>
