<div
  data-pagefind-ignore
  x-data
  x-ref="root"
  class="group mt-2 mb-4 flex w-full scroll-mt-2 flex-col items-start gap-4 rounded bg-gray-50 p-2 outline outline-1 outline-offset-[-1px] outline-gray-200 dark:bg-gray-900 dark:outline-gray-800"
>
  {{ with .Attributes.title }}
    <div class="flex w-full items-center gap-2">
      <div
        class="flex items-center gap-2.5 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-800"
      >
        <div class="font-normal text-gray-500 dark:text-gray-200">
          {{ . }}
        </div>
      </div>
    </div>
  {{ end }}
  <div class="relative w-full">
    {{ $lang := .Type | default "text" }}
    {{ $result := transform.Highlight .Inner
      $lang .Options
    }}
    <div class="syntax-light dark:syntax-dark not-prose w-full">
      <button
        x-data="{ code: '{{ encoding.Base64Encode .Inner }}', copying: false }"
        class="{{ if .Attributes.title }}
          -top-10
        {{ else }}
          top-1
        {{ end }} absolute right-2 z-10 text-gray-300 dark:text-gray-500"
        title="copy"
        @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^[\$>]\s+/gm, ''));
      copying = true;
      setTimeout(() => copying = false, 2000);"
      >
        <span
          :class="{ 'group-hover:block' : !copying }"
          class="icon-svg hidden"
          >{{ partialCached "icon" "content_copy" "content_copy" }}</span
        >
        <span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden"
          >{{ partialCached "icon" "check_circle" "check_circle" }}</span
        >
      </button>
      {{ with .Attributes.collapse }}
        <div
          x-data="{ collapse: true }"
          class="relative overflow-clip"
          x-init="$watch('collapse', value => $refs.root.scrollIntoView({ behavior: 'smooth'}))"
        >
          <div
            x-show="collapse"
            class="absolute z-10 flex h-32 w-full flex-col-reverse items-center overflow-clip pb-4"
          >
            <button @click="collapse = false" class="chip">
              <span>Show more</span>
              <span class="icon-svg"
                >{{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}</span
              >
            </button>
          </div>
          <div :class="{ 'h-32': collapse }">
            {{ $result }}
            <button
              @click="collapse = true"
              x-show="!collapse"
              class="chip mx-auto mt-4 flex items-center  text-sm"
            >
              <span>Hide</span>
              <span class="icon-svg"
                >{{ partialCached "icon" "arrow_drop_up" "arrow_drop_up" }}</span
              >
            </button>
          </div>
        </div>
      {{ else }}
        {{ $result }}
      {{ end }}
    </div>
  </div>
</div>
