{{ define "main" }}
{{ $headless := .Site.GetPage "/homepage" }}
{{ $sections := $headless.Resources.ByType "page" }}
{{ $sections := cond .Site.BuildDrafts $sections (where $sections "Draft" "==" false) }}
{{ $content := where $sections "Params.external" "==" nil }}

<!-- Welcome screen that scrolls out of view -->
{{ if not .Params.header_use_video }}
<header id="site-head" class="withCenteredImage" {{ with .Params.header_image }}style="background-image: url({{ . }})"{{ end }}>
{{ else }}
<header id="site-head">
{{ end }}

    <div class="vertical">

        {{ if .Params.header_use_video }}
            <!-- A partial to be overwritten by the user.
            Simply place a custom_header_video.html into
            your local /layouts/partials-directory -->
            {{- partial "custom_header_video.html" . -}}
        {{ end }}

        <div id="site-head-content" class="inner">
            {{ with .Params.header_logo }}<img id="blog-logo" src="{{ . }}" />{{ end }}

            {{ if .Site.Params.title_guard }}<div class="title-and-description-guard">{{ end }}
              {{ with .Params.header_headline }}<h1 class="blog-title">{{ . | safeHTML }}</h1>{{ end }}
              {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . | safeHTML }}</h2>{{ end }}
            {{ if .Site.Params.title_guard }}</div>{{ end }}

            {{ range where $sections ".Params.header_menu" "eq" true }}
              {{ $button_title := .Title }}
              {{ with .Params.header_menu_title }}{{ $button_title = . }}{{ end }}

              {{ if isset .Params "external" }}
                 <a class='btn site-menu' href='{{ .Params.external }}'>{{ $button_title }}&nbsp;<icon class="fa fa-external-link"></icon></a>
              {{ else }}
                {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
                 <a class='btn site-menu' data-title-anchor='{{ anchorize $fnav_title }}' href='#{{ anchorize $fnav_title }}'>{{ $button_title }}</a>
              {{ end }}
            {{ end }}
            {{ with (index $content 0) }}
                {{ $first_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $first_title = . }}{{ end }}
                <a id='header-arrow' href="#{{- anchorize $first_title -}}" aria-label="Go to first section"><i class="fa fa-angle-down"></i></a>
            {{ end }}
        </div>
    </div>
</header>

<main class="content" role="main">
    <!-- Render sticky left navigation menu -->
    <div class='fixed-nav'>
        {{ range $index_val, $elem_val := $content }}
            {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
            <a class='fn-item' item_index='{{ (add $index_val 1) }}' href='#{{ anchorize $fnav_title }}'>{{ $fnav_title | safeHTML }}</a>
        {{ end }}
    </div>

    <!-- Render single-page content -->
    {{ range $index_val, $elem_val := $content }}
        {{ $fnav_title := .Title }}{{ with .Params.navigation_menu_title }}{{ $fnav_title = . }}{{ end }}
        <div class='post-holder{{ if and (ne .Site.Params.invertSectionColors true) (not (modBool $index_val 2)) }} dark{{ else if and (eq .Site.Params.invertSectionColors true) (modBool $index_val 2) }} dark{{ end }}'>
            <article id='{{ anchorize $fnav_title }}' class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $content) }}last{{ end }}'>
                <header class="post-header">
                    <h2 class="post-title">{{ .Title | safeHTML }}</h2>
                </header>
                <section class="post-content">
                    {{ .Content }}
                </section>
            </article>
            <div class='post-after{{ if and (ne .Site.Params.invertSectionColors true) (modBool $index_val 2) }} light{{ else if and (eq .Site.Params.invertSectionColors true) (not (modBool $index_val 2)) }} light{{ end }}'></div>
        </div>
    {{ end }}
</main>
{{ end }}