{{- $genre := film_filter_value `genre` -}}
{{- $region := film_filter_value `region` -}}
{{- $year := film_filter_value `year` -}}
{{- $sort := film_filter_value `sort` -}}
{{- $filterTitle := "" -}}
{{- if or $genre $region $year $sort -}}
{{- $title := or $genre "" -}}
{{- $sortLabel := "" -}}
{{- if eq $sort "hot" -}}
{{- $sortLabel = "热门" -}}
{{- else if eq $sort "time" -}}
{{- $sortLabel = "最新" -}}
{{- else if eq $sort "rate" -}}
{{- $sortLabel = "高评分" -}}
{{- else if $sort -}}
{{- $sortLabel = $sort -}}
{{- end -}}
{{- if $region -}}{{- $filterTitle = $region -}}{{- end -}}
{{- if $year -}}
{{- if path_has_suffix $year "年代" -}}
{{- $filterTitle = printf "%s%s" $filterTitle $year -}}
{{- else -}}
{{- $filterTitle = printf "%s%s年" $filterTitle $year -}}
{{- end -}}
{{- end -}}
{{- $filterTitle = printf "%s%s" $filterTitle $title -}}
{{- if $sortLabel -}}{{- $filterTitle = printf "%s%s" $filterTitle $sortLabel -}}{{- end -}}
{{- $filterTitle = printf "%s影片" $filterTitle -}}
{{- end -}}
{{template "header" dict "Global" . "title" $filterTitle}}
<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">{{if $filterTitle}}{{$filterTitle}}{{else}}{{.title}}影片推荐{{end}}</span>
            </h1>
        </header>

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

        <section class="-mx-4 px-4 lg:mx-0 lg:rounded-md lg:border lg:border-zinc-800 bg-zinc-900/50 border-y lg:border-y-0 border-zinc-800/50 py-3 lg:py-3 lg:px-4 mb-8" aria-label="筛选条件">
            <div class="flex items-start gap-3 py-2 border-b border-zinc-800/80 last:border-0">
                <span class="text-gray-400 text-sm whitespace-nowrap min-w-12 pt-1">地区：</span>
                <div class="flex flex-nowrap md:flex-wrap items-center gap-2 flex-1 min-w-0 overflow-x-auto md:overflow-x-visible scrollbar-hide scroll-smooth pb-1 md:pb-0">
                    <a href="{{film_filter_url `region` ``}}" class="inline-flex shrink-0 text-xs md:text-sm px-3 py-1 md:py-1.5 rounded-full whitespace-nowrap transition-all duration-300 {{if film_filter_active `region` ``}}bg-amber-600 text-white font-bold shadow-lg shadow-amber-900/30{{else}}text-gray-400 hover:text-white hover:bg-white/10{{end}}">全部</a>
                    {{range $presets.regions}}
                    <a href="{{film_filter_url `region` .}}" class="inline-flex shrink-0 text-xs md:text-sm px-3 py-1 md:py-1.5 rounded-full whitespace-nowrap transition-all duration-300 {{if film_filter_active `region` .}}bg-amber-600 text-white font-bold shadow-lg shadow-amber-900/30{{else}}text-gray-400 hover:text-white hover:bg-white/10{{end}}">{{.}}</a>
                    {{end}}
                </div>
            </div>
            <div class="flex items-start gap-3 py-2 border-b border-zinc-800/80 last:border-0">
                <span class="text-gray-400 text-sm whitespace-nowrap min-w-12 pt-1">年代：</span>
                <div class="flex flex-nowrap md:flex-wrap items-center gap-2 flex-1 min-w-0 overflow-x-auto md:overflow-x-visible scrollbar-hide scroll-smooth pb-1 md:pb-0">
                    <a href="{{film_filter_url `year` ``}}" class="inline-flex shrink-0 text-xs md:text-sm px-3 py-1 md:py-1.5 rounded-full whitespace-nowrap transition-all duration-300 {{if film_filter_active `year` ``}}bg-amber-600 text-white font-bold shadow-lg shadow-amber-900/30{{else}}text-gray-400 hover:text-white hover:bg-white/10{{end}}">全部</a>
                    {{range $presets.years}}
                    <a href="{{film_filter_url `year` .}}" class="inline-flex shrink-0 text-xs md:text-sm px-3 py-1 md:py-1.5 rounded-full whitespace-nowrap transition-all duration-300 {{if film_filter_active `year` .}}bg-amber-600 text-white font-bold shadow-lg shadow-amber-900/30{{else}}text-gray-400 hover:text-white hover:bg-white/10{{end}}">{{.}}</a>
                    {{end}}
                </div>
            </div>
            <div class="flex items-start gap-3 py-2 border-b border-zinc-800/80 last:border-0">
                <span class="text-gray-400 text-sm whitespace-nowrap min-w-12 pt-1">类型：</span>
                <div class="flex flex-nowrap md:flex-wrap items-center gap-2 flex-1 min-w-0 overflow-x-auto md:overflow-x-visible scrollbar-hide scroll-smooth pb-1 md:pb-0">
                    <a href="{{film_filter_url `genre` ``}}" class="inline-flex shrink-0 text-xs md:text-sm px-3 py-1 md:py-1.5 rounded-full whitespace-nowrap transition-all duration-300 {{if film_filter_active `genre` ``}}bg-amber-600 text-white font-bold shadow-lg shadow-amber-900/30{{else}}text-gray-400 hover:text-white hover:bg-white/10{{end}}">全部</a>
                    {{range $presets.genres}}
                    <a href="{{film_filter_url `genre` .}}" class="inline-flex shrink-0 text-xs md:text-sm px-3 py-1 md:py-1.5 rounded-full whitespace-nowrap transition-all duration-300 {{if film_filter_active `genre` .}}bg-amber-600 text-white font-bold shadow-lg shadow-amber-900/30{{else}}text-gray-400 hover:text-white hover:bg-white/10{{end}}">{{.}}</a>
                    {{end}}
                </div>
            </div>
            <div class="flex items-start gap-3 py-2">
                <span class="text-gray-400 text-sm whitespace-nowrap min-w-12 pt-1">排序：</span>
                <div class="flex flex-nowrap md:flex-wrap items-center gap-2 flex-1 min-w-0 overflow-x-auto md:overflow-x-visible scrollbar-hide scroll-smooth pb-1 md:pb-0">
                    {{range $presets.sorts}}
                    <a href="{{film_filter_url `sort` .value}}" class="inline-flex shrink-0 text-xs md:text-sm px-3 py-1 md:py-1.5 rounded-full whitespace-nowrap transition-all duration-300 {{if film_filter_active `sort` .value}}bg-amber-600 text-white font-bold shadow-lg shadow-amber-900/30{{else}}text-gray-400 hover:text-white hover:bg-white/10{{end}}">{{.label}}</a>
                    {{end}}
                </div>
            </div>
        </section>

        {{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 $v := $posts.lists}}
            {{template "film_card" $v}}
            {{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" .}}