{{template "header" .}}
<main id="main" class="relative min-h-screen bg-black text-white pb-16 overflow-hidden">
    <div class="absolute inset-0 z-0 overflow-hidden pointer-events-none" aria-hidden="true">
        <div class="absolute inset-0 bg-black"></div>
        <div class="absolute inset-0 bg-gradient-to-br from-amber-600/10 via-transparent to-amber-900/5"></div>
        <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-amber-600/15 rounded-full blur-[120px] -mr-64 -mt-64"></div>
        <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-yellow-600/5 rounded-full blur-[120px] -ml-64 -mb-64"></div>
    </div>

    {{$cal := get_zanpian_calendar host_user.ID}}

    <div class="relative z-10 pb-8 vi-container">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-8">
            <div>
                <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent flex items-center gap-3">
                    <svg class="w-8 h-8 md:w-9 md:h-9 text-amber-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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{if .title}}{{.title}}{{else}}追剧日历{{end}}
                </h1>
                <p class="text-gray-400 mt-2 text-sm md:text-base">
                    {{$cal.StartDate}} — {{$cal.EndDate}}
                    {{if eq $cal.Source "cms"}}<span class="text-gray-600 ml-2">· 本地同步</span>{{end}}
                </p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <label class="relative inline-flex items-center">
                    <span class="sr-only">地区</span>
                    <select class="appearance-none bg-transparent text-white pl-10 pr-8 py-2.5 text-sm cursor-pointer focus:outline-none border border-white/10 rounded-md"
                            onchange="location.href=this.value">
                        {{range $r := calendar_regions}}
                        <option value="{{calendar_filter_url `region` $r.code}}" {{if calendar_filter_active `region` $r.code}}selected{{end}}>{{$r.label}}</option>
                        {{end}}
                    </select>
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 z-10 w-4 h-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </label>
                <label class="relative inline-flex items-center">
                    <span class="sr-only">周次</span>
                    <select class="appearance-none bg-white/10 text-white pl-10 pr-8 py-2.5 rounded-md text-sm cursor-pointer hover:bg-white/20 transition-colors backdrop-blur-sm border border-white/10 focus:outline-none"
                            onchange="location.href=this.value">
                        <option value="{{calendar_filter_url `week` `0`}}" {{if calendar_filter_active `week` `0`}}selected{{end}}>本周</option>
                        <option value="{{calendar_filter_url `week` `1`}}" {{if calendar_filter_active `week` `1`}}selected{{end}}>下周</option>
                    </select>
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 z-10 w-4 h-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                </label>
            </div>
        </div>

        {{if gt (len $cal.Days) 0}}
        <div class="space-y-10 md:space-y-12">
            {{range $day := $cal.Days}}
            <section>
                <div class="flex flex-wrap items-center gap-3 mb-4">
                    <span class="w-2 h-2 rounded-full shrink-0 {{if $day.IsToday}}bg-amber-500{{else if $day.IsTomorrow}}bg-yellow-500{{else}}bg-gray-500{{end}}"></span>
                    <h2 class="text-xl md:text-2xl font-bold text-white flex flex-wrap items-center gap-2">
                        {{if $day.IsToday}}<span class="text-amber-500">今天</span>{{end}}
                        {{if $day.IsTomorrow}}<span class="text-yellow-500">明天</span>{{end}}
                        <span>{{$day.Main}}</span>
                        <span class="text-gray-400 text-base font-normal">{{$day.Sub}}</span>
                    </h2>
                    <span class="text-gray-500 text-sm">{{$day.Count}} 部剧集</span>
                </div>
                <div class="relative -mx-1">
                    <div class="flex overflow-x-auto gap-3 md:gap-4 py-2 px-1 scrollbar-hide scroll-smooth">
                        {{range $entry := $day.Entries}}
                        <div class="shrink-0 w-36 sm:w-44 md:w-52">
                            {{template "film_card" (dict "href" (calendar_entry_link host_user.ID $entry) "title" (or $entry.ShowNameCN $entry.ShowName) "poster" $entry.Poster "rate" $entry.Rate "subtitle" $entry.EpisodeInfo)}}
                        </div>
                        {{end}}
                    </div>
                </div>
            </section>
            {{end}}
        </div>
        {{else}}
        <div class="flex flex-col items-center justify-center py-24 text-center">
            <svg class="w-16 h-16 text-gray-700 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <p class="text-gray-400 text-lg font-medium">本周暂无剧集播出</p>
            <p class="text-gray-600 text-sm mt-2">试试切换其他地区或时间范围</p>
            {{if $cal.Error}}<p class="text-amber-400/80 text-xs mt-4 max-w-md">{{$cal.Error}}</p>{{end}}
        </div>
        {{end}}
    </div>
</main>
<div class="relative z-10">
{{template "footer" .}}
</div>