101 lines
4.8 KiB
Plaintext
101 lines
4.8 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-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-40 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2">
|
|
<div class="flex flex-col">
|
|
<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="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}}
|