@extends('layouts.app')

@section('titre', 'Bibliothèque')

@section('contenu')
    <div class="mx-auto max-w-4xl px-5 py-10">
        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Bibliothèque</h1>

        <section class="mt-8">
            <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Labs</h2>
            @if ($labs->isEmpty())
                <p class="mt-3 font-semibold" style="color:var(--sy-muted)">Aucun lab dans le catalogue.</p>
            @else
                <ul class="mt-3 grid gap-3 sm:grid-cols-2">
                    @foreach ($labs as $lab)
                        <li class="rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
                            <p class="font-bold" style="color:var(--sy-ink)">{{ $lab->titre }}</p>
                            <p class="mt-1 font-mono text-xs font-semibold" style="color:var(--sy-muted)">{{ $lab->niveau }}@if($lab->duree_min) · {{ $lab->duree_min }} min @endif</p>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        <section class="mt-10">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-extrabold" style="color:var(--sy-ink)">Quiz</h2>
                <a href="{{ route('banque-quiz.index') }}" class="font-bold underline" style="color:var(--sy-blue)">Voir la banque complète →</a>
            </div>
            @foreach ($groupesQuiz as $theme => $quizzes)
                <div class="mt-5">
                    <p class="font-mono text-sm font-bold" style="color:var(--sy-muted)">{{ $theme !== '' ? $theme : 'Partagés par des profs' }}</p>
                    <ul class="mt-2 grid gap-2">
                        @foreach ($quizzes as $quiz)
                            <li class="rounded-xl border p-3 font-semibold" style="border-color:var(--sy-line);background:var(--sy-surface);color:var(--sy-ink)">{{ $quiz->titre }}</li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </section>
    </div>
@endsection