{{ $ := .root }}
{{ $page := .page }}
{{ $header := $page.Params.header }}

{{/* Compute image path outside of HTML style element due to Hugo limitation. */}}
{{ $overlay_img := "" }}
{{ if $header.overlay_img }}
  {{ $overlay_img = (printf "img/%s" $header.overlay_img) }}
{{end}}

<section id="{{ $page.File.TranslationBaseName }}" class="hero-overlay" style="
{{ if $header.overlay_color }}
background-color: {{ $header.overlay_color | default "transparent" }};
{{ end }}
{{ if $header.overlay_img }}
background-image:
{{ if $header.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $header.overlay_filter }}), rgba(0, 0, 0, {{ $header.overlay_filter }})), {{ end }}
url('{{ $overlay_img }}')
{{ end }}
;">

  <div class="container">

    <h1 class="hero-title" itemprop="headline">
      {{ with $page.Title }}{{ . | markdownify }}{{ end }}
    </h1>

    {{ with $page.Content }}
    <p class="hero-lead">{{ . | markdownify }}</p>
    {{ end }}

    {{ if $page.Params.cta.url }}
    <p><a href="{{ $page.Params.cta.url }}" class="btn btn-outline-light btn-lg">{{ $page.Params.cta.label | safeHTML}}</a></p>
    {{ end }}

  </div>

</section>