@extends('layouts.app')

@section('title', __('My Wishlist'))

@section('content')
    <div class="container pt-4">@include('partials.how-it-works', ['key' => 'student.wishlist'])</div>

<div class="container py-4">
    <h1 class="h3 fw-bold mb-4">{{ __('My Wishlist') }}</h1>

    @if($wishlists->isEmpty())
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center py-5">
                <i class="bi bi-heart display-4 text-muted d-block mb-3"></i>
                <h5>{{ __('Your wishlist is empty') }}</h5>
                <p class="text-muted">{{ __('Save courses you\'re interested in to find them later.') }}</p>
                <a href="{{ route('courses.index') }}" class="btn btn-primary">{{ __('Explore Courses') }}</a>
            </div>
        </div>
    @else
        {{-- Each card's own heart removes it; the item fades out via learnify-wishlist.js. --}}
        <div class="row g-4" data-wishlist-list>
            @foreach($wishlists as $wishlist)
                @continue(!$wishlist->course)
                <div class="col-sm-6 col-lg-3" data-wishlist-item>
                    @include('partials.course-card', ['course' => $wishlist->course])
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection