<div>
    @if($posts->isEmpty())
        <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg">
            <div class="px-3 sm:px-0">
                <div class="max-w-4xl mx-auto my-12 p-4">
                    <div class="mt-48 mb-36 flex flex-col items-center justify-center">
                        <h1 class="text-3xl font-bold text-theme-primary dark:text-gray-200">{{ __('Sorry') }}</h1>
                        <p class="text-lg text-theme-secondary dark:text-theme-muted mt-4">{{ __('No page available in your language at the moment') }}</p>

                        {{-- Only show button if locales are different AND fallback content actually exists --}}
                        @if(trim(app()->getLocale()) !== trim($fallbackLocale) && $fallbackExists)
                            <x-jetstream.button wire:click="loadFallback" wire:loading.attr="disabled" class="mt-6">
                                <span wire:loading.remove wire:target="loadFallback">
                                    {{ __('messages.view_in_language', ['lang' => trim($fallbackLocale)]) }}
                                </span>
                                <span wire:loading wire:target="loadFallback">
                                    {{ __('Loading...') }}
                                </span>
                            </x-jetstream.button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @else
        <div>
            @foreach($posts as $post)
                <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg mb-3">
                    <div class="border-b border-theme-primary bg-theme-background p-6 sm:px-20 lg:px-32 lg:py-18">
                        <livewire:posts.manage-actions :post="$post" />

                        {{-- Date & Time Header --}}
                        @if (isset($post->meeting->from))
                            <div class="mb-2 mt-0 md:mt-6 lg:mt-12">
                                <div class="text-xs lg:text-sm text-theme-secondary">
                                    {{ Illuminate\Support\Carbon::parse($post->meeting->from)->isoFormat('LL') }}
                                </div>
                            </div>
                            <h3 class="mt-4 lg:mt-8 text-xl lg:text-4xl font-semibold leading-tight text-theme-primary">
                                {{ ucfirst(Illuminate\Support\Carbon::parse($post->meeting->from)->isoFormat('dddd D MMMM, HH:mm')) . ' ' . __('h.') }}
                            </h3>
                        @endif

                        {{-- Title --}}
                        @if (isset($post->translations[0]->title))
                            <h2 class="mt-4 lg:mt-8 text-3xl lg:text-5xl font-semibold leading-tight text-theme-primary">
                                {{ $post->translations[0]->title }}
                            </h2>
                        @endif

                        {{-- Excerpt --}}
                        @if (isset($post->translations[0]->excerpt))
                            <div class="mt-6">
                                <div class="px-0 py-2 text-xl lg:text-2xl leading-normal lg:leading-loose font-bold text-theme-primary">
                                    {{ $post->translations[0]->excerpt }}
                                </div>
                            </div>
                        @endif

                        {{-- Image --}}
                        <div class="my-4 lg:my-12">
                            @if($post->hasMedia('*'))
                                <img src="{{ $post->getFirstMediaUrl('*') }}" alt="{{ $post->getFirstMedia('*')->getCustomProperty('caption') }}" class="w-full h-auto">
                                @php
                                    $locale = $post->translations[0]->locale;
                                    $imageCaption = $post->getFirstMedia('*')->getCustomProperty('caption-' . $locale);

                                    // Fallback to other locales if caption not found
                                    if (!$imageCaption) {
                                        $fallbackLocales = array_keys(config('laravellocalization.supportedLocales'));
                                        foreach ($fallbackLocales as $fallbackLoc) {
                                            $imageCaption = $post->getFirstMedia('*')->getCustomProperty('caption-' . $fallbackLoc);
                                            if ($imageCaption) {
                                                break;
                                            }
                                        }
                                    }

                                    $imageOwner = $post->getFirstMedia('*')->getCustomProperty('owner');
                                    $captionParts = array_filter([$imageCaption, $imageOwner]);
                                    $captionText = implode(' ', $captionParts);
                                @endphp
                                @if ($captionText)
                                    <div class="mt-1 lg:mt-2 text-right text-3xs lg:text-xs text-theme-secondary">
                                        {{ $captionText }}
                                    </div>
                                @endif
                            @endif
                        </div>

                        {{-- Content --}}
                        @if (isset($post->translations[0]->content) && strlen(trim(strip_tags($post->translations[0]->content))) > 0)
                            <div class="post-content mt-2 lg:mt-6 mb-12 lg:mb-16 lg:mx-32 text-base lg:text-lg leading-relaxed md:leading-loose lg:leading-loose text-theme-primary">
                                {!! \App\Helpers\StringHelper::sanitizeHtml($post->translations[0]->content) !!}
                            </div>
                        @endif

                        {{-- Meeting Details Table --}}
                        @if (isset($post->meeting))
                            <div class="my-12 bg-theme-surface rounded-lg p-6 md:mx-32 border">
                                <table class="w-full">
                                    <tbody>
                                        @if(isset($post->meeting->price))
                                            <tr>
                                                <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Price') }}</td>
                                                <td class="py-2 text-theme-primary">
                                                    @if($post->meeting->transactionType && strtolower($post->meeting->transactionType->name) == 'work')
                                                        {{ $post->meeting->price === 0 ? __('Free') : tbFormat($post->meeting->price) }}
                                                        ( {{ __('messages.posts.based_on_quantity', ['nr'=> $post->meeting->based_on_quantity]) }} )
                                                    @elseif($post->meeting->transactionType && strtolower($post->meeting->transactionType->name) == 'gift')
                                                        {{ __('messages.posts.transaction_types.gift') }}
                                                    @elseif($post->meeting->transactionType && strtolower($post->meeting->transactionType->name) == 'donation')
                                                        {{ __('messages.posts.transaction_types.donation') }}
                                                    @endif
                                                </td>
                                            </tr>
                                        @endif

                                        @if($post->meeting->venue)
                                            <tr>
                                                <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Location') }}</td>
                                                <td class="py-2 text-theme-primary">{{ $post->meeting->venue }}</td>
                                            </tr>
                                        @endif

                                        @if($post->meeting->address)
                                            <tr>
                                                <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Address') }}</td>
                                                <td class="py-2 text-theme-primary">
                                                    <a href="https://www.openstreetmap.org/search?query={{ urlencode($post->meeting->address) }}"
                                                       target="_blank"
                                                       class="underline hover:text-theme-secondary">
                                                        {{ $post->meeting->address }}
                                                    </a>
                                                </td>
                                            </tr>
                                        @endif

                                        @if($post->meeting->from)
                                            <tr>
                                                <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Date & Time') }}</td>
                                                <td class="py-2 text-theme-primary">{{ Illuminate\Support\Carbon::parse($post->meeting->from)->isoFormat('dddd D MMMM YYYY, H:mm') }} {{ __('hour') }}</td>
                                            </tr>
                                        @endif

                                        @if(isset($post->meeting->meetingable->name))
                                            <tr>
                                                <td class="py-2 pr-4 font-semibold text-theme-primary w-1/3">{{ __('Organizer') }}</td>
                                                <td class="py-2 text-theme-primary">
                                                    <a href="{{ url(strtolower(class_basename($post->meeting->meetingable)) . '/' . $post->meeting->meetingable->id) }}"
                                                       class="flex items-center space-x-3 hover:opacity-80 cursor-pointer">
                                                        @if(isset($post->meeting->meetingable->profile_photo_path))
                                                            <img src="{{ url(Storage::url($post->meeting->meetingable->profile_photo_path)) }}"
                                                                 class="w-10 h-10 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-theme-secondary">
                                                        @endif
                                                        <span>{{ $post->meeting->meetingable->name }}</span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                            <div class="mt-16 mb-12 flex flex-col md:flex-row justify-between gap-6">
                                {{-- Social Share Buttons --}}
                                <div class="md:self-end">
                                    {!! (new \Enflow\SocialShare\SocialShare())
                                        ->mastodon()
                                        ->bluesky()
                                        ->linkedin()
                                        ->instagram()
                                        ->facebook()
                                        ->whatsapp()
                                        ->text($post->translations[0]->title)
                                        ->render() !!}
                                    <div class="mt-2 text-sm invisible">&nbsp;</div>
                                </div>

                                {{-- Reservation Button --}}
                                <div>
                                    <livewire:reserve-button :post="$post" :wire:key="'reserve-'.$post->id" />
                                </div>
                            </div>
                        @else
                            <div class="mt-16 mb-12 flex flex-col md:flex-row justify-between gap-6">
                                {{-- Social Share Buttons --}}
                                <div class="md:self-end">
                                    {!! (new \Enflow\SocialShare\SocialShare())
                                        ->mastodon()
                                        ->bluesky()
                                        ->linkedin()
                                        ->instagram()
                                        ->facebook()
                                        ->whatsapp()
                                        ->text($post->translations[0]->title)
                                        ->render() !!}
                                    <div class="mt-2 text-sm invisible">&nbsp;</div>
                                </div>
                            </div>
                        @endif

                        <livewire:posts.manage-actions :post="$post" />
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
