{{ $_hugo_config := `{ "version": 1 }` }}
{{ $blockID := printf "td-cover-block-%d" .Ordinal }}
{{ $promo_image := (.Page.Resources.ByType "image").GetMatch "**background*" }}
{{ $logo_image := (.Page.Resources.ByType "image").GetMatch "**logo*" }}
{{ $col_id := .Get "color" | default "dark" }}
{{ $image_anchor := .Get "image_anchor" | default "smart" }}
{{ $logo_anchor := .Get "logo_anchor" | default "smart" }}
{{/* Height can be one of: auto, min, med, max, full. */}}
{{ $height := .Get "height" | default "max" }}
{{ $byline := .Get "byline" | default "" }}
{{ $link_url := .Get "link_url" | default "#" }}
{{ $link_title := .Get "link_title" | default "Get started" }}
{{ with $promo_image }}
{{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) }}
{{ $promo_image_small := (.Fill (printf "960x540 %s" $image_anchor)) }}

<link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)">
<link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
<style>
  #{{ $blockID }} {
      background-image: url({{ $promo_image_small.RelPermalink }});
  }
  
  @media only screen and (min-width: 1200px) {
      #{{ $blockID }} {
          background-image: url({{ $promo_image_big.RelPermalink }}); 
      }
  }
</style>
{{ end }}
<section id="{{ $blockID }}" class="row td-hero-block">
  <div class="container">
      <div class="row">
          {{ with .Get "title" }}<h1 class="display-1">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-hero-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
          {{ with .Get "subtitle" }}<p>{{ . | html }}</p>{{ end }}
      </div>
      <div class="row hero-details">
        <div class="col-lg-5">
            {{ if eq .Page.File.Ext "md" }}
              {{ .Inner | markdownify }}
            {{ else }}
              {{ .Inner | htmlUnescape | safeHTML }}
            {{ end }}

            {{ if ne $link_url "#" }}
            <a class="btn btn-lg btn-info" href="{{ $link_url }}">{{ $link_title }} <div class="fas fa-arrow-right"></div></a>
            {{ end }}
        </div>

        <div class="col d-none d-md-block">
          <div class="hero-image">
            <div class="bg-white rounded">
              <img class="img-fluid" src="/img/cncf-graduated.png" alt="cncf graduated" />
            </div>
          </div>
        </div>

      </div>
  </div>
</section>
