{{ define "main" }}
<header class="page-head wrap">
    <h1 class="display display--xl">{{ .Title }}</h1>
    {{ with .Content }}<div class="page-head__lead">{{ . }}</div>{{ end }}
</header>

<section class="wrap" aria-label="Bandmitglieder">
    <ul class="members">
        {{ range .Params.members }}
        <li class="member">
            <div class="member__photo">
                {{ partial "img.html" (dict "src" .image "alt" (printf "%s live auf der Bühne" .name) "sizes" "(min-width: 900px) 25vw, 50vw" "widths" (slice 400 800)) }}
            </div>
            <h2 class="member__name">{{ .name }}</h2>
            <p class="member__role">{{ .role }}</p>
        </li>
        {{ end }}
    </ul>
</section>

{{ with .Params.groupImage }}
<figure class="group-photo">
    {{ partial "img.html" (dict "src" . "alt" "Gruppenfoto von Deepwater Survival im Backstage-Flur" "sizes" "100vw" "widths" (slice 800 1400 2000)) }}
</figure>
{{ end }}

{{ with .Params.crew }}
{{ $photo := "" }}{{ with .image }}{{ $photo = resources.Get (strings.TrimPrefix "/" .) }}{{ end }}
<section class="wrap crew" aria-labelledby="crew-heading">
    <h2 id="crew-heading" class="display">{{ .heading }}</h2>
    <div class="crew__body">
        <div class="crew__photo">
            {{ if $photo }}
            {{ partial "img.html" (dict "res" $photo "alt" (printf "Porträt von %s" .name) "sizes" "(min-width: 900px) 20rem, 60vw" "widths" (slice 400 800)) }}
            {{ else }}
            <span class="crew__initials" aria-hidden="true">{{ range split .name " " }}{{ substr . 0 1 }}{{ end }}</span>
            {{ end }}
        </div>
        <div class="crew__info">
            <h3 class="crew__name">{{ .name }}</h3>
            <p class="crew__role">{{ .role }}</p>
            {{ with .text }}<p class="crew__text">{{ . }}</p>{{ end }}
            <a class="button button--ghost button--handle" href="{{ site.Params.photographer.instagram }}" target="_blank" rel="noopener">@{{ site.Params.photographer.handle }} auf Instagram</a>
        </div>
    </div>
</section>
{{ end }}
{{ end }}