{{ if and .Params.image (not .Params.hide_header_image) }}
  {{ .Scratch.Set "image" .Params.image }}
  {{ if hasPrefix .Params.image "resource:" }}
    {{ $resource := .Resources.GetMatch (replace .Params.image "resource:" "") }}
    {{ .Scratch.Set "image" ($resource.Resize "2000x webp").RelPermalink }}
  {{ else if hasPrefix .Params.image "unsplash:" }}
    {{ $unsplash_id := replace .Params.image "unsplash:" "" }}
    {{ $query := querify "client_id" (getenv "UNSPLASH_ACCESS_KEY") }}
    {{ $unsplash_data := (getJSON "https://api.unsplash.com/photos/" $unsplash_id "?" $query )}}
    {{ .Scratch.Set "image" $unsplash_data.urls.regular }}
    {{ .Scratch.Set "unsplash_data" $unsplash_data }}
  {{ end }}

  <img class="mb-3 header-image" id="header" src='{{ .Scratch.Get "image" }}' alt="" decoding="async" referrerpolicy="no-referrer" />
{{ end }}

{{ partial "breadcrumbs/index.html" . }}

<h1 class="display-4">{{ .Title }}</h1>
{{ if .Params.subtitle }}
  <h2 class="my-3 h5">{{ markdownify .Params.subtitle | emojify }}</h2>
{{ end }}
{{ if .IsPage }}
  <p>{{ partial "content-details.html" . }}</p>
{{ end }}
{{ if .Content }}
  <hr />
  <div class="content mt-3">
    {{ if .TableOfContents }}
      <div class="float-lg-right ml-lg-3 mb-3 p-3">
        {{ .TableOfContents }}
      </div>
    {{ end }}
    {{ .Content }}
  </div>

  <div class="modal fade" tabindex="-1" id="lightbox-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <!-- Image tag will be added here -->
      </div>
    </div>
  </div>
{{ end }}