{{define "anime_statistics"}}
{{if .Items}}
<div class="flex flex-col gap-1.5 pt-2">
  <div class="flex items-center justify-between text-xs">
    <span class="text-foreground-muted">Watching</span>
    <span class="text-foreground">{{.Items.Watching}}</span>
  </div>
  <div class="flex items-center justify-between text-xs">
    <span class="text-foreground-muted">Completed</span>
    <span class="text-foreground">{{.Items.Completed}}</span>
  </div>
  <div class="flex items-center justify-between text-xs">
    <span class="text-foreground-muted">On Hold</span>
    <span class="text-foreground">{{.Items.OnHold}}</span>
  </div>
  <div class="flex items-center justify-between text-xs">
    <span class="text-foreground-muted">Dropped</span>
    <span class="text-foreground">{{.Items.Dropped}}</span>
  </div>
  <div class="flex items-center justify-between text-xs">
    <span class="text-foreground-muted">Plan to Watch</span>
    <span class="text-foreground">{{.Items.PlanToWatch}}</span>
  </div>
</div>
{{end}}
{{end}}

{{define "anime_statistics_loading"}}
<div hx-get="/anime/{{.AnimeID}}?section=statistics" hx-trigger="load" hx-swap="innerHTML">
  <div class="flex flex-col gap-3 pt-1">
    {{range (seq 5)}}
      <div class="skeleton h-4"></div>
    {{end}}
  </div>
</div>
{{end}}