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

<main class="tt-main tt-main--projects">
  <header class="tt-pagehead tt-pagehead--projects">
    <span class="tt-eyebrow">Selected work</span>
    <h1>{{if .CurrentColumn}}{{.CurrentColumn.Name}}{{else}}Projects{{end}}</h1>
    {{if .CurrentColumn}}{{if .CurrentColumn.Description}}<p>{{.CurrentColumn.Description}}</p>{{end}}{{end}}
  </header>

  <div class="tt-filterbar">
    {{range (index .ThemesExt "categories")}}<a class="tt-chip" href="{{.url}}">{{.name}}</a>{{end}}
  </div>

  {{if .List}}
  <div class="tt-projects">
    {{range .List}}
    <a class="tt-project" href="{{.URL}}">
      <div class="tt-project__img">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
      </div>
      <div class="tt-project__meta">
        {{$cat := index .Ext "category"}}{{if $cat}}<span class="tt-chip tt-chip--inline">{{$cat}}</span>{{end}}
        <h2>{{.Title}}</h2>
        <p class="tt-project__sub">{{.Description}}</p>
        <ul class="tt-project__facts">
          {{$loc := index .Ext "location"}}{{if $loc}}<li><span>Location</span>{{$loc}}</li>{{end}}
          {{$yr := index .Ext "year"}}{{if $yr}}<li><span>Year</span>{{$yr}}</li>{{end}}
          {{$st := index .Ext "status"}}{{if $st}}<li><span>Status</span>{{$st}}</li>{{end}}
          {{$sc := index .Ext "scale"}}{{if $sc}}<li><span>Scale</span>{{$sc}}</li>{{end}}
        </ul>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="tt-empty">No projects.</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"}}