{{ define "main" }}
{{ $shows := where site.RegularPages "Section" "shows" }}
{{ $upcoming := (where $shows "Date" "ge" now).ByDate }}
{{ $past := first 3 (where $shows "Date" "lt" now).ByDate.Reverse }}

<section class="hero">
    <div class="hero__media">
        {{ partial "img.html" (dict "src" "/img/AlbumReleaseParty_Stage_compressed.jpg" "alt" "Deepwater Survival live bei der Album-Release-Party, Publikum vor der blau beleuchteten Bühne" "sizes" "100vw" "widths" (slice 800 1400 2000) "eager" true) }}
    </div>
    <div class="hero__content">
        <h1 class="hero__logo">
            <img src="/img/logo-crop.png" alt="Deepwater Survival" width="1600" height="675">
        </h1>
        <p class="hero__tagline">{{ .Params.tagline }}</p>
        <div class="hero__actions">
            <a class="button button--bolt" href="/music/">Ocean Tales anhören</a>
            <a class="button button--ghost" href="/shows/">Live-Termine</a>
        </div>
    </div>
</section>

<section class="intro wrap">
    <div class="intro__head">
        <h2 class="display">{{ .Params.headline }}</h2>
    </div>
    <div class="intro__body prose">
        {{ .Content }}
    </div>
</section>

<section class="live wrap">
    <header class="section-head">
        <h2 class="display">Live</h2>
        <a class="text-link" href="/shows/">Alle Shows</a>
    </header>
    <h3 class="live__sub">Kommende Termine</h3>
    {{ with $upcoming }}
    <div class="flyer-wall">
        {{ range . }}{{ partial "show-card.html" . }}{{ end }}
    </div>
    {{ else }}
    <p class="live__empty">Gerade sind keine Termine angekündigt. Ihr wollt uns auf eurer Bühne? Schreibt an <a href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>.</p>
    {{ end }}
    {{ with $past }}
    <h3 class="live__sub live__sub--past">Zuletzt gespielt</h3>
    <div class="flyer-wall">
        {{ range . }}{{ partial "show-card.html" . }}{{ end }}
    </div>
    {{ end }}
</section>

<section class="booking">
    <div class="wrap booking__inner">
        <h2 class="display">Lust auf Lärm?</h2>
        <p>Für Booking, Presse und alles andere erreicht ihr uns per Mail.</p>
        <a class="booking__mail" href="mailto:{{ site.Params.email }}">{{ site.Params.email }}</a>
    </div>
</section>
{{ end }}