@extends('layouts.auth')
@section('title', 'Create your InLynq')

@section('content')
<div><h1>Create your InLynq</h1><p class="iq-muted" style="margin:4px 0 0">Your work. Your proof. One link. Free forever.</p></div>
<form method="POST" action="{{ route('register') }}" class="iq-stack">
  @csrf
  <x-iq.field label="Your link" name="username" help="Lowercase letters, numbers, dots and dashes.">
    <x-iq.affix name="username" :prefix="\App\Support\PublicUrl::host().'/'" :value="$claimed" autocomplete="off" maxlength="30" required data-username-check="#reg-handle-status" />
  </x-iq.field>
  <span id="reg-handle-status" class="iq-help" hidden style="margin-top:-8px"></span>
  <x-iq.field label="Full name" name="name"><x-iq.input name="name" autocomplete="name" required maxlength="80" /></x-iq.field>
  <x-iq.field label="Email" name="email"><x-iq.input name="email" type="email" autocomplete="email" required /></x-iq.field>
  <div class="iq-grid-2">
    <x-iq.field label="Password" name="password"><x-iq.input name="password" type="password" autocomplete="new-password" required /></x-iq.field>
    <x-iq.field label="Confirm password" name="password_confirmation"><x-iq.input name="password_confirmation" type="password" autocomplete="new-password" required /></x-iq.field>
  </div>
  <button class="iq-btn iq-btn-primary iq-btn-lg iq-btn-block">Create your InLynq</button>
  <p class="iq-help" style="margin:0;text-align:center">We'll email you a link to confirm your address.</p>
</form>
@endsection

@section('below')
Already have an account? <a class="iq-link" href="{{ route('login') }}">Log in</a>
@endsection