{{include "header.html"}}
{{include "nav.html"}}

{{if .Content}}
<main class="tt-main tt-main--article">
  <article class="tt-article">
    <header class="tt-article__head">
      {{if .Content.ColumnName}}<a class="tt-eyebrow" href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a>{{end}}
      <h1>{{.Content.Title}}</h1>
      <div class="tt-article__meta">
        <time>{{ParseTime .Content.CreatedAt "2006.01.02"}}</time>
        {{if .Content.Author}}<span>{{.Content.Author}}</span>{{end}}
        {{if .Content.Views}}<span>{{.Content.Views}} reads</span>{{end}}
      </div>
      {{if .Content.Description}}<p class="tt-article__lead">{{.Content.Description}}</p>{{end}}
    </header>

    {{if .Content.Img}}<img class="tt-article__cover" src="{{.Content.Img}}" alt="{{.Content.Title}}">{{end}}

    <div class="tt-article__body">{{.Content.Content|Str2Html}}</div>

    {{if .Content.Tags}}
    <div class="tt-article__tags">
      {{range .Content.Tags}}<a href="{{.URL}}">#{{.Name}}</a>{{end}}
    </div>
    {{end}}

    <nav class="tt-prevnext">
      {{if .Prev}}<a class="tt-prevnext__prev" href="{{.Prev.URL}}"><span>Previous</span><strong>{{.Prev.Title}}</strong></a>{{else}}<span></span>{{end}}
      {{if .Next}}<a class="tt-prevnext__next" href="{{.Next.URL}}"><span>Next</span><strong>{{.Next.Title}}</strong></a>{{else}}<span></span>{{end}}
    </nav>

    {{$related := Related .Content.Id 4}}
    {{if $related}}
    <section class="tt-related">
      <span class="tt-eyebrow">Related</span>
      <div class="tt-related__grid">
        {{range $related}}
        <a class="tt-related__card" href="{{.URL}}">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
          <h4>{{.Title}}</h4>
        </a>
        {{end}}
      </div>
    </section>
    {{end}}
  </article>
</main>
{{end}}

{{include "footer.html"}}
{{include "js.html"}}