{{ partial "head" . }}
  <body>
    <div id="wrap">

      <!-- Header -->
      {{ partial "header" . }}

      <div class="container {{ replace (.LinkTitle | lower) " " "_" }}"> <!-- add link title add class -->
          <h1>{{ .Title }}</h1>
        {{ if ne .Params.page true }}
        <div>
          <p class="categories">
          {{ .Date.Format "2 January 2006" }}
            &nbsp;&nbsp;
            {{ range .Params.tags }}
              <a class="label label-success" href="/tags/{{ lower . }}">{{ . }}</a>
            {{ end }}
          </p>
        </div>
        {{ end }}
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="blogpost">
              {{ if isset .Params "headerimage" }}
                <div class="header-image">
                  <img src="/img/{{ .Params.headerImage }}" />
                  <p>{{ with .Params.headercredits }}{{ . | markdownify }}{{ end }}</p>
                </div>
              {{ end }}
              {{ .Content }}
              <!-- only show related posts if param is true, or if it's not a page -->
              {{ if or (eq .Params.related true) (ne .Params.page true) }}
              <hr>
              <div class="related-posts">
                <h5>Related Posts</h5>
                {{ range first 3 ( where ( where .Site.Pages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags ) "Permalink" "!=" .Permalink ) }}
                  <div class="row">
                    <div class="col-sm-4 col-md-4 col-lg-4">
                      <h6 style="text-align: right">
                        {{ .Date.Format "2 January 2006" }}
                      </h6>
                    </div>
                    <div class="col-sm-8 col-md-8 col-lg-8">
                      <h6 style="text-align: left">
                        <strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong>
                      </h6>
                    </div>
                  </div>
                {{ end }}
              </div>
              {{ end }}
            </div>
          </div>
          <hr>
        {{ partial "comments.html" . }}
        {{ partial "social" . }}
        </div>
      </div>
    </div>

    <!-- Footer -->
    {{ partial "footer" . }}

    <!-- JS -->
    {{ partial "js" . }}

    <!-- Matomo -->
    {{ partial "matomo" . }}
    
  </body>
</html>
