{{ $ctx := .ctx }}
{{ $NoViewTransition := (or .NoViewTransition false) }}

<!-- Transform cover images via Cloudflare URL patterns -->
{{ $splitURL := split $ctx.Params.cover "/" }}
{{ $cover := "" }}
{{ $i := 0 }}
{{ range $splitURL }}
    {{ if eq $i 3 }}
        {{ $cover = printf "%s%s" $cover "cdn-cgi/image/width=150,quality=75/" }}
    {{ end }}
    {{ $cover = printf "%s%s/" $cover . }}
    {{ $i = add $i 1 }}
{{ end }}
{{ $cover = strings.TrimSuffix "/" $cover }}

<div{{ if eq .Params.rating 1 }} class="opacity-50 z-0"{{ end }}
  {{ if not $NoViewTransition }}style="view-transition-name: book-{{ $ctx.File.UniqueID }}"{{ end }}>
  <a href="{{ $ctx.Permalink }}"
      {{ if not $NoViewTransition }}style="view-transition-name: book-{{ $ctx.Title }}"{{ end }}
      class="border-3 border-solid rotate-3 shadow-md block
      hover:rotate-0 hover:-translate-y-2 hover:scale-110 transition

      {{ if eq $ctx.Params.rating 1 }} relative
      {{ else if eq $ctx.Params.rating 5 }} border-amber-300 shadow-amber-200 shadow-xl
      {{ else }} border-white{{ end }}">
    <img class="lazy w-full block min-h-[120px] bg-neutral-500" src="{{ $cover }}" />
    {{ if eq $ctx.Params.rating 1 }}
    <div class="absolute z-1 top-[25%] left-[25%] h-[50%] w-[50%]"
        style="background-image: url('https://r2.eltr.ac/uPic/2025/05/thumbs-down.png');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;"></div>
    {{ end }}
  </a>
</div>