@extends('layouts.vpm-auth')

@section('title', 'Sign Up')
@section('card_class', 'vpm-auth-ref__card--wide')

@section('content')
<form method="POST" action="{{ route('register.store') }}" class="vpm-auth-ref__form">
    @csrf
    <input type="hidden" name="role" value="user">

    <div class="vpm-auth-ref__row">
        <x-vpm.auth-field name="first_name" label="First name" icon="person" :required="true" autocomplete="given-name" />
        <x-vpm.auth-field name="last_name" label="Last name" icon="person" :required="true" autocomplete="family-name" />
    </div>

    <x-vpm.auth-field name="email" label="Email" type="email" icon="email" :required="true" autocomplete="email" :autofocus="true" />

    <x-vpm.auth-field name="password" label="Password" type="password" :toggle="true" :required="true" autocomplete="new-password" :minlength="8" hint="At least 8 characters." hintId="password-hint" />

    <x-vpm.auth-field name="password_confirmation" label="Confirm password" type="password" :toggle="true" :required="true" autocomplete="new-password" />

    <x-vpm.auth-field name="mobile" label="Mobile" type="tel" icon="phone" :required="true" autocomplete="tel" />

    <div class="vpm-auth-ref__row">
        <x-vpm.auth-field name="country" label="Country" icon="public" :required="true" autocomplete="country-name" />
        <x-vpm.auth-field name="currency" label="Currency" icon="payments" value="USD" :options="\App\Support\Currency::options()" :required="true" />
    </div>

    <div class="vpm-auth-ref__row">
        <x-vpm.auth-field name="state" label="State / province" icon="map" :required="true" />
        <x-vpm.auth-field name="city" label="City" icon="location_city" :required="true" autocomplete="address-level2" />
    </div>

    <x-vpm.auth-field
        name="referral_id"
        label="Referral ID{{ ($referralRequired ?? false) ? '' : ' (optional)' }}"
        icon="group"
        :value="$referralId ?? ''"
        :required="$referralRequired ?? false"
    />

    <button type="submit" class="vpm-auth-ref__submit" data-loading-label="Creating account…">
        Sign Up
    </button>
</form>

<p class="vpm-auth-ref__footer">
    Already have an account?
    <a href="{{ route('login') }}" class="vpm-auth-ref__link">Sign In</a>
</p>
@endsection