{{ define "main" }}
  <main class="post h-entry">

    <div class="post-info">
      <p class="breadcrumbs">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass">
          <circle cx="12" cy="12" r="10"></circle>
          <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
        </svg>
        <a href="/memex">Memex</a> » <a href="{{ .Parent.Permalink }}">{{ .Parent.Title }}</a> » {{ .Title }}
      </p>
      <p>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="16" y1="2" x2="16" y2="6"></line>
          <line x1="8" y1="2" x2="8" y2="6"></line>
          <line x1="3" y1="10" x2="21" y2="10"></line>
        </svg>
        Last updated
        {{ partial "year-relative-date.html" .Lastmod }}
      </p>
      <p class="reading-time">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
        {{ i18n "readingTime" .Page.ReadingTime }}
      </p>
      <p class="author h-card" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
        <a href="{{ .Site.BaseURL | absURL }}" rel="author" class="p-author u-url">{{ .Site.Author.name }}</a>
      </p>
    </div>

    <article>
      <hgroup class="post-title">
        <h1 class="p-name">
          {{ with .Params.emoji }}<span data-emoji="{{.}}"></span>{{end}}
          <a href="{{ .Permalink }}" class="noaccent u-url">{{ .Title | markdownify }}</a>
        </h1>
      </hgroup>

      {{ with .Summary }}
        <div class="post-summary p-summary" aria-hidden="true">{{ . }}</div>
      {{ end }}

      {{ if .Params.Cover }}
        <figure class="post-cover">
          <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
          
          {{ if .Params.CoverCaption }}
            <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
          {{ end }}
        </figure>
      {{ end }}

      {{- if .Params.toc }}
        <hr />
        <aside id="toc">
          <div class="toc-title">{{ i18n "tableOfContents" }}</div>
          {{ .TableOfContents }}
        </aside>
        <hr />
      {{- end }}

      <div class="post-content e-content">
        {{ .Content | replaceRE `#(\w+)` `<a href="/tags/$1">$1</a>` | safeHTML }}
      </div>
    </article>

    <hr />

    {{ if ne .Type "site-infra" }}
      <div class="post-info">
        {{ partial "tags.html" .Params.tags }}
        {{ partial "series-tags.html" . }}
        <p>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
          {{ i18n "wordCount" .Page.WordCount }}
        </p>

        <p>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
          </svg>
          <date datetime="{{ dateFormat "2006-01-02T15:04:05-0700" .Lastmod }}" class="dt-updated" title="last updated on {{ dateFormat "Monday Jan 2 2006 at 03:04 MST" .Lastmod }}">
            {{ if .Site.Params.dateformNumTime }}
              {{ dateFormat .Site.Params.dateformNumTime .Lastmod }}
            {{ else }}
              {{ dateFormat "2006-01-02 15:04" .Lastmod }}
            {{ end }}
          </date>
        </p>
      </div>

      <hr />

      {{ partial "pagination-single.html" . }}
    {{ end }}

    {{ if .Page.Store.Get "hasMermaid" }}
      <script src="/js/mermaid.js"></script>
      <script>
        // TODO: Render mermaid server side
        function initMermaid() {
          const dark = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
          mermaid.initialize({ startOnLoad: true, theme: dark ? 'dark' : 'neutral' });
        }
        // https://github.com/mermaid-js/mermaid/issues/1945
        // window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initMermaid);
        initMermaid();
      </script>
    {{ end }}
  </main>
{{ end }}