<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}" dir="ltr">

  {{ partial "head.html" . }}

  <body class="single-body">

    {{ partial "nav-bar.html" . }}

    <main class="content side-text-padding side-gutter">
      <article class="post {{ if ne .Params.dropcap false }}dropcase{{ end }}">
        <header class="post-header">
          <h1 class="post-title">{{ .Title }}</h1>
          {{ if isset .Params "date" }}<p class="post-date">Posted <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time></p>{{ end }}
        </header>
        {{ with .Resources.GetMatch "featuredImage" -}}
        <picture class="post-figure">
          {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
          <source srcset="{{ .Permalink }}" type="image/webp">
          {{- end }}
          {{ $featured := .Resize "800x Lanczos" }}
          <source srcset="{{ $featured.Permalink }}">
          <img src="{{ $featured.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
        </picture>
        {{- end }}
        {{ if .Params.toc -}}
          <h2>Contents</h2>
          {{ .TableOfContents }}
        {{- end }}
        {{ .Content }}
      </article>
      <nav class="end-nav card-container card">
        {{ with .PrevInSection }}
        {{ .Render "li-next" }}
        {{ end }}
      </nav>

      {{ partial "footer.html" . }}

    </main>
    
    {{ partial "scripts.html" . }}
  </body>
</html>
