{{ define "bodyclass" }}page-portfolio{{ end }}
{{ define "main" }}
{{ $hasText := ne (.RawContent | strings.TrimSpace) "" }}
{{ $images := .Params.images }}
{{ $video := .Params.video }}

{{ if or $images $hasText $video }}
<div class="tui tui--files filebrowser">
  <p class="tui__cmd"><span class="tui__sym">$</span> ls</p>
  {{ $total := 0 }}{{ if $images }}{{ $total = len $images }}{{ end }}{{ if $hasText }}{{ $total = add $total 1 }}{{ end }}{{ if $video }}{{ $total = add $total 1 }}{{ end }}
  <p class="tui__cmd tui__total">total {{ $total }}</p>
  <ul class="tui__ls">
    <li><a href="{{ "/portfolio/" | relURL }}" data-name="..">
      <span class="tui__perm">drwxr-xr-x</span><span class="tui__name">..</span>
    </a></li>
    {{ if $hasText }}
    <li><a data-name="info.md" data-text="info.md" class="is-selected">
      <span class="tui__perm">-rw-r--r--</span><span class="tui__name">info.md</span>
    </a></li>
    {{ end }}
    {{ if $video }}
    <li><a data-name="video.mp4" data-video="1"{{ if not $hasText }} class="is-selected"{{ end }}>
      <span class="tui__perm">-rw-r--r--</span><span class="tui__name">video.mp4</span>
    </a></li>
    {{ end }}
    {{ range $i, $im := $images }}
    <li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $hasText) (not $video) (eq $i 0) }} class="is-selected"{{ end }}>
      <span class="tui__perm">-rw-r--r--</span><span class="tui__name">{{ $im.name }}</span>
    </a></li>
    {{ end }}
  </ul>

  <figure class="tui__preview">
    {{ if $hasText }}<div class="tui__text" data-text="info.md">{{ .Content }}</div>{{ end }}
    {{ if $video }}
    <div class="player"{{ if $hasText }} hidden{{ end }}>
      <video preload="none" playsinline{{ with .Params.thumbnail }} poster="{{ . }}"{{ end }}>
        <source src="{{ $video }}" type="video/mp4">
      </video>
      <button class="player__big" type="button" aria-label="play">▶</button>
      <div class="player__bar">
        <button class="player__play" type="button" aria-label="play/pause">▶</button>
        <div class="player__scrub"><div class="player__fill"></div></div>
        <span class="player__time">00:00 / 00:00</span>
        <button class="player__mute" type="button" aria-label="mute">vol</button>
        <button class="player__full" type="button" aria-label="fullscreen">⛶</button>
      </div>
    </div>
    {{ end }}
    {{ if $images }}<img{{ if or $hasText $video }} hidden{{ end }} src="{{ (index $images 0).src | relURL }}" alt="{{ .Title }}">{{ end }}
    <figcaption class="tui__status">{{ if $hasText }}info.md{{ else if $video }}video.mp4{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
  </figure>
</div>
{{ end }}

{{ with .Params.studies }}
  {{ $segs := after 2 (split . "/") }}
  {{ $taxos := slice "schools" "degrees" "semesters" }}
  {{ $last := sub (len $segs) 1 }}
  <p class="proj-path">/studies/{{ range $i, $seg := $segs }}{{ if $i }}/{{ end }}{{ $terms := $.GetTerms (index $taxos $i) }}{{ if $terms }}{{ $t := index $terms 0 }}<a class="proj-path__seg{{ if eq $i $last }} proj-path__seg--last{{ end }}" href="{{ $t.RelPermalink }}">{{ $seg }}</a>{{ else }}{{ $seg }}{{ end }}{{ end }}</p>
{{ end }}

<div class="time"><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006" }}&nbsp;</time></div>

{{ $list := sort (where .Site.RegularPages "Section" "portfolio") "Date" "desc" }}
{{ $idx := -1 }}
{{ range $i, $p := $list }}{{ if eq $p.RelPermalink $.RelPermalink }}{{ $idx = $i }}{{ end }}{{ end }}
<nav class="proj-nav" aria-label="Project navigation">
  {{ $older := add $idx 1 }}{{ $newer := sub $idx 1 }}
  {{ if lt $older (len $list) }}<a href="{{ (index $list $older).RelPermalink }}" rel="prev" aria-label="older project">←</a>{{ end }}
  {{ if ge $newer 0 }}<a href="{{ (index $list $newer).RelPermalink }}" rel="next" aria-label="newer project">→</a>{{ end }}
</nav>
{{ end }}
