{{/* Opt-in preview for Blowfish's built-in homepage layouts. */}}
{{ $layouts := slice "landing" "background" "hero" "profile" "page" "card" }}
<section data-layout-switcher>
  <div>
    {{ range $index, $layout := $layouts }}
      {{ $html := partial (printf "home/%s.html" $layout) $ }}
      {{ if ne $index 0 }}
        {{/* Hidden panels must not eagerly fetch their imagery. */}}
        {{ $html = replace $html `loading="eager"` `loading="lazy"` }}
        {{ $html = replace $html `fetchpriority="high"` `fetchpriority="low"` }}
      {{ end }}
      <div id="layout-panel-{{ $layout }}" data-layout-switcher-panel="{{ $layout }}" role="tabpanel" aria-labelledby="layout-tab-{{ $layout }}" tabindex="0"{{ if ne $index 0 }} hidden{{ end }}>
        {{ $html | safeHTML }}
      </div>
    {{ end }}
  </div>

  <div class="mb-8 mt-8 rounded-3xl border border-neutral-200/80 bg-neutral/85 p-5 shadow-lg shadow-neutral-900/5 backdrop-blur-xl dark:border-neutral-700/80 dark:bg-neutral-800/85 sm:p-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <p class="text-sm font-bold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-400">Theme playground</p>
        <h2 class="mt-1 text-2xl font-black tracking-tight text-neutral-900 dark:text-white">Try a homepage layout</h2>
        <p class="mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-300">Same content, six built-in Blowfish layouts. Pick one to preview it in place.</p>
      </div>
      <a class="text-sm font-bold text-primary-600 underline decoration-primary-300 underline-offset-4 hover:text-primary-500 dark:text-primary-400" href="{{ `docs/homepage-layout/` | relLangURL }}">Layout documentation</a>
    </div>
    <div class="mt-5 flex flex-wrap gap-2" role="tablist" aria-label="Homepage layouts">
      {{ range $index, $layout := $layouts }}
        <button type="button" id="layout-tab-{{ $layout }}" class="rounded-full border border-neutral-300 bg-white px-4 py-2 text-sm font-bold text-neutral-700 shadow-sm transition hover:border-primary-400 hover:text-primary-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:text-primary-400 {{ if eq $index 0 }}border-primary-600 bg-primary-600 text-white hover:bg-primary-500 hover:text-white dark:border-primary-500 dark:bg-primary-500{{ end }}" data-layout-switcher-button="{{ $layout }}" role="tab" aria-selected="{{ cond (eq $index 0) `true` `false` }}" aria-controls="layout-panel-{{ $layout }}" tabindex="{{ cond (eq $index 0) `0` `-1` }}">{{ $layout | title }}</button>
      {{ end }}
    </div>
  </div>

  {{ $jsSwitcher := resources.Get "js/layout-switcher.js" | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
  <script
    defer
    type="text/javascript"
    src="{{ $jsSwitcher.RelPermalink }}"
    integrity="{{ $jsSwitcher.Data.Integrity }}"></script>
</section>