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

<main class="tt-main tt-main--category">
  <header class="tt-pagehead">
    {{if eq .Type "search"}}
      <span class="tt-eyebrow">Search</span>
      <h1>“{{if .Request}}{{index .Request.Query "key"}}{{end}}”</h1>
    {{else if eq .Type "tag"}}
      <span class="tt-eyebrow">Tag</span>
      <h1>{{.Title}}</h1>
    {{else if .CurrentColumn}}
      <span class="tt-eyebrow">News</span>
      <h1>{{.CurrentColumn.Name}}</h1>
      {{if .CurrentColumn.Description}}<p>{{.CurrentColumn.Description}}</p>{{end}}
    {{else}}
      <h1>{{.Title}}</h1>
    {{end}}
  </header>

  {{if .List}}
  <div class="tt-articles">
    {{range .List}}
    <a class="tt-article-card" href="{{.URL}}">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
      <div class="tt-article-card__body">
        <time>{{ParseTime .CreatedAt "2006.01.02"}}</time>
        {{if .ColumnName}}<span class="tt-pill">{{.ColumnName}}</span>{{end}}
        <h2>{{.Title}}</h2>
        <p>{{StrSub .Description 160}}</p>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="tt-empty">No items.</div>
  {{end}}

  {{if .Pager.Enabled}}
  <nav class="tt-pager">
    {{range .Pager.Items}}
      {{if eq .Kind "gap"}}<span class="tt-pager__gap">…</span>
      {{else if .Disabled}}<span class="tt-pager__btn is-disabled">{{.Label}}</span>
      {{else if .Active}}<span class="tt-pager__btn is-active">{{.Label}}</span>
      {{else}}<a class="tt-pager__btn" href="{{.URL}}">{{.Label}}</a>
      {{end}}
    {{end}}
  </nav>
  {{end}}
</main>

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