<div>
@if($posts->isEmpty())
    @if($fallbackText)
        <p class="text-theme-primary">{{ $fallbackText }}</p>
    @else
        <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>
    @endif

    @else
        <div>
            @foreach($posts as $post)
                <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg mb-3">
                    <div class="px-3 sm:px-0">
                        <div class="max-w-4xl mx-auto my-12 p-4">
                        <livewire:posts.manage-actions :post="$post" />

                        <!-- Title Static Post-->
                        @if (isset($post->translations[0]->title))
                            <h2 class="text-3xl font-semibold my-12 text-theme-primary dark:text-white">{{ $post->translations[0]->title }}</h2>
                        @endif
            
                            <!-- Intro / excerpt Static Post-->
                        @if (isset($post->translations[0]->excerpt))
                            <p class="text-xl font-medium my-12 leading-loose text-theme-primary dark:text-theme-muted">{{ $post->translations[0]->excerpt }}</p>
                        @endif
                        @if($post->hasMedia('*'))
                            <img src="{{ $post->getFirstMediaUrl('*') }}" alt="{{ $post->getFirstMedia('*')->getCustomProperty('caption') }}" class="{{ $imageClass }}">
                            @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 $fallbackLocale) {
                                        $imageCaption = $post->getFirstMedia('*')->getCustomProperty('caption-' . $fallbackLocale);
                                        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
            
                    <!-- Content Static Post-->
                    @if (isset($post->translations[0]->content) && strlen(trim(strip_tags($post->translations[0]->content))) > 0)
                        <div class="text-theme-primary max-w-2xl mx-auto mt-12 mb-16 p-4 post bg-theme-background dark:bg-theme-primary">
                            <div class="post-content font-base font-normal leading-loose ">
                                {!! \App\Helpers\StringHelper::sanitizeHtml($post->translations[0]->content) !!}
                            </div>
                        </div>
                    @endif
                    @php
                        $update = Illuminate\Support\Carbon::createFromTimeStamp(strtotime($post->translations[0]->updated_at))->isoFormat('LL');
                    @endphp
                    @if (!$hideAuthor )
                        <div class="text-sm font-light mb-12 text-theme-primary">
                            {{ str_replace(['@AUTHOR@', '@DATE@'], [timebank_config('posts.site-content-writer'), $update], __('Written by @AUTHOR@ on @DATE@')) }}
                        </div>
                    @endif
                    @if ($versionInfo)
                        <div class="text-sm text-theme-secondary mb-12 space-y-1">
                            <div>{{ __('Current version') }}: {{ $versionInfo['version'] }}</div>
                            <div>{{ __('Released') }}: {{ $versionInfo['release_date'] }}</div>
                            <div>{{ __('Licence') }}: {{ $versionInfo['licence'] }}</div>
                            @if ($versionInfo['changelog_url'])
                                <div><a href="{{ $versionInfo['changelog_url'] }}" class="text-theme-brand underline" target="_blank" rel="noopener">{{ __('Changelog') }}</a></div>
                            @endif
                        </div>
                    @endif
                    <livewire:posts.manage-actions :post="$post" />
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    @endif
</div>
