<div>
    @isset($post)
        <div class="modal fade show d-block bg-dark" style="--bs-bg-opacity: .5;z-index:3000" id="postCardModal" data-bs-backdrop="static"
            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            wire:click="close"></button>
                    </div>
                    <div class="modal-body">
                        @if ($post->image)
                            <div class="w-100"
                                style="
                            height:250px;
                            background-image:url('{{ $post->image }}');
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover; ">
                            </div>
                        @endif
                        <h1 class="mt-3">{{ $post->name }}</h1>
                        @can('update', $post)
                            <div class="mb-3">
                                @livewire('post.form', ['post' => $post])
                            </div>
                        @endcan
                        <p>
                            {!! $post->trixRender('content') !!}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    @endisset
</div>
