{{ define "main" }}
<section id="blog-single" class="blog-single section section--border-bottom rad-animation-group flex-grow-1">
  <div id="main-content">
    <h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>

    <aside id="meta" class="light-border-bottom">
      <div>
        <section>
          {{ i18n "published_on" }}&nbsp;<h4 id="date">{{ .Date.Format "Mon Jan 2, 2006" }}</h4>
          ·
          <h4 id="wordcount">{{ .WordCount }} Words</h4>
          {{ $readingTime := div .WordCount 200 }}
          {{ if lt $readingTime 1 }}
            {{ $readingTime = 1 }}
          {{ end }}
          &nbsp;·&nbsp;
          <h4 id="reading-time">{{ $readingTime }} {{ i18n "min_read" | default "min read" }}</h4>
          {{ if .Params.lastmod }}
          &nbsp;·&nbsp;
          <h4 id="last-modified">{{ i18n "last_updated" | default "Updated" }}: {{ .Lastmod.Format "Jan 2, 2006" }}</h4>
          {{ end }}
        </section>
        {{ with .GetTerms "topics" }}
        <ul id="topics">
          {{ range . }}
          <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
          {{ end }}
        </ul>
        {{ end }} {{ with .GetTerms "tags" }}
        <ul class="tags">
          {{ range . }}
          <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
          {{ end }}
        </ul>
        {{ end }}
      </div>
    </aside>

    {{ partial "toc.html" . }}

    <div class="row flex-column-reverse flex-md-row rad-fade-down">
      <div class="col-12">{{ .Content | safeHTML }}</div>
    </div>

    {{ partial "social-sharing.html" . }}

    {{ partial "related-posts.html" . }}

    <aside class="content-browser light-border-top">
      {{ i18n "continue_reading" }}
      <div>
        {{ with .PrevInSection }}
        <a class="previous" href="{{ .RelPermalink }}">↩ {{ .LinkTitle }}</a>
        {{ end }}
        ■
        {{ with .NextInSection }}
        <a class="next" href="{{ .RelPermalink }}"> {{ .LinkTitle }} ↪</a>
        {{ end }}
      </div>
    </aside>

    {{ partial "comments.html" . }}
  </div>
</section>
{{ end }}