@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>
            <a href="{{ $webinar->getLearningPageUrl() }}" class="btn btn-sm btn-success w-100 mt-2">
                {{-- <i class="fas fa-graduation-cap me-2"></i> --}}
                {{ trans('update.go_to_learning_page') }}
            </a>
            @include('web.default.panel.webinar.partials._progress-bar', [
                'webinar' => $webinar,
                'user' => auth()->user(),
            ])
        </div>
    </div>

    @if (!empty($popup) && $popup)
        @include(getTemplate() . '.includes.webinar.info-popup', [
            'webinar' => $webinar,
            'name' => $name,
            'uid' => $courseUID,
        ])
    @endif

</div>