{{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="!rounded-none bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-normal text-foreground transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
        <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-[var(--shadow-card)] left-0 top-full mt-2">
      <div class="flex flex-col py-1">
        <button
          data-unstyled-button
          data-watchlist-update
          data-mal-id="{{$anime.MalID}}"
          data-watchlist-status="watching"
          data-watchlist-display="Watching"
          data-watchlist-title="{{$anime.DisplayTitle}}"
          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
        >
          <span class="font-normal text-sm text-foreground">Watching</span>
        </button>
        <button
          data-unstyled-button
          data-watchlist-update
          data-mal-id="{{$anime.MalID}}"
          data-watchlist-status="completed"
          data-watchlist-display="Completed"
          data-watchlist-title="{{$anime.DisplayTitle}}"
          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
        >
          <span class="font-normal text-sm text-foreground">Completed</span>
        </button>
        <button
          data-unstyled-button
          data-watchlist-update
          data-mal-id="{{$anime.MalID}}"
          data-watchlist-status="plan_to_watch"
          data-watchlist-display="Plan to Watch"
          data-watchlist-title="{{$anime.DisplayTitle}}"
          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
        >
          <span class="font-normal text-sm text-foreground">Plan to Watch</span>
        </button>
        <button
          data-unstyled-button
          data-watchlist-update
          data-mal-id="{{$anime.MalID}}"
          data-watchlist-status="dropped"
          data-watchlist-display="Dropped"
          data-watchlist-title="{{$anime.DisplayTitle}}"
          class="flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"
        >
          <span class="font-normal text-sm text-foreground">Dropped</span>
        </button>
        
        {{template "watchlist_remove_button" dict
          "ID" $anime.MalID
          "Title" $anime.DisplayTitle
          "ContainerClass" "hidden"
          "DividerClass" "my-1"
          "ButtonClass" "flex w-full items-center px-5 py-2.5 transition-colors outline-none hover:bg-red-500/10 focus-visible:ring-1 focus-visible:ring-accent"
          "SpanClass" "font-normal text-sm text-red-500 text-left whitespace-nowrap"
        }}
      </div>
    </div>
  </ui-dropdown>

  <a href="/anime/{{$anime.MalID}}/watch{{if gt .ContinueWatchingEp 0}}?ep={{.ContinueWatchingEp}}{{end}}" class="!rounded-none inline-flex items-center justify-center bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-normal text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
    {{if gt .ContinueWatchingEp 0}}Continue Watching Ep {{.ContinueWatchingEp}}{{else}}Watch Now{{end}}
  </a>
</div>
{{end}}

{{define "watchlist_remove_button"}}
  <div id="remove-watchlist-container-{{.ID}}" class="{{.ContainerClass}}">
    <button
      data-watchlist-remove
      data-mal-id="{{.ID}}"
      data-watchlist-title="{{.Title}}"
      class="{{.ButtonClass}} disabled:opacity-50"
    >
      <span class="{{.SpanClass}}">Remove from Watchlist</span>
    </button>
  </div>
{{end}}