@php
    $options = \App\UserTypes::labels();
@endphp
<x-layout>
    <section class="bg-linear-135 h-screen from-[#EFF6FF] to-[#FCF3F8] flex justify-center items-center">
        <x-card class="md:w-96">
            <div class="flex flex-col items-center space-y-5">
                <x-logo class="w-fit"/>
                <h1 class="font-bold text-2xl">Create Account</h1>
                <p class=" text-accent-600 text-sm">Join {{config('app.name')}} and start discovering great deals</p>
            </div>
            <form action="" class="flex flex-col space-y-5">
                <x-input label="Full Name" name="name" placeholder="Jhon Doe" />
                <x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
                <x-select :options="$options" value-key="value" label-key="label" label="Account Type"/>
                <x-input label="Password" name="password" type="password"/>
                <x-input label="Confirm Password" name="password_confirmation" type="password"/>

                <x-button variant="neutral">Create Account</x-button>
            </form>

            <p class="text-center text-accent-600 text-xs">Already have an account?
                <a href="{{route('login')}}" class="text-blue-500 font-bold">Sign In</a>
            </p>
        </x-card>

        <div class="absolute top-1 md:top-5 md:left-10">
            <a href="{{route('home')}}" class="flex hover:underline">
                <x-heroicon-o-arrow-left class="w-4 mr-2"/>
                Back to Home
            </a>
        </div>
    </section>
</x-layout>