<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ title }}</title>
  <link rel="icon" type="image/svg+xml" href="/_ghrm/assets/img/favicon.svg">
  <link rel="shortcut icon" type="image/svg+xml" href="/_ghrm/assets/img/favicon.svg">
  <script>
  (function() {
    var stored = localStorage.getItem('ghrm-theme');
    var system = window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
    document.documentElement.setAttribute('data-theme', stored || system);
  })();
  </script>
  <style>
  svg[aria-hidden="true"] {
    width: 1em;
    height: 1em;
  }
  </style>
  {%- for href in vendor_styles %}
  <link rel="stylesheet" href="{{ href }}">
  {%- endfor %}
  <script type="application/json" id="ghrm-assets">{{ asset_json|safe }}</script>
  <link rel="stylesheet" href="/_ghrm/assets/css/theme.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/shell.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/explorer.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/file.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/blob.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/chrome.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/status.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/search.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/toc.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/gist.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/features.css">
  <link rel="stylesheet" href="/_ghrm/assets/css/admonitions.css">
</head>
<body
  {%- if !layout_class.is_empty() %} class="{{ layout_class }}"{% endif %}
  hx-boost="true"
  hx-target="article.markdown-body"
  hx-swap="outerHTML show:none"
  hx-push-url="true"
>
  <header class="ghrm-topbar{% if !layout_class.is_empty() %} {{ layout_class }}{% endif %}">
    <div class="ghrm-topbar-inner">
      {{- source|safe -}}
      <div id="ghrm-path-search" class="ghrm-path-search" role="search" hidden>
        <div class="ghrm-search-field">
          <button
            id="ghrm-search-mode"
            type="button"
            class="ghrm-search-mode"
            title="Switch search mode"
            aria-label="Switch search mode"
          >
            <svg class="icon-path" aria-hidden="true" focusable="false">
              <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-search-path"></use>
            </svg>
            <svg class="icon-content" aria-hidden="true" focusable="false">
              <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-search-content"></use>
            </svg>
          </button>
          <input id="ghrm-path-search-input" class="ghrm-path-search-input" type="search" placeholder="Search paths" aria-label="Search paths">
        </div>
        <button id="ghrm-path-search-toggle" type="button" aria-expanded="false" aria-label="Search paths" title="Search paths">
          <svg aria-hidden="true" focusable="false">
            <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-search"></use>
          </svg>
        </button>
        <span id="ghrm-path-search-status" class="ghrm-path-search-status" aria-live="polite"></span>
        <ghrm-search-panel></ghrm-search-panel>
      </div>
      <button
        id="doc-chrome-toggle"
        type="button"
        hidden
        aria-label="Hide document wrapper"
        title="Hide document wrapper"
      >
        <svg class="icon-framed" aria-hidden="true" focusable="false">
          <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-doc-framed"></use>
        </svg>
        <svg class="icon-flat" aria-hidden="true" focusable="false">
          <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-doc-flat"></use>
        </svg>
      </button>
      <button id="theme-toggle" type="button" aria-label="Toggle theme">
        <svg class="icon-sun" aria-hidden="true" focusable="false">
          <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-sun"></use>
        </svg>
        <svg class="icon-moon" aria-hidden="true" focusable="false">
          <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-moon"></use>
        </svg>
      </button>
      {{- gist_nav|safe -}}
      {% if show_logout %}
      <a
        id="ghrm-logout"
        href="/_ghrm/logout"
        hx-boost="false"
        aria-label="Log out"
        title="Log out"
      >
        <svg aria-hidden="true" focusable="false">
          <use href="/_ghrm/assets/js/icons.svg#ghrm-icon-logout"></use>
        </svg>
      </a>
      {% endif %}
    </div>
  </header>
  {{- about|safe }}
  <nav id="ghrm-toc-panel" class="ghrm-toc-panel" hidden aria-label="Table of contents"></nav>
  <main class="ghrm-layout{% if !layout_class.is_empty() %} {{ layout_class }}{% endif %}">
    {{- body|safe -}}
    {{- sidebar|safe }}
  </main>
  {%- for src in vendor_scripts %}
  <script defer src="{{ src }}"></script>
  {%- endfor %}
  <script type="module" src="/_ghrm/assets/js/preview.js"></script>
  <script type="module" src="/_ghrm/assets/js/main.js"></script>
  <script type="module" src="/_ghrm/assets/js/gist.js"></script>
</body>
</html>
