@extends('layouts.user.app')

@section('page_content')
    <div class="min-h-screen bg-bg-pr py-12">
        <x-public.container>
            <div class="block">
                <div class="max-w-md mx-auto bg-bg-pr">
                    <div class="border border-fill-pr p-4 lg:p-8 rounded-xl">
                        <form action="{{ route('user.onboarding.save-name') }}" method="POST">
                            @csrf
                            <div class="block mb-6">
                                <div class="mb-8">
                                    <h1 class="text-title-1 tracking-tighter font-semibold font-display">
                                        {{ __('auth.pages.onboarding-name.title') }}
                                    </h1>
                                    <p class="text-par-m text-lab-sc mb-2">
                                        {{ __('auth.pages.onboarding-name.helper') }}
                                    </p>
                                </div>
    
                                <div class="space-y-4">
                                    <div class="block">
                                        <x-forms.input value="{{ auth()->user()->full_name }}" labelText="{{ __('labels.what-name') }}" name="full_name" placeholder="{{ __('labels.eg-name') }}"></x-forms.input>
                                    </div>
                                </div>
                            </div>
                            <div class="block mb-6">
                                <p class="text-par-s text-lab-pr2 mb-2">
                                    {{ __('auth.pages.onboarding-name.name-helper') }}
                                </p>
                                <x-forms.button width="w-full" text="{{ __('labels.save-continue') }}" classes="bg-brand-900 text-white w-full"></x-forms.button>
                            </div>
                            <div class="flex justify-center gap-2">
                                <span class="size-2.5 rounded-full bg-brand-900"></span>
                                <span class="size-2.5 rounded-full bg-fill-pr"></span>
                                <span class="size-2.5 rounded-full bg-fill-pr"></span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </x-public.container>
    </div>
@endsection