@extends('layouts.app')

@section('content')
    <h1 class="text-3xl font-bold tracking-tight text-white">{{ $lesson->title }}</h1>
    <p class="mt-2 text-slate-300">{{ $lesson->summary }}</p>

    <section class="mt-6 space-y-4">
        @foreach($lesson->steps as $step)
            <article class="app-card p-5">
                <p class="text-sm font-semibold text-blue-200">Step {{ $step->step_number }}</p>
                <h2 class="mt-1 text-lg font-semibold text-white">{{ $step->modelItem->title }}</h2>
                <p class="mt-2 text-sm text-slate-300">{{ $step->instruction }}</p>
                <div class="mt-3 flex gap-4">
                    <a href="{{ route('models.show', $step->modelItem->slug) }}" class="text-sm text-blue-300 hover:text-blue-200">Open model</a>
                    @if($step->quiz)
                        <a href="{{ route('quizzes.show', $step->quiz->id) }}" class="text-sm text-blue-300 hover:text-blue-200">Take checkpoint quiz</a>
                    @endif
                </div>
            </article>
        @endforeach
    </section>
@endsection