@props([
'title',
'slug',
'published_at',
'price',
'categories' => []
])
<a href="{{url('resource/'.$slug)}}" class="col-lg-12">
    <div class="resource-card p-3 h-100 bg-white">
        <div class="d-flex flex-column gap-3">
            <div class="d-flex align-items-center justify-content-between w-100">
                <div class="cat-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" color="#f9ada0" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M19.7502 11V10C19.7502 6.22876 19.7502 4.34315 18.5786 3.17157C17.407 2 15.5214 2 11.7502 2H10.7503C6.97907 2 5.09347 2 3.9219 3.17156C2.75033 4.34312 2.75031 6.22872 2.75028 9.99993L2.75024 14C2.75021 17.7712 2.7502 19.6568 3.92173 20.8284C5.0933 21.9999 6.97898 22 10.7502 22" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M7.25024 7H15.2502M7.25024 12H15.2502" stroke-linecap="round"></path>
                        <path d="M13.2502 20.8268V22H14.4236C14.833 22 15.0377 22 15.2217 21.9238C15.4058 21.8475 15.5505 21.7028 15.84 21.4134L20.6636 16.5894C20.9366 16.3164 21.0731 16.1799 21.1461 16.0327C21.285 15.7525 21.285 15.4236 21.1461 15.1434C21.0731 14.9961 20.9366 14.8596 20.6636 14.5866C20.3905 14.3136 20.254 14.1771 20.1067 14.1041C19.8265 13.9653 19.4975 13.9653 19.2173 14.1041C19.0701 14.1771 18.9335 14.3136 18.6605 14.5866L18.6605 14.5866L13.8369 19.4106C13.5475 19.7 13.4027 19.8447 13.3265 20.0287C13.2502 20.2128 13.2502 20.4174 13.2502 20.8268Z" stroke-linejoin="round"></path>
                    </svg>
                </div>
                <span class="plans text-nowrap basic-plan">

                    @if (is_null($price))
                    Subscribe
                    @elseif ((float) $price === 0.0)
                    Free
                    @else
                    {{ $price }}
                    @endif
                </span>
            </div>
            <div class="h-100 d-flex flex-column justify-content-between">
                <h6 class="mb-4">{!!$title!!}</h6>
                <ul class="d-flex gap-4 align-items-center text-muted">
                    <li class="d-flex align-items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="folder" class="lucide lucide-folder w-3.5 h-3.5">
                            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
                        </svg>
                        <span> {{ collect($categories)->pluck('name')->join(', ') }}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</a>