@extends('layouts.app')

@section('titre', 'Mon profil')

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

        <div class="mt-6 rounded-2xl border p-6" style="border-color:var(--sy-line);background:var(--sy-surface)">
            <dl class="grid gap-4">
                <div>
                    <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">Nom</dt>
                    <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $nom }}</dd>
                </div>
                @if ($role === 'prof')
                    <div>
                        <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">E-mail</dt>
                        <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $email }}</dd>
                    </div>
                @else
                    <div>
                        <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">Identifiant</dt>
                        <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $identifiant }}</dd>
                    </div>
                @endif
                @if ($etablissement)
                    <div>
                        <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">Établissement</dt>
                        <dd class="text-lg font-bold" style="color:var(--sy-ink)">{{ $etablissement->nom }}</dd>
                    </div>
                @endif
                <div>
                    <dt class="font-mono text-sm font-semibold" style="color:var(--sy-muted)">{{ $role === 'prof' ? 'Classes' : 'Classe' }}</dt>
                    <dd class="mt-1 flex flex-wrap gap-2">
                        @foreach ($classes as $classe)
                            <span class="rounded-lg border px-2 py-0.5 text-sm font-bold" style="border-color:var(--sy-line);color:var(--sy-ink)">{{ $classe->nom }}</span>
                        @endforeach
                    </dd>
                </div>
            </dl>
        </div>
    </div>
@endsection