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

<main class="tt-main tt-main--people">
  <header class="tt-pagehead">
    <span class="tt-eyebrow">Studio</span>
    <h1>{{if .CurrentColumn}}{{.CurrentColumn.Name}}{{else}}People{{end}}</h1>
    {{if .CurrentColumn}}{{if .CurrentColumn.Description}}<p>{{.CurrentColumn.Description}}</p>{{end}}{{end}}
  </header>

  {{if .List}}
  <div class="tt-people">
    {{range .List}}
    <a class="tt-people__card" href="{{.URL}}">
      <div class="tt-people__img">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
      </div>
      <div class="tt-people__body">
        <h3>{{.Title}}</h3>
        <span class="tt-people__role">{{index .Ext "role"}}</span>
        <p>{{.Description}}</p>
        <ul class="tt-people__facts">
          {{$f := index .Ext "focus"}}{{if $f}}<li><span>Focus</span>{{$f}}</li>{{end}}
          {{$c := index .Ext "city"}}{{if $c}}<li><span>City</span>{{$c}}</li>{{end}}
          {{$j := index .Ext "joined"}}{{if $j}}<li><span>Joined</span>{{$j}}</li>{{end}}
        </ul>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="tt-empty">No people yet.</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"}}