<div class="min-h-screen flex items-center justify-center bg-gray-50 px-4">
    @include('components.basics.toast')

    <div class="w-full max-w-md bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
        <h1 class="text-xl font-semibold text-gray-800">Définir votre mot de passe</h1>
        <p class="text-sm text-gray-600 mt-1">Compte: <span class="font-medium">{{ $user->firstname }} {{ $user->lastname }}</span></p>

        <form wire:submit.prevent="save" class="mt-5 space-y-4">
            <x-basics.input type="password" name="password" label="Nouveau mot de passe" wire:model.defer="password" required />
            <x-basics.input type="password" name="password_confirmation" label="Confirmer le mot de passe" wire:model.defer="password_confirmation" required />

            <x-basics.button type="submit" variant="primary" class="w-full">
                Définir le mot de passe
            </x-basics.button>
        </form>
    </div>  
</div>