{{template "header" .}}
<main id="main" class="min-h-screen bg-black pb-16">
    <div class="vi-container">
        <header class="mb-6">
            <h1 class="text-2xl md:text-3xl font-bold text-white flex items-center gap-3 mb-2">
                <span class="w-1.5 h-8 bg-amber-600 rounded-full shadow-[0_0_10px_rgba(201,162,39,0.5)]"></span>
                <span class="bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent">{{.title}}</span>
            </h1>
        </header>

        {{$catID := 0}}
        {{if .category}}{{$catID = .category.ID}}{{end}}
        {{$posts := get_filtered_film_posts host_user.ID $catID 24 0}}

        {{if gt $posts.count 0}}
        <p class="text-gray-500 text-sm mb-4">共 <span class="text-gray-300 font-semibold">{{$posts.count}}</span> 部</p>
        <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 $p := $posts.lists}}
            {{template "film_card" $p}}
            {{end}}
        </div>
        {{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-16">该分类下暂无影视内容。</p>
        {{end}}
    </div>
</main>
{{template "footer" .}}