132 lines
6.6 KiB
Plaintext
132 lines
6.6 KiB
Plaintext
{{define "title"}}{{.Anime.DisplayTitle}}{{end}}
|
|
{{define "content"}}
|
|
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
|
|
{{$anime := .Anime}}
|
|
|
|
<div class="flex flex-col gap-10">
|
|
<div class="flex flex-col gap-8 md:flex-row lg:gap-12">
|
|
<div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
|
|
<div class="aspect-2/3 w-full overflow-hidden bg-white/5 shadow-lg">
|
|
{{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
|
|
{{if $anime.Images.Webp.LargeImageURL}}
|
|
{{$imageUrl = $anime.Images.Webp.LargeImageURL}}
|
|
{{else if $anime.Images.Jpg.LargeImageURL}}
|
|
{{$imageUrl = $anime.Images.Jpg.LargeImageURL}}
|
|
{{end}}
|
|
<img src="{{$imageUrl}}" alt="{{$anime.Title}}" class="h-full w-full object-cover" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex grow flex-col">
|
|
<div class="mb-4">
|
|
<h1 class="text-2xl font-normal text-white md:text-4xl">
|
|
{{$anime.DisplayTitle}}
|
|
</h1>
|
|
{{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
|
|
<h2 class="mt-1 text-sm text-neutral-400">{{$anime.Title}}</h2>
|
|
{{end}}
|
|
</div>
|
|
|
|
<div class="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-neutral-400">
|
|
{{if $anime.Score}}
|
|
<div class="flex items-center gap-1.5 font-medium text-yellow-500/90">
|
|
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
{{$anime.Score}}
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Type}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Type}}</span>{{end}}
|
|
{{if $anime.Episodes}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Episodes}} episodes</span>{{end}}
|
|
{{if $anime.Status}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Status}}</span>{{end}}
|
|
{{if $anime.Season}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Premiered}}</span>{{end}}
|
|
{{if $anime.ShortRating}}<span class="ml-auto rounded border border-neutral-800 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider text-neutral-500">{{$anime.ShortRating}}</span>{{end}}
|
|
</div>
|
|
|
|
{{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status}}
|
|
|
|
<div class="mt-8 flex flex-col gap-10 lg:flex-row">
|
|
<div class="grow lg:max-w-3xl">
|
|
<section>
|
|
<h2 class="mb-3 text-sm font-normal text-neutral-400 uppercase tracking-widest">Synopsis</h2>
|
|
<p id="synopsis-container" class="text-neutral-300 text-base leading-relaxed whitespace-pre-line line-clamp-6 md:line-clamp-none">
|
|
{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}
|
|
</p>
|
|
{{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
|
|
<button id="synopsis-toggle" class="mt-2 text-sm font-normal text-neutral-400 transition-colors hover:text-white md:hidden" onclick="
|
|
const container = document.getElementById('synopsis-container');
|
|
const btn = document.getElementById('synopsis-toggle');
|
|
if (container.classList.contains('line-clamp-6')) {
|
|
container.classList.remove('line-clamp-6');
|
|
btn.textContent = 'Show less';
|
|
} else {
|
|
container.classList.add('line-clamp-6');
|
|
btn.textContent = 'Read more';
|
|
}
|
|
">
|
|
Read more
|
|
</button>
|
|
{{end}}
|
|
</section>
|
|
|
|
{{if $anime.Genres}}
|
|
<div class="mt-8 flex flex-wrap gap-2">
|
|
{{range $anime.Genres}}
|
|
<span class="rounded-full bg-neutral-900 px-3 py-1 text-xs font-normal text-neutral-400 ring-1 ring-white/5 transition-colors hover:text-neutral-300 hover:ring-white/10">{{.Name}}</span>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
<aside class="flex shrink-0 flex-col gap-8 lg:w-72">
|
|
<section>
|
|
<h3 class="mb-4 text-xs font-normal uppercase tracking-widest text-neutral-500">Information</h3>
|
|
<div class="flex flex-col gap-4 text-sm">
|
|
{{if $anime.Studios}}
|
|
<div>
|
|
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Studios</dt>
|
|
<dd class="text-neutral-300">{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}{{$s.Name}}{{end}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Producers}}
|
|
<div>
|
|
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Producers</dt>
|
|
<dd class="text-neutral-400 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
|
|
</div>
|
|
{{end}}
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{{if $anime.Duration}}
|
|
<div>
|
|
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Duration</dt>
|
|
<dd class="text-neutral-300">{{$anime.Duration}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if $anime.Rank}}
|
|
<div>
|
|
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Rank</dt>
|
|
<dd class="text-neutral-300">#{{$anime.Rank}}</dd>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{if $anime.ScoredBy}}
|
|
<div>
|
|
<dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Scored By</dt>
|
|
<dd class="text-neutral-300">{{$anime.ScoredBy}} users</dd>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div hx-get="/api/watch-order?animeId={{$anime.MalID}}" hx-trigger="load">
|
|
<div class="mt-8 flex items-center gap-3 text-neutral-400">
|
|
<div class="border-t-accent size-5 animate-spin rounded-full border-2 border-neutral-600"></div>
|
|
<span class="text-sm">Loading watch order sequence...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|