{{define "anime_themes"}}
{{if or .Items.Openings .Items.Endings}}
<div class="grid grid-cols-2 gap-6 p-6">
  <div>
    <h3 class="mb-4 text-sm font-medium text-foreground">Openings</h3>
    <div class="flex flex-col gap-3">
      {{range .Items.Openings}}
        <div class="text-sm leading-relaxed text-foreground-muted">{{.}}</div>
      {{end}}
    </div>
  </div>
  <div>
    <h3 class="mb-4 text-sm font-medium text-foreground">Endings</h3>
    <div class="flex flex-col gap-3">
      {{range .Items.Endings}}
        <div class="text-sm leading-relaxed text-foreground-muted">{{.}}</div>
      {{end}}
    </div>
  </div>
</div>
{{else}}
<div class="p-6 text-sm text-foreground-muted">No theme songs available.</div>
{{end}}
{{end}}

{{define "anime_themes_dialog"}}
<div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-(--shadow-card)" role="dialog" aria-modal="true" aria-label="Theme Songs">
    <div class="flex items-center justify-between px-6 py-4">
      <h2 class="text-base font-normal text-foreground">Theme Songs</h2>
      <button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Close</button>
    </div>
    <div data-themes-content class="max-h-[60vh] overflow-y-auto"></div>
  </div>
</div>

<div data-themes-loader hx-get="/anime/{{.AnimeID}}?section=themes" hx-trigger="theme-songs:load from:body" hx-target="[data-themes-content]" hx-swap="innerHTML"></div>
{{end}}