<div>
    <form wire:submit="register" class="space-y-6">
        @if (session('error'))
            <flux:callout variant="danger">
                <flux:callout.text>{{ session('error') }}</flux:callout.text>
            </flux:callout>
        @endif

        <!-- Email -->
        <flux:input
            wire:model="email"
            label="Email Address"
            placeholder="john@example.com"
            type="email"
            icon="envelope"
            :error="$errors->first('email')"
            required
        />

        <!-- Password -->
        <flux:input
            wire:model="password"
            label="Password"
            placeholder="Minimum 8 characters"
            type="password"
            icon="lock-closed"
            :error="$errors->first('password')"
            required
            viewable
        />

        <!-- Password Confirmation -->
        <flux:input
            wire:model="password_confirmation"
            label="Confirm Password"
            placeholder="Re-enter your password"
            type="password"
            icon="lock-closed"
            :error="$errors->first('password_confirmation')"
            required
            viewable
        />

        @if ($errors->any())
            <flux:callout variant="danger">
                <flux:callout.text>
                    @foreach ($errors->all() as $error)
                        <div>{{ $error }}</div>
                    @endforeach
                </flux:callout.text>
            </flux:callout>
        @endif

        <!-- Submit Button -->
        <flux:button
            type="submit"
            variant="primary"
            size="base"
            class="w-full"
        >
            Create Account
        </flux:button>

        @include('livewire.auth.partials.social-auth-options')

        <!-- Divider -->
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <flux:separator />
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400">
                    Already have an account?
                </span>
            </div>
        </div>

        <!-- Login Link -->
        <div class="text-center">
            <flux:link href="{{ route('login') }}" class="text-lime-600 dark:text-lime-400 hover:text-lime-500 font-medium">
                Sign In
            </flux:link>
        </div>
    </form>
</div>
