@extends('layouts.app')

@section('titre', 'Séances en direct')

@section('contenu')
    <div class="mx-auto max-w-3xl px-5 py-10">
        <h1 class="text-3xl font-extrabold" style="color:var(--sy-ink)">Séances en direct</h1>

        @if ($seances->isEmpty())
            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Aucune séance en cours dans tes classes.</p>
        @else
            <ul class="mt-6 grid gap-3">
                @foreach ($seances as $seance)
                    <li class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
                        <div>
                            <p class="font-bold" style="color:var(--sy-ink)">{{ $seance->lab->titre }}</p>
                            <p class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $seance->classe->nom }} · {{ $seance->statut === \App\Models\Seance::EN_COURS ? 'En cours' : 'Salle d\'attente' }}</p>
                        </div>
                        <a href="{{ route('mes-classes.show', $seance->classe) }}" class="inline-flex h-10 items-center rounded-full px-4 font-bold text-white" style="background:var(--sy-blue)">Ouvrir la classe</a>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
@endsection