@php
    // var_dump($webinar->home_page);
    $name = $webinar->creator->full_name;
    if (!empty($upcomingCourse)) {
        $name = $upcomingCourse->creator->full_name;
    }
    $randomString = Str::random(5);
    $courseUID = $webinar->id . '-' . $randomString;
    if (empty($index)) {
        $index = 0;
    }
@endphp

<div class="course-card col-sm-12 col-md-6 col-lg-4 col-xxl-2 animate__animated animate__fadeIn staggered-item "
    style="width:350px; animation-delay: {{ $index * 0.1 }}s !important;" id="{{ $courseUID }}"
    data-popup-id="{{ 'popup-' . $courseUID }}">
    <div class="overlay"></div>

    <div class="card  rounded border-dark border-2 shadow-sm" >
        <div class="rounded-top mh-240px"
        style="background-size: cover; background-position: center; background-image: url('{{ $webinar->getImage() }}'); height: 240px;"></div>

        <div class="card-body p-2">
            <h5 class="card-title min-h-40px">{{ $webinar->title }}</h5>
            <p class="card-text mb-0">{{ $name }}</p>
            <span class="">@include(getTemplate() . '.includes.webinar.rate', ['rate' => $webinar->getRate()])</span>
            <p class="">@include(getTemplate() . '.includes.webinar.price', ['webinar' => $webinar])</p>
        </div>
    </div>
    
    @if(!empty($popup) && $popup) 
    @include(getTemplate() . '.includes.webinar.info-popup', [
    'webinar' => $webinar,
    'name' => $name,
    'uid' => $courseUID,
])
@endif

</div>