<extend template="base.shtml">
<head id="head">
  <super>
</head>
<body id="body">
  <div class="content-wrapper">
    <div class="toc-sidebar" :if="$page.custom.getOr('toc', true).and($page.isSection().not())">
      <div class="toc-sticky">
        <div :html="$page.toc()"></div>
      </div>
    </div>
    <div class="main-content" id="content" data-pagefind-body="true" data-pagefind-weight="10">
      <h1 :text="$page.title" data-pagefind-meta="title" data-pagefind-ignore="index"></h1>
      <div data-pagefind-sort="date" :text="$page.date.format('2006-01-02')" style="display:none"></div>
      <div id="meta" :if="$page.isSection().not()" data-pagefind-ignore="index">
        <p :text="$page.date.format('2006-01-02')"></p>
        <p :text="$page.author" id="author"></p>
      </div>
      <div class="toc-fallback" :if="$page.custom.getOr('toc', true).and($page.isSection().not())" data-pagefind-ignore="index">
        <h3>Table of Contents</h3>
        <div :html="$page.toc()"></div>
      </div>
      <ul class="article-list" :loop="$page.subpages()" data-pagefind-ignore="index">
        <li>
          <a href="$loop.it.link()" class="article-item">
            <span class="article-title" :text="$loop.it.title"></span>
            <span class="article-date" :if="$page.custom.getOr('showTocDate', true)">
              <time datetime="$loop.it.date.format('2006-01-02')" :text="$loop.it.date.format('2006-01-02')"></time>
            </span>
          </a>
        </li>
      </ul>
      <super>
      <div id="prev-next" :if="$page.isSection().not()" data-pagefind-ignore="index">
        <div :if="$page.prevPage?()">
          <a href="$if.link()">
            <span :text="$if.title"></span>
          </a>
        </div>
        <div :if="$page.nextPage?()">
          <a href="$if.link()">
            <span :text="$if.title"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>
