{{ $params := .Site.Params.home }}
{{ with .Site.Data.home }}
    <section id="home"
{{/*
        {{ with .background }}
            style="background-image: url('{{ (printf "images/%s" .) | absURL }}'); opacity: 50%;"
        {{ end }}
*/}}
{{- with .background -}}
    style="--home-bkg-image: url('{{ (printf "images/%s" .) | absURL }}');"
{{- end -}}
        >
        <div class="header-content"
            style="
            {{- with $params.width -}}
                --home-width: {{ . }}%;
            {{- end -}}
            {{- if isset $params "offset_h" -}}
                --home-offset-h: {{ $params.offset_h }}%;
            {{- end -}}
            {{- if isset $params "offset_v" -}}
                --home-offset-v: {{ $params.offset_v }}%;
            {{- end -}}
            {{- with $params.text_align -}}
                --home-text-align: {{ . }};
            {{- end -}}
            "
            >
            <div class="header-content-inner anim-wrapper">
                {{ with .title_logo }}
                    <img id="home_logo" src="{{ . }}" class="img-responsive">
                {{ end }}
                {{ with .title }}
                    {{/* TODO: use specific class for title? */}}
                    <h1 class="anim zoomIn">{{ . | markdownify  }}</h1>
                {{ end }}
                {{ with .subtitle }}
                    <h2>{{ . | markdownify }}</h2>
                {{ end }}
                {{ if or .title .subtitle }}
                    <hr class="primary anim zoomIn">
                {{ end }}
                {{ with .text }}
                    <p>{{ . | markdownify }}</p>
                {{ end }}
                <div class="anim zoomIn">
                    {{ if .button_image }}
                        <a href="#about" class="btn-image page-scroll">
                            <img src={{ .button_image }} />
                        </a>
                    {{ else if .button_text }}
                        <a href="#about" class="btn btn-primary page-scroll">
                            {{ .button_text }}<br>
                        </a>
                    {{ else if .button_icon }}
                        {{ with .button_icon }}
                            <a href="#about" class="btn-icon btn-primary page-scroll {{ .pack }} {{ .icon }} icon-x6">
                            </a>
                        {{ end }}
                    {{ end }}
                </div>
            </div>
        </div>
        {{/* Background video (if no 'background' image) */}}
        {{- if and .background_video (not .background)  -}}
        <video autoplay muted loop id="home_video">
            <source src="{{ printf "images/%s" .background_video }}" type="video/mp4">
        </video>
        {{- end -}}
    </section>
{{ end }}