@section('title', config('app.name', 'Streamline') .' - '. __('Register'))
@section('description', __('Register for a new account'))

<x-guest-layout>
    <x-t-section>
        <x-t-container
            size="xs"
            border="false"
            hollow
            class="overflow-visible"
        >
            <form method="POST" action="{{ route('register') }}" class="max-w-lg mx-auto">
                @csrf
                <x-t-card
                    variant="light"
                    border="false"
                    size="xl"
                    shadow
                >
                    <x-slot:header>
                        <x-t-heading
                            variant="light"
                            level="3"
                            size="sm"
                            class="mb-0 text-center"
                        >
                            {{ __('Register a new account') }}
                        </x-t-heading>
                    </x-slot:header>
                    <x-slot:body>
                        @if ($errors->any()) 
                            <x-t-alert
                                variant="danger"
                                dismissible
                                border="false"
                                shadow
                                class="mb-5"
                            >
                                <ul class="list-none">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </x-t-alert>
                        @endif
                        <x-honeypot/>
                        <x-t-input
                            variant="{{ $errors->get('name') ? 'danger' : '' }}"
                            type="text"
                            name="name"
                            id="name"
                            label="{{ __('Name') }}"
                            autofocus
                            autocomplete="name"
                            :value="old('name')"
                            required
                        />
                        <x-t-input
                            variant="{{ $errors->get('email') ? 'danger' : '' }}"
                            type="email"
                            name="email"
                            id="email"
                            label="{{ __('Email') }}"
                            autocomplete="username"
                            :value="old('email')"
                            required
                        />
                        <x-t-input
                            variant="{{ $errors->get('password') ? 'danger' : '' }}"
                            type="password"
                            name="password"
                            id="password"
                            label="{{ __('Password') }}"
                            autocomplete="new-password"
                            required
                        />
                        <x-t-input
                            variant="{{ $errors->get('password_confirmation') ? 'danger' : '' }}"
                            type="password"
                            name="password_confirmation"
                            id="password_confirmation"
                            label="{{ __('Confirm Password') }}"
                            autocomplete="new-password"
                            required
                        />
                        <x-t-grid cols="2" gap="sm" class="mt-10">
                            <x-t-button
                                type="submit"
                                variant="success"
                            >
                                {{ __('Register') }}
                            </x-t-button>
                            <div class="flex justify-center items-center md:order-first">
                                <x-t-link
                                    href="{{ route('login') }}"
                                >
                                    {{ __('Already registered?') }}
                                </x-t-link>
                            </div>
                        </x-t-grid>
                    </x-slot:body>
                    @if (config('streamline.social_login.enabled'))
                        <x-slot:footer>
                            <x-t-text
                                variant="light"
                                size="sm"
                                class="uppercase text-center"
                            >
                                {{ __('Or') }}
                            </x-t-text>
                            <x-t-grid cols="1" gap="sm">
                                @includeIf('auth.partials.social-logins')
                            </x-t-grid> 
                        </x-slot:footer>
                    @endif
                </x-t-card>
            </form>
        </x-t-container>
    </x-t-section>
</x-guest-layout>