64 lines
3.9 KiB
Plaintext
64 lines
3.9 KiB
Plaintext
{{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 border border-border 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="inline-flex items-center justify-center bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-medium text-foreground transition-colors border border-border">
|
|
{{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}}
|