@extends('layouts.vitrine')

@section('titre', 'Rejoindre ma classe')

@section('contenu')
    <div class="mx-auto max-w-xl px-5 py-14 lg:px-10">
        <h1 class="text-4xl font-extrabold tracking-tight">Rejoindre ma classe</h1>
        <p class="mt-3 text-lg font-semibold">Ton prof t'a donné un code de classe à 6 caractères. Ton prof va accepter ta demande, puis tu recevras ton identifiant et ton code secret sur cet écran.</p>
        <form action="{{ route('rejoindre.demander') }}" method="post" class="mt-8 grid gap-4 rounded-2xl border border-[#e3e5e8] bg-white p-6">
            @csrf
            <label class="grid gap-1 font-bold">Code de la classe
                <input name="code" value="{{ old('code', $code) }}" required maxlength="6" autocomplete="off" autocapitalize="characters" spellcheck="false"
                       class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-mono text-2xl font-bold uppercase tracking-[0.3em]">
            </label>
            @error('code')<p class="font-semibold text-[#A63D2A]">{{ $message }}</p>@enderror
            <label class="grid gap-1 font-bold">Ton prénom
                <input name="prenom" value="{{ old('prenom') }}" required maxlength="100" autocomplete="given-name" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
            </label>
            @error('prenom')<p class="font-semibold text-[#A63D2A]">{{ $message }}</p>@enderror
            <label class="grid gap-1 font-bold">Ton nom <span class="font-medium">(facultatif, visible de ton prof seulement)</span>
                <input name="nom" value="{{ old('nom') }}" maxlength="100" autocomplete="family-name" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
            </label>
            <p class="text-sm font-semibold text-[#5f6368]">Aucune adresse e-mail n'est demandée.</p>
            <button type="submit" class="inline-flex h-12 items-center justify-center rounded-full bg-[#0b57d0] px-6 text-lg font-bold text-white">Envoyer ma demande</button>
        </form>
        <p class="mt-6 font-semibold">Tu as déjà un identifiant ? <a href="{{ route('login') }}" class="underline underline-offset-4">Connecte-toi</a>.</p>
    </div>
@endsection