@extends('layouts.member')
@section('title', 'Create your account')
@section('content')
<div class="mx-auto max-w-md">
    <h1 class="text-3xl">Create your account</h1>
    <p class="mt-2 text-asphalt-600">Pick a username. It becomes your page at absurdities.ng/users/<span class="font-semibold">username</span>.</p>
    <form class="card mt-6 space-y-4" method="post" action="{{ route('register') }}" data-ajax novalidate>
        @csrf
        <input type="hidden" name="ref" value="{{ $referral }}">
        <div class="hidden" aria-hidden="true"><label>Website <input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
        <x-form-error/>
        <div>
            <x-field name="username" label="Username" required autocomplete="username" autocapitalize="off" spellcheck="false" maxlength="30"
                     data-username-check="{{ route('username.check') }}" data-username-status="username-status"
                     hint="3 to 30 characters: letters, numbers and underscores."/>
            <p id="username-status" class="hint" aria-live="polite"></p>
        </div>
        <x-field name="display_name" label="Display name" required autocomplete="name" maxlength="80"/>
        <x-field name="email" label="Email" type="email" autocomplete="email" hint="Email or phone number is required. You can add both."/>
        <x-field name="phone" label="Phone number" type="tel" autocomplete="tel" placeholder="0801 234 5678"/>
        <x-password-field name="password" label="Password" autocomplete="new-password" hint="At least 10 characters with letters and numbers."/>
        <div>
            <label class="label" for="state_id">State</label>
            <select id="state_id" name="state_id" class="input">
                <option value="">Choose your state (optional)</option>
                @foreach($states as $s)<option value="{{ $s->id }}" @selected(old('state_id') == $s->id)>{{ $s->name }}</option>@endforeach
            </select>
            <p class="error" data-error-for="state_id"></p>
        </div>
        <div>
            <label class="flex items-start gap-2 text-sm"><input type="checkbox" name="terms" value="1" class="mt-1 h-4 w-4"> <span>I accept the Terms of Service and Privacy Policy.</span></label>
            <p class="error" data-error-for="terms"></p>
        </div>
        <button class="btn-primary w-full" type="submit">Create account</button>
        <p class="text-center text-sm">Already a member? <a class="font-bold underline" href="{{ route('login') }}">Sign in</a></p>
    </form>
</div>
@endsection