{{$post := .}}
{{$href := ""}}
{{$title := ""}}
{{$category := ""}}
{{$cardTitle := ""}}
{{$subtitle := ""}}
{{$meta := ""}}
{{$rate := ""}}
{{$poster := ""}}
{{$usePost := false}}
{{if .Title}}
    {{$usePost = true}}
    {{$post = .}}
    {{$href = the_permalink .}}
    {{$title = .Title}}
    {{if .Category}}{{$category = .Category.Title}}{{end}}
    {{if .Abstract}}{{$subtitle = .Abstract}}{{else if content_diy . "episode_info"}}{{$subtitle = content_diy . "episode_info"}}{{end}}
    {{if content_diy . "rate"}}{{$rate = content_diy . "rate"}}{{end}}
{{else if .href}}
    {{$href = .href}}
    {{$title = .title}}
    {{$subtitle = .subtitle}}
    {{$meta = .meta}}
    {{$rate = .rate}}
    {{$poster = .poster}}
    {{if .category}}{{$category = .category}}{{end}}
{{else}}
    {{$usePost = true}}
    {{$post = .post}}
    {{if .href}}{{$href = .href}}{{else}}{{$href = the_permalink $post}}{{end}}
    {{if .title}}{{$title = .title}}{{else}}{{$title = $post.Title}}{{end}}
    {{if .category}}{{$category = .category}}{{else if $post.Category}}{{$category = $post.Category.Title}}{{end}}
    {{if .subtitle}}{{$subtitle = .subtitle}}{{else if $post.Abstract}}{{$subtitle = $post.Abstract}}{{else if content_diy $post "episode_info"}}{{$subtitle = content_diy $post "episode_info"}}{{end}}
    {{if .meta}}{{$meta = .meta}}{{end}}
    {{if content_diy $post "rate"}}{{$rate = content_diy $post "rate"}}{{end}}
{{end}}
{{if $category}}{{$cardTitle = printf "%s%s" $category $title}}{{else}}{{$cardTitle = $title}}{{end}}
<a href="{{$href}}" title="{{$cardTitle}}" class="vi-trend-card group block shrink-0 w-[72vw] sm:w-64 md:w-72 lg:w-[280px]">
    <div class="relative aspect-[16/9] overflow-hidden rounded-md bg-zinc-900 border border-white/5 group-hover:border-gold-500/30 transition-all duration-300" data-bj-poster-wrap>
        {{if $usePost}}
            {{if the_upload $post}}
            <img src="{{the_upload $post}}" alt="{{$cardTitle}}海报" loading="lazy" decoding="async" data-bj-poster class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
            {{else if content_diy $post "poster"}}
            <img src="{{douban_proxy_url (content_diy $post "poster")}}" alt="{{$cardTitle}}海报" loading="lazy" decoding="async" data-bj-poster class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
            {{else if $poster}}
            <img src="{{douban_proxy_url $poster}}" alt="{{$cardTitle}}海报" loading="lazy" decoding="async" data-bj-poster class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
            {{else}}
            <div class="w-full h-full flex items-center justify-center bg-zinc-900">
                <img src="{{get_template_directory_uri}}/logo-icon.svg" alt="" class="w-12 h-12 opacity-30">
            </div>
            {{end}}
        {{else if $poster}}
            <img src="{{douban_proxy_url $poster}}" alt="{{$cardTitle}}海报" loading="lazy" decoding="async" data-bj-poster class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        {{else}}
            <div class="w-full h-full flex items-center justify-center bg-zinc-900">
                <img src="{{get_template_directory_uri}}/logo-icon.svg" alt="" class="w-12 h-12 opacity-30">
            </div>
        {{end}}
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
        {{if $rate}}
        <span class="absolute top-2 right-2 px-2 py-0.5 rounded-md bg-black/60 backdrop-blur-sm text-gold-400 text-xs font-bold border border-gold-500/20">{{$rate}}</span>
        {{end}}
        <div class="absolute bottom-0 left-0 right-0 p-3">
            <h3 class="text-white font-semibold text-sm line-clamp-1">{{$title}}</h3>
            {{if or $meta $subtitle}}
            <p class="text-gray-400 text-xs mt-0.5 line-clamp-1">{{if $meta}}{{$meta}}{{else}}{{$subtitle}}{{end}}</p>
            {{end}}
        </div>
    </div>
</a>