@extends('layouts.app')

@section('titre', 'Emploi du temps')

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

        @if ($evenements->isEmpty())
            <p class="mt-6 font-semibold" style="color:var(--sy-muted)">Rien de prévu pour l'instant.</p>
        @else
            <ul class="mt-6 grid gap-3">
                @foreach ($evenements as $evenement)
                    <li class="flex flex-wrap items-center gap-4 rounded-2xl border p-4" style="border-color:var(--sy-line);background:var(--sy-surface)">
                        <span class="rounded-lg border px-2 py-0.5 font-mono text-xs font-bold" style="border-color:var(--sy-line);color:var(--sy-ink)">
                            {{ $evenement['type'] === 'seance' ? 'Séance' : 'Devoir' }}
                        </span>
                        <span class="flex-1 font-bold" style="color:var(--sy-ink)">{{ $evenement['titre'] }}</span>
                        <span class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $evenement['classe'] }}</span>
                        <span class="font-mono text-sm font-semibold" style="color:var(--sy-ink)">{{ $evenement['date']?->timezone(config('app.fuseau_utilisateurs'))->translatedFormat('d/m H:i') }}</span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
@endsection