@extends('layouts.app')
@section('title', __('Create account'))
@section('content')
<div class="mx-auto max-w-md rounded-[40px] border border-surface-variant bg-white p-8 shadow-soft">
    <h1 class="text-3xl font-extrabold text-primary">{{ __('Create your account') }}</h1>
    <form method="POST" action="{{ route('register.store') }}" class="mt-6 space-y-4">@csrf
        <div class="grid gap-4 sm:grid-cols-2">
            <x-field name="first_name" :label="__('First name')" required autocomplete="given-name"/>
            <x-field name="last_name" :label="__('Last name')" autocomplete="family-name"/>
        </div>
        <x-field name="email" type="email" :label="__('Email')" required autocomplete="email"/>
        <x-field name="phone" type="tel" :label="__('Phone')" autocomplete="tel"/>
        <x-field name="password" type="password" :label="__('Password')" :hint="__('At least 8 characters.')" required autocomplete="new-password" value=""/>
        <x-field name="password_confirmation" type="password" :label="__('Confirm password')" required autocomplete="new-password" value=""/>
        <x-btn type="submit" block>{{ __('Create account') }}</x-btn>
    </form>
    <p class="mt-6 text-center text-sm text-on-surface-variant">{{ __('Already have an account?') }} <a href="{{ route('login') }}" class="font-bold text-primary underline">{{ __('Sign in') }}</a></p>
</div>
@endsection