{{define "anime_recommendations"}}
{{if .Items}}
<div class="w-full">
  <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
  <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
    {{range (slice .Items 0 (min (len .Items) 8))}}
      <a href="/anime/{{.Entry.MalID}}" class="group flex flex-col gap-2">
        <div class="aspect-2/3 overflow-hidden bg-background-surface shadow-md">
          <img src="{{.Entry.Images.Webp.LargeImageURL}}" alt="{{.Entry.Title}}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
        </div>
        <span class="truncate text-xs font-medium text-foreground-muted transition-colors group-hover:text-foreground">{{.Entry.Title}}</span>
      </a>
    {{end}}
  </div>
</div>
{{end}}
{{end}}

{{define "anime_recommendations_loading"}}
<div
  hx-get="/anime/{{.AnimeID}}?section=recommendations"
  hx-trigger="load delay:1500ms"
  hx-swap="outerHTML"
>
  <div class="w-full">
    <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
      {{range (seq 8)}}
        <div class="flex flex-col gap-2">
          <div class="skeleton aspect-2/3"></div>
          <div class="skeleton h-3 w-full"></div>
        </div>
      {{end}}
    </div>
  </div>
</div>
{{end}}

{{define "anime_recommendations_initial_loading"}}
<div
  hx-get="/anime/{{.AnimeID}}?section=recommendations"
  hx-trigger="load"
  hx-swap="outerHTML"
>
  <div class="w-full">
    <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
      {{range (seq 8)}}
        <div class="flex flex-col gap-2">
          <div class="skeleton aspect-2/3"></div>
          <div class="skeleton h-3 w-full"></div>
        </div>
      {{end}}
    </div>
  </div>
</div>
{{end}}