@php
    $trans = $post->translation($locale);
    if (!$trans) return;
    $flipbook = $flipbook ?? null;
@endphp

@if($flipbook)
<div x-data="flipbook({{ $flipbook['config'] }})" @keydown.window="handleKeydown($event)" class="flipbook-thumbnail-wrapper">
<article class="overflow-hidden transition-all duration-200 ease-in-out bg-white border rounded-lg shadow-sm group dark:bg-gray-800 border-tertiary/30 hover:border-primary hover:shadow-[0_8px_20px_-4px_rgba(4,120,87,0.25)] hover:-translate-y-0.5 will-change-transform">
    <button @click="open()" type="button" class="flex flex-col w-full h-full text-left rounded-lg md:flex-row md:items-stretch focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800">
@else
<article class="overflow-hidden transition-all duration-200 ease-in-out bg-white border rounded-lg shadow-sm group dark:bg-gray-800 border-tertiary/30 hover:border-primary hover:shadow-[0_8px_20px_-4px_rgba(4,120,87,0.25)] hover:-translate-y-0.5 will-change-transform">
    @php
        $cardUrl = route('content.show', ['locale' => $locale, 'slug' => $trans->slug, 'page' => (!empty($searchPage) && $searchPage > 1) ? $searchPage : null]);
        if (!empty($searchExcerpt) && !empty($query)) {
            $cardUrl .= '?q=' . urlencode($query);
        }
    @endphp
    <a href="{{ $cardUrl }}" class="flex flex-col h-full rounded-lg md:flex-row md:items-stretch focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800">
@endif
        {{-- Image --}}
        <div class="relative flex items-center justify-center h-48 overflow-hidden md:h-auto md:w-40 md:shrink-0 bg-gradient-to-br from-primary/20 to-secondary/20">
            @if($trans->og_image)
                <img src="{{ $trans->mediaUrl('og_image') }}" alt="{{ $trans->title }}" loading="lazy" decoding="async" class="absolute inset-0 object-cover w-full h-full !rounded-none">
            @else
                <svg class="w-12 h-12 text-primary/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                </svg>
            @endif
            @if($flipbook)
            <div class="absolute flex items-center justify-center w-8 h-8 text-white rounded-full shadow-md top-2 right-2 bg-primary/80">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                </svg>
            </div>
            @endif
        </div>

        {{-- Content --}}
        <div class="flex-1 p-4">
            <h3 class="!ps-0 !mt-0 mb-2 text-lg font-semibold text-left transition-colors text-secondary group-hover:text-primary dark:text-secondary-dark">
                {{ $trans->title }}
            </h3>
            @if(!empty($searchExcerpt))
            <p class="text-sm text-justify text-gray-600 dark:text-gray-400 !mb-0">
                {!! $searchExcerpt !!}
            </p>
            @elseif($trans->meta_description)
            <p class="text-sm text-justify text-gray-600 dark:text-gray-400 !mb-0">
                {{ $trans->meta_description }}
            </p>
            @endif
        </div>

@if($flipbook)
    </button>
</article>
<x-flipbook-modal :title="$trans->title" :postUrl="$flipbook['postUrl']" :downloadUrl="$flipbook['downloadUrl']" />
</div>
@else
    </a>
</article>
@endif