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

{{if .Content}}
<main class="tt-main tt-main--person">
  <article class="tt-person-detail">
    <div class="tt-person-detail__img">
      {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}">{{end}}
    </div>
    <div class="tt-person-detail__body">
      <a class="tt-eyebrow" href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a>
      <h1>{{.Content.Title}}</h1>
      <p class="tt-person-detail__lead">{{.Content.Description}}</p>
      <ul class="tt-person-detail__facts">
        {{$r := index .Content.Ext "role"}}{{if $r}}<li><span>Role</span>{{$r}}</li>{{end}}
        {{$f := index .Content.Ext "focus"}}{{if $f}}<li><span>Focus</span>{{$f}}</li>{{end}}
        {{$c := index .Content.Ext "city"}}{{if $c}}<li><span>City</span>{{$c}}</li>{{end}}
        {{$j := index .Content.Ext "joined"}}{{if $j}}<li><span>Joined</span>{{$j}}</li>{{end}}
      </ul>
      <div class="tt-prose">{{.Content.Content|Str2Html}}</div>
    </div>
  </article>

  <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>
</main>
{{end}}

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