{{ $include_toc := .Params.include_toc}}
<article>
  <header>
    <h1>{{ .Title }}</h1>
    {{ with .Params.subtitle }}
    <span class="post__subtitle">
      {{.}}
    </span>
    {{ end }}
    {{ partial "page-single/post-meta.html" . }}
  </header>
  {{ $screenshotsExist := .Params.screenshots }}
  {{ if $screenshotsExist }}
      <a href={{ .Params.screenshots.s1.file }} target="_blank" rel="noopener noreferrer"><img class="project__image project__first-screen img-responsive" src="{{ .Params.screenshots.s1.file }}" alt="{{ .Params.screenshots.s1.caption }}" title="{{ .Params.screenshots.s1.caption }}"></a>
  {{ end }}
  {{ $tableOfContents := .TableOfContents }}
  {{ with .Site.Params.toc }}
  {{ if ne $include_toc false }}
    <div class="toc-wrapper">
      <input type="checkbox" id="tocToggle">
      <label for="tocToggle">Table of Content</label>
      {{ if eq . "hugo" }}
          {{ $tableOfContents }}
      {{ else if eq . "tocbot"}}
        <div class="toc" id="TableOfContents"></div>
      {{ end }}
          {{ if $screenshotsExist }}
          <a href=#additional-screenshots>Additional Screenshots</a>
          {{ end }}
    </div>
  {{ end }}
  {{ end }}

  <div class="post">
    {{ .Content }}
  </div>
  {{ if $screenshotsExist }}
  <h2 id=additional-screenshots>Additional Screenshots</h2>
  <div class = "project__additional-screens">
    {{ range $index, $element := $screenshotsExist }}
      {{ if not (eq $index "s1") }}
        <div class = "project__single-screen">
          <a href={{ .file }} target="_blank" rel="noopener oreferrer"><img class="project__image project__extra-screen img-responsive" src="{{ .file }}" alt="{{ .caption }}" title="{{ .caption }}"></a>
        </div>
      {{ end }}
    {{ end }}
  </div>
  {{ end }}
  {{ partial "page-single/post-navigation.html" . }}
  {{ partial "page-single/post-related.html" . }}
  {{ partial "page-single/post-comment.html" . }}
</article>