{{template "header" .}}
<main id="main" class="relative z-0 min-h-screen bg-black pb-16">
    <div class="vi-container">
        {{if .vod_match_mode}}
        <div class="grid grid-cols-1 lg:grid-cols-9 gap-4 lg:gap-8">
            <div class="lg:col-span-7 min-w-0 space-y-6 order-2 lg:order-1">
                <div class="space-y-2">
                    <div class="aspect-video bg-zinc-900 rounded-md overflow-hidden border border-zinc-800 relative z-0 isolate"
                         data-bj-player
                         data-blog-id="{{host_user.ID}}"
                         data-upload-root="{{upload_root}}"
                         data-title="{{if .content}}{{.content.Title}}{{else}}{{.title}}{{end}}"
                         {{if .content}}data-content-id="{{.content.ID}}"{{end}}
                         {{if .content}}data-permalink="{{the_permalink .content}}"{{end}}
                         {{if .content}}{{if the_upload .content}}data-poster="{{the_upload .content}}"{{else if content_diy .content "poster"}}data-poster="{{douban_proxy_url (content_diy .content "poster")}}"{{else if vod_poster_cached .content}}data-poster="{{douban_proxy_url (vod_poster_cached .content)}}"{{end}}{{else if .feed_poster}}data-poster="{{douban_proxy_url .feed_poster}}"{{end}}
                         {{if .content}}data-vod-matches='{{vod_matches_json .content}}'{{else}}data-vod-matches='[]'{{end}}
                         {{if .content}}data-vod-blurbs='{{vod_blurbs_json .content}}'{{else}}data-vod-blurbs='{}'{{end}}
                         {{if .content}}data-vod-posters='{{vod_posters_json .content}}'{{else}}data-vod-posters='{}'{{end}}
                         {{if .content}}{{if content_diy .content `year`}}data-year="{{content_diy .content "year"}}"{{end}}{{end}}
                         {{if .douban_id}}data-douban-id="{{.douban_id}}"{{else if .content}}{{if content_diy .content "douban_id"}}data-douban-id="{{content_diy .content "douban_id"}}"{{end}}{{end}}
                         {{if .episode}}data-episode-index="{{.episode}}"{{end}}
                         {{if .content}}data-content-id="{{.content.ID}}"{{end}}>
                        <div class="w-full h-full relative" data-bj-player-stage>
                            <div class="relative w-full h-full bg-black flex items-center justify-center">
                                <img src="{{get_template_directory_uri}}/logo-icon.svg" alt="" class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 object-contain opacity-30 animate-pulse">
                            </div>
                        </div>
                    </div>
                    <div data-bj-episodes class="hidden"></div>
                </div>
                <div class="flex items-center gap-1.5 lg:gap-2">
                    <h1 data-bj-vod-title class="text-2xl md:text-3xl font-bold text-white min-w-0">{{if .content}}{{.content.Title}}{{else}}{{.title}}{{end}}</h1>
                    <div data-bj-vod-qr class="relative group hidden lg:flex shrink-0 items-center" aria-label="手机扫码观看">
                        <div class="p-1 transition-all duration-300 rounded-md hover:bg-white/5 cursor-pointer shrink-0" aria-hidden="true">
                            <svg class="w-6 h-6 lg:w-7 lg:h-7 shrink-0 text-white/30 group-hover:text-amber-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                <rect width="5" height="5" x="3" y="3" rx="1"/>
                                <rect width="5" height="5" x="16" y="3" rx="1"/>
                                <rect width="5" height="5" x="3" y="16" rx="1"/>
                                <path d="M21 16h-3a2 2 0 0 0-2 2v3"/>
                                <path d="M21 21v.01"/>
                                <path d="M12 7v3a2 2 0 0 1-2 2H7"/>
                                <path d="M3 12h.01"/>
                                <path d="M12 3h.01"/>
                                <path d="M12 16v.01"/>
                                <path d="M16 12h1"/>
                                <path d="M21 12v.01"/>
                                <path d="M12 21v-1"/>
                            </svg>
                        </div>
                        <div class="absolute left-1/2 -translate-x-1/2 top-full mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none group-hover:pointer-events-auto z-50 scale-90 group-hover:scale-100 origin-top">
                            <div class="bj-vod-qr-popover p-4 rounded-md border border-zinc-800 shadow-[0_20px_50px_rgba(0,0,0,0.5)]">
                                <div class="bg-white p-2 rounded-md relative inline-block leading-none">
                                    <canvas data-bj-vod-qr-canvas class="block w-40 h-40" width="160" height="160" aria-label="当前页面二维码"></canvas>
                                    <img src="{{get_template_directory_uri}}/logo-icon.svg" alt="" data-bj-vod-qr-logo class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 pointer-events-none opacity-0 transition-opacity duration-200" aria-hidden="true">
                                </div>
                                <p class="text-center text-xs text-gray-400 mt-3 font-medium">手机扫码 同步观看</p>
                            </div>
                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 border-[8px] border-transparent border-b-[#1a1a1a]" aria-hidden="true"></div>
                        </div>
                    </div>
                    <div class="relative group shrink-0">
                        <a data-bj-vod-title-search href="{{search_page_url `vod` ``}}" class="block p-1 transition-all duration-300 rounded-md hover:bg-white/5 active:bg-white/5 text-white/30 hover:text-amber-500 active:text-amber-500 transition-colors" aria-label="精度搜索">
                            <svg class="w-6 h-6 lg:w-7 lg:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </a>
                        <div class="absolute left-1/2 -translate-x-1/2 top-full mt-1.5 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-50 whitespace-nowrap hidden lg:block">
                            <span class="bg-[#1a1a1a] px-3 py-1.5 rounded-md border border-white/10 text-xs text-gray-300 font-medium shadow-lg">精度搜索</span>
                        </div>
                    </div>
                </div>
                {{if .content}}
                {{if or (content_diy .content "rate") (content_diy .content "year") (content_diy .content "region") (content_diy .content "duration")}}
                <div data-bj-cms-meta class="flex flex-wrap gap-3 text-sm text-gray-400">
                    {{if content_diy .content "rate"}}<span class="text-yellow-400 font-semibold">豆瓣 {{content_diy .content "rate"}}</span>{{end}}
                    {{if content_diy .content "year"}}<span>{{content_diy .content "year"}}</span>{{end}}
                    {{if content_diy .content "region"}}<span>{{content_diy .content "region"}}</span>{{end}}
                    {{if content_diy .content "duration"}}<span>{{content_diy .content "duration"}}</span>{{end}}
                </div>
                {{end}}
                {{end}}
                <div data-bj-vod-meta class="hidden flex flex-wrap gap-3 text-sm text-gray-400"></div>
                <div data-bj-vod-cast class="hidden space-y-1 text-sm text-gray-500"></div>
                {{$plot := ""}}
                {{if .content}}{{$plot = vod_blurb_cached .content}}{{end}}
                <div class="space-y-6 border-t border-zinc-800 pt-6">
                    <div data-bj-vod-blurb-wrap class="{{if not $plot}}hidden {{end}}space-y-3">
                        <h2 class="text-sm font-bold text-amber-500 uppercase tracking-wide mb-3">剧情简介</h2>
                        <div data-bj-vod-blurb-text class="text-sm text-gray-300 leading-relaxed">{{$plot}}</div>
                    </div>
                </div>
            </div>
            <aside class="w-full lg:col-span-2 order-1 lg:order-2 space-y-4">
                <div class="hidden lg:block rounded-md border border-zinc-800 bg-zinc-900/50 overflow-hidden" data-bj-film-aside-poster>
                    <div class="relative overflow-hidden w-full bg-zinc-900 aspect-[2/3]" data-bj-poster-wrap data-bj-film-poster>
                        {{if .content}}
                        {{if content_diy .content "poster"}}
                        <img src="{{douban_proxy_url (content_diy .content `poster`)}}" alt="《{{.content.Title}}》海报" data-bj-poster class="w-full h-full object-cover">
                        {{else if the_upload .content}}
                        <img src="{{the_upload .content}}" alt="《{{.content.Title}}》海报" data-bj-poster class="w-full h-full object-cover">
                        {{else if vod_poster_cached .content}}
                        <img src="{{douban_proxy_url (vod_poster_cached .content)}}" alt="《{{.content.Title}}》海报" data-bj-poster class="w-full h-full object-cover">
                        {{else if .feed_poster}}
                        <img src="{{douban_proxy_url .feed_poster}}" alt="《{{.title}}》海报" data-bj-poster class="w-full h-full object-cover">
                        {{else}}
                        {{template "poster_fallback" (dict "logoClass" "w-32 h-32 sm:w-40 sm:h-40 opacity-25 object-contain")}}
                        {{end}}
                        {{else if .feed_poster}}
                        <img src="{{douban_proxy_url .feed_poster}}" alt="《{{.title}}》海报" data-bj-poster class="w-full h-full object-cover">
                        {{else}}
                        {{template "poster_fallback" (dict "logoClass" "w-32 h-32 sm:w-40 sm:h-40 opacity-25 object-contain")}}
                        {{end}}
                    </div>
                    <div class="p-4 border-t border-zinc-800/80 space-y-1">
                        <h2 data-bj-aside-title class="font-bold text-white leading-snug line-clamp-2">{{if .content}}{{.content.Title}}{{else}}{{.title}}{{end}}</h2>
                        <p data-bj-aside-remarks class="hidden text-xs text-gray-400 line-clamp-2"></p>
                    </div>
                </div>
                <div class="rounded-md border border-zinc-800 bg-zinc-900/50 overflow-hidden" data-bj-sources-panel data-sources-expanded="0">
                    <button type="button" data-bj-sources-toggle class="bj-sources-header w-full text-left px-4 py-3 border-b border-zinc-800/80 flex items-center justify-between gap-2" aria-expanded="false" aria-label="展开播放线路">
                        <h2 class="text-sm font-bold text-amber-500 uppercase tracking-wide">播放线路</h2>
                        <div class="flex items-center gap-2 shrink-0">
                            <span data-bj-sources-meta class="text-[11px] text-gray-500">搜索中…</span>
                            <svg class="bj-sources-chevron w-4 h-4 shrink-0 opacity-70 transition-transform duration-200 lg:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </div>
                    </button>
                    <div class="p-3" data-bj-sources-body>
                        <div data-bj-sources>
                            <p class="text-xs text-gray-500 text-center py-4">正在匹配线路…</p>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
        {{else}}
        {{if .vod_fetch_error}}
        <div class="mb-6 rounded-md border border-amber-900/50 bg-amber-950/30 px-4 py-3 text-amber-300 text-sm" data-bj-vod-fetch-error role="alert">
            {{.vod_fetch_error}}{{if .source_name}}（{{.source_name}}）{{end}}
        </div>
        {{end}}

        <div class="grid grid-cols-1 lg:grid-cols-9 gap-4 lg:gap-8">
            <div class="lg:col-span-7 min-w-0 space-y-6 order-2 lg:order-1">
                <div class="space-y-2">
                    <div class="aspect-video bg-zinc-900 rounded-md overflow-hidden border border-zinc-800 relative z-0 isolate"
                         data-bj-player
                         data-bj-vod-direct="1"
                         data-blog-id="{{host_user.ID}}"
                         data-upload-root="{{upload_root}}"
                         data-source-key="{{.source_key}}"
                         data-vod-id="{{.vod_id}}"
                         {{if .episode}}data-episode-index="{{.episode}}"{{end}}
                         {{if .vod_detail}}data-bj-vod-ssr="1"{{end}}
                         {{if .vod_detail}}data-title="{{.vod_detail.Name}}"{{else}}data-title=""{{end}}
                         {{if and .vod_detail .vod_detail.Year}}data-year="{{.vod_detail.Year}}"{{end}}
                         {{if .vod_poster}}data-poster="{{douban_proxy_url .vod_poster}}"{{end}}
                         {{if .content}}data-content-id="{{.content.ID}}"{{end}}>
                        <div class="w-full h-full relative" data-bj-player-stage>
                            {{if .vod_detail}}
                            <div class="relative w-full h-full bg-black flex items-center justify-center">
                                <img src="{{get_template_directory_uri}}/logo-icon.svg" alt="" class="w-14 h-14 sm:w-16 md:h-16 md:w-20 object-contain opacity-30">
                            </div>
                            {{else}}
                            <div class="relative w-full h-full bg-black flex items-center justify-center">
                                <img src="{{get_template_directory_uri}}/logo-icon.svg" alt="" class="w-14 h-14 sm:w-16 md:h-16 md:w-20 md:h-20 object-contain opacity-30 animate-pulse">
                            </div>
                            {{end}}
                        </div>
                    </div>
                    {{if and .vod_detail .vod_detail.Episodes (gt (len .vod_detail.Episodes) 1)}}
                    {{$epIdx := 0}}
                    {{if .episode}}{{$epIdx = str_atoi .episode}}{{end}}
                    {{$epTotal := len .vod_detail.Episodes}}
                    <div data-bj-episodes>
                        <div class="flex flex-wrap gap-2 mt-3 bj-episodes-list--collapsed" data-bj-episodes-list>
                            {{range $i, $ep := .vod_detail.Episodes}}
                            <button type="button" data-ep="{{$i}}" class="px-3 py-1.5 rounded-md text-xs border transition-colors {{if eq $i $epIdx}}bg-amber-600 border-amber-500 text-white{{else}}bg-zinc-800 border-zinc-700 text-gray-300 hover:bg-amber-600/80 hover:text-white{{end}}">{{or $ep.Name "选集"}}</button>
                            {{end}}
                        </div>
                        <button type="button" data-bj-episodes-toggle data-expanded="0" class="bj-episodes-toggle">
                            <span data-bj-episodes-toggle-text>展开全部 {{$epTotal}} 集</span>
                            <svg data-bj-episodes-chevron class="w-4 h-4 shrink-0 opacity-70 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </button>
                    </div>
                    {{else}}
                    <div data-bj-episodes class="hidden"></div>
                    {{end}}
                </div>
                <div class="flex items-center gap-1.5 lg:gap-2">
                    <h1 data-bj-vod-title class="text-2xl md:text-3xl font-bold text-white min-w-0">{{if .vod_detail}}{{.vod_detail.Name}}{{else}}…{{end}}</h1>
                    <div data-bj-vod-qr class="relative group hidden lg:flex shrink-0 items-center" aria-label="手机扫码观看">
                        <div class="p-1 transition-all duration-300 rounded-md hover:bg-white/5 cursor-pointer shrink-0" aria-hidden="true">
                            <svg class="w-6 h-6 lg:w-7 lg:h-7 shrink-0 text-white/30 group-hover:text-amber-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                <rect width="5" height="5" x="3" y="3" rx="1"/>
                                <rect width="5" height="5" x="16" y="3" rx="1"/>
                                <rect width="5" height="5" x="3" y="16" rx="1"/>
                                <path d="M21 16h-3a2 2 0 0 0-2 2v3"/>
                                <path d="M21 21v.01"/>
                                <path d="M12 7v3a2 2 0 0 1-2 2H7"/>
                                <path d="M3 12h.01"/>
                                <path d="M12 3h.01"/>
                                <path d="M12 16v.01"/>
                                <path d="M16 12h1"/>
                                <path d="M21 12v.01"/>
                                <path d="M12 21v-1"/>
                            </svg>
                        </div>
                        <div class="absolute left-1/2 -translate-x-1/2 top-full mt-4 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none group-hover:pointer-events-auto z-50 scale-90 group-hover:scale-100 origin-top">
                            <div class="bj-vod-qr-popover p-4 rounded-md border border-zinc-800 shadow-[0_20px_50px_rgba(0,0,0,0.5)]">
                                <div class="bg-white p-2 rounded-md relative inline-block leading-none">
                                    <canvas data-bj-vod-qr-canvas class="block w-40 h-40" width="160" height="160" aria-label="当前页面二维码"></canvas>
                                    <img src="{{get_template_directory_uri}}/logo-icon.svg" alt="" data-bj-vod-qr-logo class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 pointer-events-none opacity-0 transition-opacity duration-200" aria-hidden="true">
                                </div>
                                <p class="text-center text-xs text-gray-400 mt-3 font-medium">手机扫码 同步观看</p>
                            </div>
                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 border-[8px] border-transparent border-b-[#1a1a1a]" aria-hidden="true"></div>
                        </div>
                    </div>
                    <div class="relative group shrink-0">
                        <a data-bj-vod-title-search href="{{search_page_url `vod` ``}}" class="block p-1 transition-all duration-300 rounded-md hover:bg-white/5 active:bg-white/5 text-white/30 hover:text-amber-500 active:text-amber-500 transition-colors" aria-label="精度搜索">
                            <svg class="w-6 h-6 lg:w-7 lg:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </a>
                        <div class="absolute left-1/2 -translate-x-1/2 top-full mt-1.5 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-50 whitespace-nowrap hidden lg:block">
                            <span class="bg-[#1a1a1a] px-3 py-1.5 rounded-md border border-white/10 text-xs text-gray-300 font-medium shadow-lg">精度搜索</span>
                        </div>
                    </div>
                </div>
                <div data-bj-vod-page-meta class="{{if .vod_detail}}flex flex-wrap gap-3 text-sm text-gray-400{{else}}hidden flex flex-wrap gap-3 text-sm text-gray-400{{end}}">
                    {{if .vod_detail}}
                    {{if and .vod_detail.Score (ne .vod_detail.Score "0.0")}}<span class="text-yellow-400 font-semibold">{{.vod_detail.Score}}</span>{{end}}
                    {{if .vod_detail.Year}}<span>{{.vod_detail.Year}}</span>{{end}}
                    {{if .vod_detail.Area}}<span>{{.vod_detail.Area}}</span>{{end}}
                    {{if .vod_detail.Type}}<span>{{.vod_detail.Type}}</span>{{end}}
                    {{if .vod_detail.Remarks}}<span>{{.vod_detail.Remarks}}</span>{{end}}
                    {{end}}
                </div>
                <div data-bj-vod-cast class="hidden space-y-1 text-sm text-gray-500"></div>
                <div class="space-y-6 border-t border-zinc-800 pt-6">
                    <div data-bj-vod-blurb-wrap class="{{if and .vod_detail .vod_detail.Blurb}}space-y-3{{else}}hidden space-y-3{{end}}">
                        <h2 class="text-sm font-bold text-amber-500 uppercase tracking-wide mb-3">剧情简介</h2>
                        <div data-bj-vod-blurb-text class="text-sm text-gray-300 leading-relaxed">{{if .vod_detail}}{{.vod_detail.Blurb}}{{end}}</div>
                    </div>
                </div>
            </div>
            <aside class="w-full lg:col-span-2 order-1 lg:order-2 space-y-4">
                <div class="hidden lg:block rounded-md border border-zinc-800 bg-zinc-900/50 overflow-hidden" data-bj-film-aside-poster>
                    <div class="relative overflow-hidden w-full bg-zinc-900 aspect-[2/3]" data-bj-poster-wrap data-bj-film-poster>
                        {{if .vod_poster}}
                        <img src="{{douban_proxy_url .vod_poster}}" alt="《{{if .vod_detail}}{{.vod_detail.Name}}{{end}}》海报" loading="eager" decoding="async" data-bj-poster class="w-full h-full object-cover">
                        {{else}}
                        {{template "poster_fallback" (dict "logoClass" "w-32 h-32 sm:w-40 sm:h-40 opacity-25 object-contain")}}
                        {{end}}
                    </div>
                    <div class="p-4 border-t border-zinc-800/80 space-y-1">
                        <h2 data-bj-aside-title class="font-bold text-white leading-snug line-clamp-2">{{if .vod_detail}}{{.vod_detail.Name}}{{else}}…{{end}}</h2>
                        <p data-bj-aside-remarks class="{{if and .vod_detail .vod_detail.Remarks}}text-xs text-gray-400 line-clamp-2{{else}}hidden text-xs text-gray-400 line-clamp-2{{end}}">{{if .vod_detail}}{{.vod_detail.Remarks}}{{end}}</p>
                    </div>
                </div>
                <div class="rounded-md border border-zinc-800 bg-zinc-900/50 overflow-hidden" data-bj-sources-panel data-sources-expanded="0">
                    <button type="button" data-bj-sources-toggle class="bj-sources-header w-full text-left px-4 py-3 border-b border-zinc-800/80 flex items-center justify-between gap-2" aria-expanded="false" aria-label="展开播放线路">
                        <h2 class="text-sm font-bold text-amber-500 uppercase tracking-wide">播放线路</h2>
                        <div class="flex items-center gap-2 shrink-0">
                            <span data-bj-sources-meta class="text-[11px] text-gray-500">{{if .vod_detail}}匹配其他线路…{{else}}加载中…{{end}}</span>
                            <svg class="bj-sources-chevron w-4 h-4 shrink-0 opacity-70 transition-transform duration-200 lg:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </div>
                    </button>
                    <div class="p-3" data-bj-sources-body>
                        <div data-bj-sources>
                            {{if .vod_detail}}
                            <button type="button" data-src-key="{{.source_key}}" class="w-full text-left px-3 py-2 rounded-md text-sm border bg-amber-600/20 border-amber-600/50 text-white mb-2">
                                <span class="font-medium">{{or .source_name .source_key}}</span>
                                <span class="text-[11px] text-gray-400 block">当前线路</span>
                            </button>
                            {{else}}
                            <p class="text-xs text-gray-500 text-center py-4">正在匹配线路…</p>
                            {{end}}
                        </div>
                    </div>
                </div>
            </aside>
        </div>
        {{if .vod_detail}}
        <script type="application/json" id="bj-vod-detail-data">{{json_encode .vod_detail}}</script>
        {{end}}
        {{end}}
    </div>
    <script src="{{get_template_directory_uri}}/static/zanpian-player.js" defer></script>
</main>
{{template "footer" .}}