{{template "header" .}}
<main id="main" class="min-h-screen bg-black pb-16">
    <div class="vi-container">
        {{$kw := or (search_keyword) .title}}
        {{$type := search_type}}
        {{$searchBase := get_option "search_url"}}

        {{if $kw}}
        <header class="mb-8">
            <h1 class="text-2xl md:text-3xl font-bold text-white flex items-center gap-3">
                <span class="w-1.5 h-8 bg-amber-600 rounded-full"></span>
                <span class="bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent">搜索「{{$kw}}」的结果</span>
            </h1>
            <form action="{{$searchBase}}" method="get" role="search" class="mt-6 max-w-2xl" data-bj-search-page-form data-bj-search-type="{{$type}}">
                {{if and (not (is_pretty_permalink)) $type (ne $type `vod`)}}<input type="hidden" name="type" value="{{$type}}">{{end}}
                <div class="flex items-center gap-2 rounded-full border border-white/20 bg-black/40 pl-4 pr-2 py-1.5 focus-within:border-amber-500/60 focus-within:ring-2 focus-within:ring-amber-600/20 transition-all">
                    <svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <label class="sr-only" for="bj-search-page-q">搜索关键词</label>
                    <input id="bj-search-page-q" name="s" type="search" value="{{$kw}}" autocomplete="off" required
                        class="flex-1 min-w-0 bg-transparent text-white text-base outline-none placeholder:text-gray-500"
                        placeholder="影片、演员、短剧…">
                    <button type="submit" class="shrink-0 px-5 py-2 rounded-full bg-amber-600 hover:bg-amber-500 text-white text-sm font-semibold transition-colors">搜索</button>
                </div>
            </form>
        </header>

        <nav class="flex flex-wrap gap-2 mb-8" aria-label="搜索结果类型">
            <a href="{{search_page_url `vod` $kw}}" class="inline-flex px-4 py-2 rounded-full text-sm font-medium transition-colors border {{if eq $type `vod`}}bg-amber-600 border-amber-600 text-white{{else}}bg-zinc-900 border-zinc-700 text-gray-300 hover:border-amber-600/50 hover:text-white{{end}}">全部资源</a>
            <a href="{{search_page_url `film_index` $kw}}" class="inline-flex px-4 py-2 rounded-full text-sm font-medium transition-colors border {{if eq $type `film_index`}}bg-amber-600 border-amber-600 text-white{{else}}bg-zinc-900 border-zinc-700 text-gray-300 hover:border-amber-600/50 hover:text-white{{end}}">影视精选</a>
            <a href="{{search_page_url `film` $kw}}" class="inline-flex px-4 py-2 rounded-full text-sm font-medium transition-colors border {{if eq $type `film`}}bg-amber-600 border-amber-600 text-white{{else}}bg-zinc-900 border-zinc-700 text-gray-300 hover:border-amber-600/50 hover:text-white{{end}}">单集正片</a>
            <a href="{{search_page_url `artist_index` $kw}}" class="inline-flex px-4 py-2 rounded-full text-sm font-medium transition-colors border {{if eq $type `artist_index`}}bg-amber-600 border-amber-600 text-white{{else}}bg-zinc-900 border-zinc-700 text-gray-300 hover:border-amber-600/50 hover:text-white{{end}}">演职关联</a>
            <a href="{{search_page_url `artist` $kw}}" class="inline-flex px-4 py-2 rounded-full text-sm font-medium transition-colors border {{if eq $type `artist`}}bg-amber-600 border-amber-600 text-white{{else}}bg-zinc-900 border-zinc-700 text-gray-300 hover:border-amber-600/50 hover:text-white{{end}}">艺人专题</a>
        </nav>

        {{if eq $type `vod`}}
        <div data-bj-vod-search class="space-y-8" data-keyword="{{$kw}}">
            <div data-bj-vod-search-status class="flex flex-wrap items-center gap-3 text-sm text-gray-400 min-h-[1.5rem]">
                <span>正在搜索…</span>
            </div>
            <div data-bj-vod-search-progress class="hidden h-1 w-full bg-zinc-800 rounded overflow-hidden">
                <div data-bj-vod-search-progress-bar class="h-full bg-amber-600 transition-all duration-300 w-0"></div>
            </div>
            <div data-bj-vod-search-results class="space-y-10"></div>
            <p data-bj-vod-search-empty class="hidden text-gray-500 text-center py-12">各资源站均未找到相关内容，请尝试更换关键词。</p>
        </div>
        <script src="{{get_template_directory_uri}}/static/zanpian-play-icon.js" defer></script>
        <script src="{{get_template_directory_uri}}/static/zanpian-film-card.js" defer></script>
        <script src="{{get_template_directory_uri}}/static/zanpian-search-vod.js" defer></script>
        {{else}}
        {{$posts := get_posts host_user.ID 0 $type 20 0 "created_at desc"}}
        {{if gt $posts.count 0}}
        <p class="text-gray-500 text-sm mb-6">共 <span class="text-gray-300 font-semibold">{{$posts.count}}</span> 条</p>

        {{if or (eq $type `film_index`) (eq $type `film`)}}
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-8 gap-3 md:gap-4 lg:gap-5 py-2">
            {{range $v := $posts.lists}}
            {{template "film_card" $v}}
            {{end}}
        </div>
        {{else if eq $type `artist`}}
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
            {{range $v := $posts.lists}}
            <a href="{{the_permalink $v}}" class="group block text-center">
                <div class="relative aspect-[2/3] rounded-md overflow-hidden bg-zinc-900 border border-zinc-800 group-hover:border-amber-600/50 flex items-center justify-center" data-bj-poster-wrap>
                    {{if the_upload $v}}
                    <img src="{{the_upload $v}}" alt="{{$v.Title}}" loading="lazy" data-bj-poster class="w-full h-full object-cover">
                    {{else if content_diy $v "poster"}}
                    <img src="{{douban_proxy_url (content_diy $v "poster")}}" alt="{{$v.Title}}" 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/35 transition-colors">{{first_char $v.Title}}</span>
                    {{end}}
                </div>
                <p class="mt-2 text-sm text-gray-300 line-clamp-2 group-hover:text-amber-400">{{$v.Title}}</p>
            </a>
            {{end}}
        </div>
        {{else}}
        <ul class="space-y-3">
            {{range $v := $posts.lists}}
            <li>
                <a href="{{the_permalink $v}}" class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 rounded-md bg-zinc-900/50 border border-zinc-800 hover:border-amber-900/50 hover:bg-zinc-900 transition-colors group">
                    <span class="text-white font-medium group-hover:text-amber-400 transition-colors">{{$v.Title}}</span>
                    {{if $v.Category}}<span class="text-xs text-gray-500 shrink-0">{{$v.Category.Title}}</span>{{end}}
                </a>
            </li>
            {{end}}
        </ul>
        {{end}}

        {{if gt $posts.max_page 1}}
        <nav class="flex justify-center items-center gap-4 mt-10 text-sm text-gray-400" aria-label="分页">
            {{previous_post_link `上一页` $posts.count $posts.page_size}}
            <span>{{$posts.current_page}} / {{$posts.max_page}}</span>
            {{next_post_link `下一页` $posts.count $posts.page_size}}
        </nav>
        {{end}}
        {{else}}
        <p class="text-gray-500 text-center py-12">未搜索到相关内容，请尝试更换关键词或切换类型。</p>
        {{end}}
        {{end}}

        {{else}}
        <section class="flex flex-col items-center justify-center py-16 md:py-24 text-center max-w-2xl mx-auto" aria-label="站内搜索">
            <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent mb-3">搜索</h1>
            <p class="text-gray-400 text-sm md:text-base mb-10">输入影片、演员或短剧名称，搜索全站资源与本地内容。</p>
            <form action="{{$searchBase}}" method="get" role="search" class="w-full" data-bj-search-page-form data-bj-search-type="vod">
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 rounded-md border border-zinc-800 bg-zinc-900/50 p-3 sm:p-2 focus-within:border-amber-600/50 focus-within:ring-2 focus-within:ring-amber-600/20 transition-all">
                    <div class="flex flex-1 items-center gap-3 min-w-0 px-2">
                        <svg class="w-6 h-6 text-gray-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        <label class="sr-only" for="bj-search-empty-q">搜索关键词</label>
                        <input id="bj-search-empty-q" name="s" type="search" autocomplete="off" autofocus required
                            class="flex-1 min-w-0 bg-transparent text-white text-lg outline-none placeholder:text-gray-500"
                            placeholder="请输入关键词…">
                    </div>
                    <button type="submit" class="shrink-0 w-full sm:w-auto px-8 py-3 sm:py-2.5 rounded-md sm:rounded-full bg-amber-600 hover:bg-amber-500 text-white font-bold transition-colors shadow-lg shadow-amber-900/30">搜索</button>
                </div>
            </form>
            <p class="text-gray-600 text-xs mt-6">支持搜索外部资源站与站内影视、演员内容</p>
        </section>
        {{end}}
    </div>
</main>
{{template "footer" .}}