{{define "title"}}Discover{{end}}
{{define "content"}}
{{if .IsTopPicks}}
<div class="flex flex-col gap-6 pb-12">
  <div class="flex flex-wrap items-end justify-between gap-3">
    <div class="min-w-0">
      <h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Top Picks for You</h1>
      <p class="mt-1 text-sm text-foreground-muted">The full ranked list from your current watchlist profile.</p>
    </div>
    <a href="/discover" class="text-sm text-foreground-muted transition-colors hover:text-foreground">Back to Discover</a>
  </div>

  {{if eq (len .Animes) 0}}
    <div class="flex h-64 flex-col items-center justify-center gap-3 text-foreground-muted">
      <svg class="h-10 w-10 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
      <p class="text-sm text-foreground">No top picks yet</p>
      <p class="text-sm">Add a few anime to your watchlist so the recommender has something to learn from.</p>
      <div class="mt-2 flex gap-2">
        <a href="/watchlist" class="!rounded-none inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Open watchlist</a>
        <a href="/discover" class="!rounded-none inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Discover anime</a>
      </div>
    </div>
  {{else}}
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
      {{range .Animes}}
        {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
      {{end}}
    </div>
  {{end}}
</div>
{{else}}
<div class="flex flex-col gap-12 pb-12">
  <section class="flex flex-col items-center justify-center bg-background-surface px-6 py-16 text-center">
    <div class="flex max-w-2xl flex-col items-center gap-5">
      <h1 class="leading-[1.15] text-3xl font-normal tracking-[-0.02em] text-foreground sm:text-4xl">
        Don't know what to watch?
      </h1>
      <p class="text-base text-foreground-muted">
        Let us pick something for you from our vast collection of anime.
      </p>
      <button
        id="surprise-btn"
        data-surprise-me
        class="group relative inline-flex h-11 items-center justify-center gap-2 bg-background-button px-5 text-base font-normal text-foreground transition-colors hover:bg-background-button-hover active:bg-background-button-hover disabled:opacity-70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent sm:h-12"
      >
        <span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-background border-t-transparent"></span>
        <svg id="surprise-icon" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
        </svg>
        <span id="surprise-text">Surprise Me</span>
      </button>
    </div>
  </section>

  {{/* Trending Section */}}
  <section class="flex flex-col gap-4">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-normal text-foreground">Trending This Season</h2>
      <a href="/browse?order_by=popularity&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
    </div>
    <div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
      {{template "discover_skeleton"}}
    </div>
  </section>

  {{/* Upcoming Section */}}
  <section class="flex flex-col gap-4">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-normal text-foreground">Highly Anticipated</h2>
      <a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
    </div>
    <div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
      {{template "discover_skeleton"}}
    </div>
  </section>

  {{/* Top Section */}}
  <section class="flex flex-col gap-4">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-normal text-foreground">All-Time Greats</h2>
      <a href="/browse?order_by=score&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
    </div>
    <div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">
      {{template "discover_skeleton"}}
    </div>
  </section>
</div>

<style>
  .discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
  }
</style>
{{end}}
{{end}}

{{define "discover_section"}}
<div class="discover-grid">
  {{range .Animes}}
    {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
  {{end}}
</div>
{{end}}

{{define "discover_skeleton"}}
<div class="discover-grid">
  {{range (seq 8)}}
  <div class="flex flex-col gap-2">
    <div class="skeleton aspect-2/3 w-full"></div>
    <div class="skeleton h-4 w-3/4"></div>
    <div class="skeleton skeleton-subtle h-3 w-1/2"></div>
  </div>
  {{end}}
</div>
{{end}}