{{ 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 | markdownify }}</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> &middot;</span>
            {{- partial "read-time.html" . -}} &middot; {{ .FuzzyWordCount }} words
          </aside>

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

          {{- .Content |
            replaceRE "<p>\n<figure>" "<figure>" |
            replaceRE "</figure></p>" "</figure>" |
            replaceRE "<p>" "<p class=\"serif is-size-serif\">" |
            replaceRE "<h2" "<h2 class=\"serif\"" |
            replaceRE "<h3" "<h3 class=\"serif\"" |
            safeHTML
          -}}
        </article>
      </div>
    </div>
  </div>
</main>

<aside class="section">
  <div class="container">
    <div class="columns is-tablet is-centered">
      <div class="column is-7 has-text-grey-dark has-text-right">
        <p>
          {{ dateFormat "2 January 2006" .Params.date }}
          <code> &mdash; Written</code>
          <br>
          {{ if .Params.updated }}
            {{ dateFormat "2 January 2006" .Params.updated }}
          {{ else }}
            {{ dateFormat "2 January 2006" .Params.date }}
          {{ end }}
          <code> &mdash; Updated</code>
          <br>
          {{ .Site.Author.name }}<code> &mdash; Creator</code>
          <br>
          <a class="has-text-grey-dark" href="{{ strings.TrimRight "/" .Permalink }}.md">{{ .Slug }}.md</a><code> &mdash; Article</code>
        </p>
      </div>
    </div>
  </div>
</aside>

<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>
              <p class="has-margin-none">
                <a href="{{ .RelPermalink }}" title="{{ truncate 100 "..." .Summary }}" class="serif is-size-4">
                  {{ .Title | markdownify }}
                </a>
              </p>
              <time datetime="{{ dateFormat "2006-01-02" .Date }}">
                {{ dateFormat "02 Jan 2006" .Date }}
              </time>
            </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 }}