@extends('layouts.app')

@section('title', 'Get Started')

@section('content')
    <div class="mx-auto flex max-w-md flex-col justify-center px-4 py-20">
        <h1 class="text-3xl font-extrabold tracking-tight">Create your account</h1>
        <p class="mt-2 text-sm text-slate-400">Free to join. Every free prompt unlocks immediately.</p>

        <form method="POST" action="{{ route('register') }}" class="surface mt-8 space-y-5 p-6">
            @csrf

            <div>
                <label for="name" class="label">Name</label>
                <input id="name" type="text" name="name" value="{{ old('name') }}" required autofocus
                       autocomplete="name" class="field">
                @error('name') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="email" class="label">Email</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required
                       autocomplete="username" class="field">
                @error('email') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="password" class="label">Password</label>
                <input id="password" type="password" name="password" required autocomplete="new-password" class="field">
                @error('password') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="password_confirmation" class="label">Confirm password</label>
                <input id="password_confirmation" type="password" name="password_confirmation" required
                       autocomplete="new-password" class="field">
            </div>

            <button type="submit" class="btn btn-primary w-full py-3">Create account</button>

            <p class="text-center text-sm text-slate-400">
                Already a member?
                <a href="{{ route('login') }}" class="font-semibold text-brand-300 hover:text-brand-200">Log in</a>
            </p>
        </form>
    </div>
@endsection