{{--
    Expects: $title, $icon (Material Symbols name), $railId (unique string), $courses (Collection<Course>)
    Each $course may carry ->pivot->status (todo|inprog|complete|overdue) and ->pivot->progress (0-100).
--}}
<div class="mb-stack-lg">
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center gap-2">
      <span class="material-symbols-outlined text-primary text-[22px]">{{ $icon }}</span>
      <h3 class="text-headline-md font-headline-md text-on-surface">{{ $title }}</h3>
    </div>
    <div class="flex items-center gap-2">
      <a href="{{ \Illuminate\Support\Facades\Route::has('employee.courses') ? route('employee.courses') : '#' }}" class="text-label-md font-label-md text-primary font-bold hover:underline">View All</a>
      <button type="button" onclick="scrollRail('{{ $railId }}', -1)" class="w-9 h-9 flex items-center justify-center rounded-full border border-outline-variant text-outline hover:bg-surface-container-high transition-colors">
        <span class="material-symbols-outlined text-[20px]">chevron_left</span>
      </button>
      <button type="button" onclick="scrollRail('{{ $railId }}', 1)" class="w-9 h-9 flex items-center justify-center rounded-full border border-outline-variant text-outline hover:bg-surface-container-high transition-colors">
        <span class="material-symbols-outlined text-[20px]">chevron_right</span>
      </button>
    </div>
  </div>

  <div id="rail-{{ $railId }}" class="flex gap-5 overflow-x-auto scroll-smooth pb-2" style="scrollbar-width:none;">
    @foreach($courses as $course)
      @php
        $status = $course->pivot->status ?? 'not_started';
        $progress = $course->pivot->progress_percent ?? 0;
        $badge = match($status) {
          'completed'    => ['label' => 'Completed', 'class' => 'bg-secondary-container text-on-secondary-container'],
          'overdue'      => ['label' => 'Overdue', 'class' => 'bg-error-container text-error'],
          'in_progress'  => ['label' => $progress . '% done', 'class' => 'bg-primary/10 text-primary'],
          default        => ['label' => 'Not started', 'class' => 'bg-surface-container-high text-on-surface-variant'],
        };
      @endphp
      <a href="{{ \Illuminate\Support\Facades\Route::has('employee.course.show') ? route('employee.course.show', $course->slug) : '#' }}"
         class="surface-card rounded-xl shrink-0 w-[300px] overflow-hidden hover:-translate-y-0.5 transition-transform">
        <div class="relative h-[210px] bg-surface-container-high">
          @if($course->thumbnail)
            <img src="{{ asset('storage/' . $course->thumbnail) }}" alt="{{ $course->title }}" class="absolute inset-0 w-full h-full object-cover">
          @else
            <div class="absolute inset-0 flex items-center justify-center text-outline">
              <span class="material-symbols-outlined text-[52px]">school</span>
            </div>
          @endif

          <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black/60 to-transparent pointer-events-none"></div>

          <span class="absolute bottom-3.5 right-3 text-[12px] font-bold bg-black/60 text-white px-2.5 py-1 rounded-md">
            {{ $course->duration_minutes }} min
          </span>

          <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-black/20">
            <div class="h-full bg-primary" style="width: {{ $progress }}%"></div>
          </div>
        </div>
        <div class="p-4">
          @if($course->category === 'service_specific')
            <p class="text-[11px] font-bold text-primary uppercase tracking-wide mb-1.5">Service Specific</p>
          @endif
          <p class="text-body-lg font-body-lg text-on-surface font-semibold leading-snug mb-3 line-clamp-2">{{ $course->title }}</p>
          <span class="inline-block text-[12px] font-bold px-2.5 py-1 rounded-full {{ $badge['class'] }}">{{ $badge['label'] }}</span>
        </div>
      </a>
    @endforeach
  </div>
</div>