@props(['course'])

<div class="courses-item d-flex flex-column bg-white overflow-hidden h-100">
    <div class="text-center p-4 pt-0">
        <div class="d-inline-block bg-primary text-white fs-5 py-1 px-4 mb-4">{{ __('courses.price_format', ['price' => $course->price ?? 99]) }}</div>
        <h5 class="mb-3">{{ $course->title }}</h5>
        <p>{{ $course->description }}</p>
        <ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item small"><i class="fa fa-signal text-primary me-2"></i>{{ $course->localized_level ?? __('courses.beginner') }}</li>
            <li class="breadcrumb-item small"><i class="fa fa-calendar-alt text-primary me-2"></i>{{ $course->duration ?? '3' }} {{ __('courses.week') }}</li>
        </ol>
    </div>
    <div class="position-relative mt-auto">
        <img class="img-fluid" src="{{ $course->featured_image ? asset('storage/' . $course->featured_image) : asset('img/drivin/courses-1.jpg') }}" alt="{{ $course->title }}">
        <div class="courses-overlay">
            <a class="btn btn-outline-primary border-2" href="{{ route('courses.show', ['locale' => app()->getLocale(), 'id' => $course->id]) }}">{{ __('courses.read_more') }}</a>
        </div>
    </div>
</div>