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

{{if .Content}}
<main class="tt-main tt-main--project-detail">
  <section class="tt-projecthero">
    {{if .Content.Img}}<img class="tt-projecthero__img" src="{{.Content.Img}}" alt="{{.Content.Title}}">{{end}}
    <div class="tt-projecthero__shade"></div>
    <div class="tt-projecthero__caption">
      {{$cat := index .Content.Ext "category"}}{{if $cat}}<span class="tt-eyebrow tt-eyebrow--light">{{$cat}}</span>{{end}}
      <h1>{{.Content.Title}}</h1>
      <p>{{.Content.Description}}</p>
    </div>
  </section>

  <section class="tt-projectspecs">
    <dl>
      {{$loc := index .Content.Ext "location"}}{{if $loc}}<div><dt>Location</dt><dd>{{$loc}}</dd></div>{{end}}
      {{$yr := index .Content.Ext "year"}}{{if $yr}}<div><dt>Year</dt><dd>{{$yr}}</dd></div>{{end}}
      {{$st := index .Content.Ext "status"}}{{if $st}}<div><dt>Status</dt><dd>{{$st}}</dd></div>{{end}}
      {{$sc := index .Content.Ext "scale"}}{{if $sc}}<div><dt>Scale</dt><dd>{{$sc}}</dd></div>{{end}}
      {{$cl := index .Content.Ext "client"}}{{if $cl}}<div><dt>Client</dt><dd>{{$cl}}</dd></div>{{end}}
      {{if .Content.Author}}<div><dt>Studio</dt><dd>{{.Content.Author}}</dd></div>{{end}}
    </dl>
  </section>

  <article class="tt-prose tt-projectbody">{{.Content.Content|Str2Html}}</article>

  {{if .Content.Albums}}
  <section class="tt-gallery">
    {{range .Content.Albums}}<img src="{{.}}" alt="{{$.Content.Title}}">{{end}}
  </section>
  {{end}}

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

  {{$related := Related .Content.Id 3}}
  {{if $related}}
  <section class="tt-section tt-related">
    <span class="tt-eyebrow">More work</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}}

  <section class="tt-cta">
    <h2>Discuss a project, a site or a public ambition.</h2>
    <a class="tt-cta__btn" href="/contacts">Contacts →</a>
  </section>
</main>
{{end}}

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