{{ define "main" }}
<main class="section is-block is-fullheight" itemscope itemtype="https://schema.org/WebPage">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-7">
        <article class="content document">
          <h1 class="title is-2 serif">{{ .Title }}</h1>

          {{ if .Params.toc }}
          <div class="tableofcontents marginnote rightnote is-inline">
            <div class="is-size-6 is-uppercase has-text-weight-bold has-spacing-widest has-margin-bottom-sm">Table of Contents</div>
            {{ .TableOfContents }}
          </div>
          {{ end }}

          <aside class="subtitle is-6 has-text-grey-dark">
          {{- partial "page-meta.html" . -}}
          <br>
          <span class="isso-comments-counter"><a class="has-text-grey-dark focus-link" title="Jump to Comments" href="#isso-thread">0 Comments</a> ·</span>
          {{- partial "read-time.html" . -}} · {{ .FuzzyWordCount }} words
          </aside>

          {{- partial "page-status.html" . -}}

          {{- .Content | replaceRE "<p>" "<p class=\"serif is-size-serif\">" | replaceRE "<h2" "<h2 class=\"serif\"" | replaceRE "<h3" "<h3 class=\"serif\"" | safeHTML }}


          <div class="has-text-grey-dark has-text-right">
            <p>
              Updated
              {{ if .Params.updated }}
              {{ dateFormat "2 January 2006" .Params.updated }}
              {{ else }}
              {{ dateFormat "2 January 2006" .Params.date }}
              {{ end }}
              <br>
              <a class="has-text-grey-dark" href="{{ strings.TrimRight "/" .Permalink }}.md">View Source</a>
            </p>
          </div>

        </article>
      </div>
    </div>
  </div>
</main>

<aside class="section content article__more__content has-margin-bottom-none">
  <div class="container">
    <div class="columns is-tablet is-centered">
      <div class="column is-7">

        <section class="section-vertical">
          <h2 class="is-uppercase is-size-5 has-spacing-widest has-margin-bottom-lg">More Content</h2>
          {{ $related :=  shuffle .Site.RegularPages | first 3 }}
          {{ with $related }}
          {{ range . }}

          <ul>
            <li>
              <span class="has-text-grey-dark">{{ dateFormat "02 Jan 2006" .Date }}</span>
              &nbsp;
              <h2 class="has-margin-none is-inline-tablet">
                <a href="{{ .RelPermalink }}" title="{{ truncate 100 "..." .Summary }}" class="serif is-size-4">{{ .Title }}</a>
              </h2>
            </li>
          </ul>

          {{ end }}
          {{ end }}
        </section>

      </div>
    </div>
  </div>
</aside>

<aside class="section content article__webring">
  <div class="container">
    <div class="columns is-tablet is-centered">
      <div class="column is-7">

        <section class="webring section-vertical">
          <a href="https://git.sr.ht/~sircmpwn/openring"
          title="Generated by Open Ring"
          class="attribution is-pulled-right has-text-grey-dark">
            <span class="button item__box item__no__hover">
            {{ safeHTML (readFile "public/css/icons/feather/help-circle.svg") }}
            <span>Openring</span>
            </span>
          </a>
          {{- partial "openring.html" . -}}
        </section>

      </div>
    </div>
  </div>
</aside>

{{ if .Params.syntax }}
<link rel="stylesheet" href="/css/syntax-highlight.css">
{{ end }}

<aside class="section content container">
  <div class="columns is-centered">
    <div class="column is-7">

      <h1 id="comments" class="is-uppercase is-size-5 has-spacing-widest">Comments</h1>

      <script
        data-isso="/isso/"
        data-title="{{ .Title }}"
        data-isso-css="false"
        data-isso-reply-notifications="true"
        src="/isso/js/embed.min.js">
      </script>

      <div id="isso-thread" data-title="{{ .Title }}"></div>

    </div>
  </div>
</aside>

{{ end }}