{{template "header" .}}
<main id="main" class="min-h-screen bg-black pb-16">
    <div class="vi-container">
        {{$rolesData := json_unmarshal .content.Content}}
        <h1 class="text-2xl font-bold text-white mb-2">{{.content.Title}}</h1>
        {{if gt (len $rolesData) 0}}
        <p class="text-gray-500 text-sm mb-8">共 {{len $rolesData}} 位演员</p>
        {{end}}
        {{if gt (len $rolesData) 0}}
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            {{range $roleItem := $rolesData}}
                {{range $actor, $roleName := $roleItem}}
                {{$actorPage := content_by_actor $actor}}
                {{if $actorPage}}
                <a href="{{the_permalink $actorPage}}" title="{{$actor}}{{if and $roleName (ne $roleName `主演`)}} 饰演 {{$roleName}}{{end}}" class="group block rounded-md border border-zinc-800 bg-zinc-900/40 p-3 hover:border-amber-600/40 transition-colors">
                {{else}}
                <div title="{{$actor}}" class="group block rounded-md border border-zinc-800 bg-zinc-900/40 p-3 opacity-80">
                {{end}}
                    <div class="relative overflow-hidden aspect-[2/3] rounded-md bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center mb-3 border border-zinc-700/50" data-bj-poster-wrap>
                        {{if and $actorPage (the_upload $actorPage)}}
                        <img src="{{the_upload $actorPage}}" alt="{{$actor}}" loading="lazy" data-bj-poster class="w-full h-full object-cover">
                        {{else}}
                        <span class="text-4xl font-bold text-white/20 group-hover:text-white/40 transition-colors">{{first_char $actor}}</span>
                        {{end}}
                    </div>
                    <p class="font-semibold text-white text-sm line-clamp-1">{{$actor}}</p>
                    {{if and $roleName (ne $roleName `主演`)}}
                    <p class="text-xs text-gray-500 mt-1 line-clamp-2">饰 {{$roleName}}</p>
                    {{else}}
                    <p class="text-xs text-gray-500 mt-1">主演</p>
                    {{end}}
                {{if $actorPage}}
                </a>
                {{else}}
                </div>
                {{end}}
                {{end}}
            {{end}}
        </div>
        {{else}}
        <p class="text-gray-500">演员表 JSON 为空或格式不正确。</p>
        {{end}}
    </div>
</main>
{{template "footer" .}}