@extends('components.layouts.guest')

@section('content')
    <h2 class="text-xl text-center text-accent-blue mb-4">Create an account</h2>

    <form method="POST" action="{{ route('register') }}">
        @csrf

        <x-input
            type="text"
            name="name"
            label="Name"
            placeholder="Enter your name"
            required
            autofocus
        />

        <x-input
            type="email"
            name="email"
            label="Email"
            placeholder="Enter your email"
            required
        />

        <x-input
            type="password"
            name="password"
            label="Password"
            placeholder="Enter your password"
            required
        />

        <x-input
            type="password"
            name="password_confirmation"
            label="Confirm Password"
            placeholder="Confirm your password"
            required
        />

        <x-button type="submit" class="w-full">
            Register
        </x-button>

        <div class="text-center mt-4">
            <span class="text-sm text-gray-400">Already have an account?</span>
            <a href="{{ route('login') }}" class="text-accent-blue hover:underline text-sm ml-1">Login</a>
        </div>
    </form>
@endsection