@php($isDone = in_array((int) $lesson->id, $completedLessonIds, true))

<div class="rounded-lg border {{ $isDone ? 'border-emerald-200 bg-emerald-50/40' : 'border-slate-200' }}">
    <details>
        <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3">
            <span class="flex items-center gap-2 text-sm font-medium text-slate-800">
                <x-icon :name="$isDone ? 'check' : 'document-text'" size="sm" :class="$isDone ? 'text-emerald-600' : 'text-slate-400'" />
                {{ $lesson->title }}
                <span class="text-xs font-normal text-slate-500">
                    {{ $lesson->kind_label }}@if ((int) $lesson->duration_minutes > 0) · {{ $lesson->duration_minutes }} min @endif
                </span>
            </span>
            @if ($isDone)
                <x-status-badge color="green" label="Done" size="sm" />
            @endif
        </summary>

        <div class="space-y-3 border-t border-slate-200 px-4 py-4">
            @if ($lesson->kind === 'text' && $lesson->content)
                <div class="text-sm leading-relaxed text-slate-700">{!! nl2br(e($lesson->content)) !!}</div>
            @elseif ($lesson->kind === 'pdf')
                <a href="{{ route('hr.training.lessons.file', $lesson) }}" target="_blank" class="hms-btn-secondary hms-btn-sm">
                    <x-icon name="document-text" size="sm" />
                    Open PDF
                </a>
            @elseif ($lesson->kind === 'video')
                @if ($lesson->embed_url)
                    <div class="aspect-video w-full overflow-hidden rounded-lg bg-black">
                        <iframe src="{{ $lesson->embed_url }}" class="h-full w-full" allowfullscreen loading="lazy"></iframe>
                    </div>
                @endif
                @if ($lesson->file_path)
                    <video controls class="w-full rounded-lg" src="{{ route('hr.training.lessons.file', $lesson) }}"></video>
                @endif
                @if ($lesson->video_url)
                    <a href="{{ $lesson->video_url }}" target="_blank" class="text-xs font-medium text-brand-700 hover:underline">Open video in a new tab</a>
                @endif
            @else
                <p class="text-xs text-slate-500">This lesson has no content attached yet.</p>
            @endif

            @if (! $isDone && $assignment->status !== 'completed')
                <form method="POST" action="{{ route('hr.training.lessons.complete', [$assignment, $lesson]) }}">
                    @csrf
                    <button type="submit" class="hms-btn-primary hms-btn-sm">
                        <x-icon name="check" size="sm" />
                        Mark complete
                    </button>
                </form>
            @endif
        </div>
    </details>
</div>