<div class="d-lg-flex row g-3">
    @foreach ($posts as $post)
        <div class="col-lg-4 col-md-6 col-12 m-0 p-2" style="">
            <div class="flex-fill placeholder-glow bg-white card">
                <div class="row g-0 h-100">
                    <div class="col-md-6">
                        <div class="card-body">
                            <div class="mb-3">
                                <span
                                    class="badge bg-body-secondary text-dark border-secondary bg-opacity-75 fs-6 rounded-pill">{{ __($post->category) }}</span>
                            </div>
                            <h3 class="card-title fs-4">{{ $post->name }}</h3>
                        </div>
                    </div>
                    <div class="col-md-6 bg-secondary bg-opacity-50 rounded-end"
                        style="height:200px;background-size:cover;background-position:center;background-image:url('{{ url('/storage/' . $post->image) }}')">
                        <a href="#" class="btn btn-light btn-lg rounded-4 position-absolute bottom-0 end-0 m-3"
                            wire:click="open({{ $post->id }})">
                            <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    @livewire('post.card')
</div>
