{{define "watchlist_actions"}}
{{$anime := .Anime}}
{{$user := .User}}
{{$status := .Status}}

<div class="flex gap-2">
  <ui-dropdown class="relative block" data-align="left" data-width="min-w-[160px]">
    <div data-trigger class="cursor-pointer">
      <button type="button" class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-foreground transition-colors disabled:opacity-50">
        <span id="watchlist-status-display-{{$anime.MalID}}">
          {{if $status}}
            {{if eq $status "watching"}}Watching{{end}}
            {{if eq $status "completed"}}Completed{{end}}
            {{if eq $status "plan_to_watch"}}Plan to Watch{{end}}
            {{if eq $status "dropped"}}Dropped{{end}}
          {{else}}
            Add to Watchlist
          {{end}}
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-foreground-muted"><path d="m6 9 6 6 6-6"/></svg>
      </button>
    </div>

    <div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2">
      <div class="flex flex-col py-1">
        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.DisplayTitle}}', this)">
          <span class="font-medium text-sm text-foreground">Watching</span>
        </button>
        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', '{{$anime.DisplayTitle}}', this)">
          <span class="font-medium text-sm text-foreground">Completed</span>
        </button>
        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', '{{$anime.DisplayTitle}}', this)">
          <span class="font-medium text-sm text-foreground">Plan to Watch</span>
        </button>
        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', '{{$anime.DisplayTitle}}', this)">
          <span class="font-medium text-sm text-foreground">Dropped</span>
        </button>
        
        {{template "watchlist_remove_button" dict
          "ID" $anime.MalID
          "Title" $anime.DisplayTitle
          "ContainerClass" "hidden"
          "DividerClass" "my-1 h-px bg-border"
          "ButtonClass" "flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10 focus:bg-red-500/10"
          "SpanClass" "font-medium text-sm text-red-500 text-left whitespace-nowrap"
        }}
      </div>
    </div>
  </ui-dropdown>

  <a href="/anime/{{$anime.MalID}}/watch{{if and .ContinueWatchingEp (ne .ContinueWatchingEp 1)}}?ep={{.ContinueWatchingEp}}{{end}}" class="bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-medium text-foreground transition-colors">
    {{if and .ContinueWatchingEp (ne .ContinueWatchingEp 1)}}Continue Episode {{.ContinueWatchingEp}}{{else}}Watch Now{{end}}
  </a>
</div>
{{end}}

{{define "watchlist_remove_button"}}
  <div id="remove-watchlist-container-{{.ID}}" class="{{.ContainerClass}}">
    <button class="{{.ButtonClass}}" onclick="removeWatchlist({{.ID}}, '{{.Title}}', this)">
      <span class="{{.SpanClass}}">Remove from Watchlist</span>
    </button>
  </div>
{{end}}