{{ define "base" }}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="color-scheme" content="light dark" />
  <title>{{ .Title }}</title>
  <link rel="icon" type="image/png" href="/static/favicon.png" />
  <link rel="apple-touch-icon" href="/static/favicon.png" />
  <link rel="stylesheet" href="/static/site.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
  <script defer src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
</head>

<body class="{{ .BodyClass }}">
  <header class="site-header">
    <div class="site-header__inner">
      <a class="site-brand" href="/" aria-label="Cairnquire home">
        <img src="/static/favicon.png" alt="" width="64" height="64" decoding="async" />
        <span class="sr-only">Cairnquire</span>
      </a>
      <form class="site-search" action="/" method="get" role="search">
        <svg class="site-search__icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="search" name="q" placeholder="Search documents…" aria-label="Search documents" />
      </form>
      <nav class="site-nav">
        <a href="/help" aria-label="Help" title="Help">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        </a>
        <a href="/settings" aria-label="Settings" title="Settings">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
        </a>
        <a href="/account" aria-label="Account" title="Account">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </a>
      </nav>
    </div>
  </header>
  <main class="site-main">
    {{ if eq .BodyTemplate "index_content" }}
    {{ template "index_content" .Data }}
    {{ else if eq .BodyTemplate "document_content" }}
    {{ template "document_content" .Data }}
    {{ else if eq .BodyTemplate "document_edit_content" }}
    {{ template "document_edit_content" .Data }}
    {{ else if eq .BodyTemplate "search_content" }}
    {{ template "search_content" .Data }}
    {{ else if eq .BodyTemplate "login_content" }}
    {{ template "login_content" .Data }}
    {{ else if eq .BodyTemplate "setup_content" }}
    {{ template "setup_content" .Data }}
    {{ else if eq .BodyTemplate "account_content" }}
    {{ template "account_content" .Data }}
    {{ else if eq .BodyTemplate "device_verify_content" }}
    {{ template "device_verify_content" .Data }}
    {{ else if eq .BodyTemplate "error_content" }}
    {{ template "error_content" .Data }}
    {{ end }}
  </main>
  <div class="offline-notice" data-offline-notice hidden>
    <span aria-hidden="true" class="offline-icon"></span>
    <p>You are offline. Some content may be stale.</p>
  </div>
  <div class="cached-notice" data-cached-notice hidden>
    <span aria-hidden="true" class="cached-icon"></span>
    <p>Viewing cached offline content.</p>
  </div>
  <section class="sync-queue" data-sync-queue hidden aria-live="polite">
    <div class="sync-queue__header">
      <div>
        <strong data-sync-queue-title>Pending changes</strong>
        <p data-sync-queue-summary>Waiting to sync.</p>
      </div>
      <button type="button" data-sync-now>Sync now</button>
    </div>
    <ul data-sync-queue-list></ul>
  </section>
  <div class="version-notice" data-version-notice hidden>
    <p>A newer version is available.</p>
    <button type="button" data-version-reload>Reload</button>
  </div>
  <script src="/static/cache.js" defer></script>
  <script src="/static/sync.js" defer></script>
  <script src="/static/realtime.js" defer></script>
  <script src="/static/editor.js" defer></script>
  <script src="/static/auth.js" defer></script>
  <script src="/static/render.js" defer></script>
  <script src="/static/comments.js" defer></script>
</body>

</html>
{{ end }}
