@php
    $magicLinkEnabled = config('drama.magiclink_enabled');
    $emailSubmitted = session('status') && $magicLinkEnabled;
@endphp

<div>
    @if($emailSubmitted)
        <x-auth-header
            title="Please open your email"
            description="We’ve sent you a magic login link. Check your inbox and click the link to sign in. If you don’t see the email, check your spam or promotions folder."
        />
    @else
        <div class="flex flex-col gap-6">
            <x-auth-header :title="__('Watch more episodes')" :description="__('Register or login now. It\'s free and always will be')" />

            <!-- Session Status -->
            <x-auth-session-status class="text-center" :status="session('status')" />

            @if($magicLinkEnabled)
                <form method="POST" action="{{ route('magiclink.send') }}" class="flex flex-col gap-6" onsubmit="sessionStorage.setItem('email', this.email.value)">
                    @csrf
                    <flux:input
                        name="email"
                        :label="__('Email address')"
                        type="email"
                        required
                        autofocus
                        autocomplete="email"
                        placeholder="email@example.com"
                    />
                    <div class="text-sm text-zinc-500 dark:text-zinc-400 text-center">
                        {{ __('A magic login link will be sent to your email. No password required!') }}
                    </div>
                    <div class="flex items-center justify-end">
                        <flux:button variant="primary" type="submit" class="w-full">
                            {{ __('Send Magic Link') }}
                        </flux:button>
                    </div>
                </form>
            @else
                <form method="POST" wire:submit="login" class="flex flex-col gap-6">
                    <!-- Email Address -->
                    <flux:input
                        wire:model="email"
                        :label="__('Email address')"
                        type="email"
                        required
                        autofocus
                        autocomplete="email"
                        placeholder="email@example.com"
                    />

                    <!-- Password -->
                    <div class="relative">
                        <flux:input
                            wire:model="password"
                            :label="__('Password')"
                            type="password"
                            required
                            autocomplete="current-password"
                            :placeholder="__('Password')"
                            viewable
                        />

                        @if (Route::has('password.request'))
                            <flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate>
                                {{ __('Forgot your password?') }}
                            </flux:link>
                        @endif
                    </div>

                    <!-- Remember Me -->
                    <flux:checkbox wire:model="remember" :label="__('Remember me')" />

                    <div class="flex items-center justify-end">
                        <flux:button variant="primary" type="submit" class="w-full" data-test="login-button">
                            {{ __('Log in') }}
                        </flux:button>
                    </div>
                </form>
            @endif

            @if (Route::has('register'))
                <div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
                    <span>{{ __('Don\'t have an account?') }}</span>
                    <flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
                </div>
            @endif
        </div>
    @endif
</div>