<div>
    <x-jetstream.dialog-modal wire:model="show" maxWidth="2xl" closeButton="true" >
        <x-slot name="title">
            {{ $post && $post->translations->isNotEmpty() ? $post->translations[0]->title : $fallbackTitle }}
        </x-slot>

        <x-slot name="content">
            @if ($post && $post->translations->isNotEmpty())
                <div class="post">
                    @if ($post->translations[0]->excerpt)
                        <div class="my-6 text-md">
                            {{ $post->translations[0]->excerpt }}
                        </div>
                    @endif

                    @if($image)
                        <div class="images my-6">
                            @php
                                $tooltipParts = array_filter([$imageCaption, $imageOwner]);
                                $tooltip = implode(', ', $tooltipParts);
                            @endphp
                            <img
                                src="{{ $image }}"
                                alt="{{ $imageCaption ?? '' }}"
                                title="{{ $tooltip }}"
                                class="w-full h-auto mb-4">
                        </div>
                    @endif

                    <div class="text-sm">
                        {!! \App\Helpers\StringHelper::sanitizeHtml($post->translations[0]->content ?? '') !!}
                    </div>
                </div>
                @include('livewire.posts.manage-actions', ['post' => $post])
            @else
                <div class="text-sm">
                    {{ $fallbackDescription }}
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button wire:click="close">
                {{ __('Close') }}
            </x-jetstream.secondary-button>
        </x-slot>
    </x-jetstream.dialog-modal>
</div>
