@extends('layouts.app')

@section('content')
    <div class="library-head">
        <div>
            <h1 class="section-title text-3xl">Guided Lessons</h1>
            <p class="mt-1 text-sm text-slate-400">{{ $lessons->total() }} {{ \Illuminate\Support\Str::plural('lesson', $lessons->total()) }} available.</p>
        </div>
    </div>

    <div class="grid gap-4 md:grid-cols-2">
        @forelse($lessons as $lesson)
            <a href="{{ route('lessons.show', $lesson->slug) }}" class="lesson-card">
                <div class="lesson-card-body">
                    <h2 class="lesson-card-title">{{ $lesson->title }}</h2>
                    <p class="lesson-card-summary">{{ $lesson->summary }}</p>
                    <div class="lesson-card-footrow">
                        <span class="lesson-card-steps">{{ $lesson->steps_count }} {{ \Illuminate\Support\Str::plural('step', $lesson->steps_count) }}</span>
                        <span class="lesson-card-cta">Start lesson &rarr;</span>
                    </div>
                </div>
            </a>
        @empty
            <div class="library-empty md:col-span-2">
                <p class="text-base font-medium text-white">No lessons published yet.</p>
                <p class="mt-1 text-sm text-slate-300">Once staff publish lessons they'll appear here.</p>
            </div>
        @endforelse
    </div>

    <div class="mt-6">{{ $lessons->links() }}</div>
@endsection