{{ define "hero" }}
  <div class="relative isolate overflow-hidden min-h-screen">
    {{ template "prevnext-button" . }}
    <div class="mx-auto max-w-7xl px-6 pt-10 lg:flex lg:px-8">
      <div class="mx-auto max-w-2xl lg:mx-0 lg:shrink-0 lg:pt-8">
        <h1
          class="text-5xl font-semibold tracking-tight text-pretty text-gray-900  dark:text-gray-100">
          {{ .Title }}
        </h1>
        <p
          class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">
          {{ with .Params.meta.description }}{{ . }}{{ end }}
        </p>

        {{ template "theme-details" . }}
        <div class="mt-12 flex items-center gap-x-3">
          {{ if not site.Params.hideHTMLLink }}
            {{ with .Params.htmlURL }}
              <a
                href="{{ . }}"
                rel="nofollow"
                class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                >Download</a
              >
            {{ end }}
          {{ end }}
          {{ if not site.Params.hideDemoLink }}
            {{ with .Params.meta.demosite }}
              <a
                href="{{ . }}"
                rel="nofollow"
                class="rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                >Demo</a
              >
            {{ end }}

          {{ end }}
        </div>
        <div class="mt-8 text-sm">
          <kbd
            class="rounded-sm text-lg outline-1 outline-gray-300 dark:outline-gray-600 bg-gray-100 dark:bg-gray-700 shadow-sm px-2 py-1"
            >←</kbd
          ><kbd
            class="ml-2 mr-1 rounded-sm text-lg outline-1 outline-gray-300 dark:outline-gray-600 bg-gray-100 dark:bg-gray-700 shadow-sm px-2 py-1"
            >→</kbd
          >
          to navigate
        </div>
      </div>
      <div
        class="mx-auto pt-16 lg:pt-24  flex max-w-2xl  lg:mt-0 lg:mr-0 lg:ml-18 md:max-w-none lg:flex-none">
        {{ $img := (.Resources.ByType "image").GetMatch "*screen*" }}
        {{ if $img }}
          {{ partial "helpers/picture.html" (dict
            "image" $img
            "alt" "Theme Screenshot"
            "width" 1280
            "class" "w-3xl rounded-md shadow-2xl ring-1 ring-gray-900/10")
          }}
        {{ end }}

      </div>
    </div>
  </div>
{{ end }}

{{ define "main" }}
  <div class="flex flex-col w-full p-0 m-0 content">
    {{ if not site.Params.hideContent }}
      {{ .Content }}
    {{ end }}
  </div>
{{ end }}

{{ define "subheader" }}
  <div class="mt-2 lg:mt-8 mx-auto max-w-7xl">
    {{ partial "breadcrumbs.html" . }}
  </div>
{{ end }}

{{ define "rightsidebar" }}
  {{ printf "%c" '\u00A0' }}
{{ end }}

{{ define "leftsidebar" }}
  {{ printf "%c" '\u00A0' }}
{{ end }}

{{ define "theme-details" }}
  <div>
    <div class="mt-8 border-t border-gray-100">
      <dl class="divide-y divide-gray-100">
        {{ with .Params.meta.license }}
          {{ template "descriptionlist-item" (dict "label" "License" "value" . ) }}
        {{ end }}
        {{ with .Params.githubInfo }}
          {{ template "descriptionlist-item" (dict "label" "GitHub Stars" "value" .Stars ) }}
        {{ end }}
        {{ with .Params.hugoVersion.min }}
          {{ template "descriptionlist-item" (dict "label" "Minimum Hugo Version" "value" . ) }}
        {{ end }}
        {{ template "descriptionlist-item" (dict "label" "Last Updated" "value" ( .Lastmod.Format "2006-01-02") ) }}
        {{ with .Params.meta.author }}
          {{ if reflect.IsMap . }}
            {{ template "descriptionlist-item" (dict "label" "Author" "value" .name "link" .homepage ) }}
          {{ end }}
        {{ end }}
        {{ with .Params.meta.authors }}
          {{ range . }}
            {{ template "descriptionlist-item" (dict "label" "Author" "value" .name "link" .homepage ) }}
          {{ end }}
        {{ end }}

        {{ with (.GetTerms "tags") }}
          <div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
            <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">
              Tags
            </dt>
            <dd
              class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 space-x-1">
              {{ range $i, $e := . }}
                <a
                  href="{{ .Permalink }}"
                  class="text-blue-600 hover:text-blue-600
        dark:hover:text-blue-200 dark:text-blue-200 tracking-wide">
                  {{ .LinkTitle | lower }}
                </a>
              {{ end }}
            </dd>
          </div>
        {{ end }}

      </dl>
    </div>
  </div>
{{ end }}

{{ define "descriptionlist-item" }}
  <div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
    <dt class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">
      {{ .label }}
    </dt>
    <dd
      class="mt-1 text-sm/6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">
      {{ .value }}
    </dd>
  </div>
{{ end }}

{{ define "prevnext-button" }}
  {{ $prev := "" }}
  {{ with .NextInSection }}
    {{ $prev = .RelPermalink }}
  {{ end }}
  {{ $next := "" }}
  {{ with .PrevInSection }}
    {{ $next = .RelPermalink }}
  {{ end }}
  {{ $data := dict "prev" $prev "next" $next | jsonify }}
  <div
    class="hidden lg:block print:hidden bg-black transition transition-all transition-discrete"
    x-data="{{ $data }}"
    x-show="$store.nav.scroll.atTop"
    @keydown.left.window="if(prev) { document.location.href = prev; }"
    @keydown.right.window="if(next) { document.location.href = next; }">
    {{ $classes := "ml-6 fixed mb-6 flex items-center justify-center rounded-md bg-white/80 dark:bg-dark px-3.5 py-2.5 text-sm font-semibold text-black dark:text-white outline-solid outline-gray-300 dark:outline-gray-800 shadow-xs hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400" }}
    {{ with $prev }}
      <a href="{{ . }}" class="bottom-0 {{ $classes }}">
        <svg
          class="w-3.5 h-3.5 me-2 rtl:rotate-180"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 14 10">
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 5H1m0 0 4 4M1 5l4-4" />
        </svg>
        Previous
      </a>
    {{ end }}
    {{ with $next }}
      <a href="{{ . }}" class="bottom-0 right-0 mr-6 {{ $classes }}">
        Next
        <svg
          class="w-3.5 h-3.5 ms-2 rtl:rotate-180"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 14 10">
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    {{ end }}
  </div>
{{ end }}