@php
    $settings = app(\App\Services\Settings\SettingsService::class);
    $emailLoginEnabled = $settings->isEnabled('security.enable_email_login');
    $googleLoginEnabled = $settings->isEnabled('google.login_enabled');
    $hasLoginErrors = $errors->has('identifier') || $errors->has('password');
@endphp

<div
    class="fixed inset-0 z-50 hidden"
    data-auth-modal
    data-auth-modal-initial-open="{{ $hasLoginErrors ? '1' : '0' }}"
    role="dialog"
    aria-modal="true"
    aria-labelledby="auth-modal-title"
    aria-hidden="true"
>
    <div class="absolute inset-0 bg-slate-950/45 backdrop-blur-sm" aria-hidden="true"></div>

    <div class="relative flex min-h-screen items-center justify-center p-4">
        <section class="max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-[2rem] border border-white/80 bg-white p-5 shadow-2xl shadow-slate-950/20 ring-1 ring-slate-900/5 sm:p-7">
            <div class="mb-5 flex items-start justify-between gap-4">
                <div>
                    <p class="eyebrow" data-auth-eyebrow>Applicant login</p>
                    <h2 id="auth-modal-title" class="mt-2 text-2xl font-black tracking-tight text-slate-950" data-auth-title>
                        Continue to RemoteMatch
                    </h2>
                    <p class="muted-copy mt-2" data-auth-copy>
                        Login with Google or your username/email and password.
                    </p>
                </div>

                <button
                    class="flex size-11 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50"
                    type="button"
                    aria-label="Close login popup"
                    data-auth-modal-close
                >
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="m6 6 12 12M18 6 6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                    </svg>
                </button>
            </div>

            <div class="alert-success mb-5 hidden" data-auth-message></div>

            <div class="{{ $hasLoginErrors ? '' : 'hidden' }} alert-error mb-5" data-auth-error>
                @if ($hasLoginErrors)
                    <p class="font-bold">Please check your login details.</p>
                    <ul class="mt-2 list-disc space-y-1 pl-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                @endif
            </div>

            <div data-auth-panel="login">
                @if ($googleLoginEnabled)
                    <a class="btn-secondary w-full gap-3" href="{{ route('auth.google.redirect', ['popup' => 1]) }}" data-google-popup>
                        <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true">
                            <path fill="#4285F4" d="M21.6 12.23c0-.78-.07-1.53-.2-2.23H12v4.22h5.38a4.6 4.6 0 0 1-2 3.02v2.51h3.24c1.9-1.75 2.98-4.33 2.98-7.52Z"/>
                            <path fill="#34A853" d="M12 22c2.7 0 4.96-.9 6.62-2.43l-3.24-2.51c-.9.6-2.05.96-3.38.96-2.6 0-4.8-1.76-5.59-4.12H3.07v2.6A10 10 0 0 0 12 22Z"/>
                            <path fill="#FBBC05" d="M6.41 13.9A6 6 0 0 1 6.1 12c0-.66.11-1.3.31-1.9V7.5H3.07A10 10 0 0 0 2 12c0 1.62.39 3.15 1.07 4.5l3.34-2.6Z"/>
                            <path fill="#EA4335" d="M12 5.98c1.47 0 2.79.5 3.83 1.5l2.87-2.87A9.62 9.62 0 0 0 12 2 10 10 0 0 0 3.07 7.5l3.34 2.6C7.2 7.74 9.4 5.98 12 5.98Z"/>
                        </svg>
                        Continue with Google
                    </a>
                @endif

                <div class="my-6 flex items-center gap-3">
                    <div class="h-px flex-1 bg-slate-200"></div>
                    <span class="text-xs font-black uppercase tracking-[0.16em] text-slate-400">or</span>
                    <div class="h-px flex-1 bg-slate-200"></div>
                </div>

                @if ($emailLoginEnabled)
                    <form method="POST" action="{{ route('login.store') }}" class="space-y-4">
                        @csrf

                        <label class="block">
                            <span class="field-label">Username or email</span>
                            <input class="field-input" name="identifier" value="{{ old('identifier') }}" autocomplete="username" required>
                        </label>

                        <label class="block">
                            <span class="field-label">Password</span>
                            <input class="field-input" type="password" name="password" autocomplete="current-password" required>
                        </label>

                        <div class="flex items-center justify-between gap-3">
                            <label class="inline-flex items-center gap-2 text-sm font-bold text-slate-600">
                                <input class="option-input" type="checkbox" name="remember" value="1">
                                Remember me
                            </label>

                            <button class="text-sm font-black text-teal-700 hover:text-teal-900" type="button" data-auth-panel-target="forgot">
                                Forgot password?
                            </button>
                        </div>

                        <button class="btn-primary w-full" type="submit">
                            Login
                        </button>
                    </form>
                @else
                    <div class="alert-warn">
                        Username/email login is disabled in Admin Settings. Use Google sign-in or enable Security -> Email login.
                    </div>
                @endif
            </div>

            <div class="hidden" data-auth-panel="forgot">
                <form method="POST" action="{{ route('password.email') }}" class="space-y-4" data-auth-forgot-form>
                    @csrf

                    <label class="block">
                        <span class="field-label">Account email</span>
                        <input class="field-input" type="email" name="email" autocomplete="email" required>
                    </label>

                    <button class="btn-primary w-full" type="submit" data-auth-submit>
                        Send OTP
                    </button>

                    <button class="btn-secondary w-full" type="button" data-auth-panel-target="login">
                        Back to login
                    </button>
                </form>
            </div>

            <div class="hidden" data-auth-panel="reset">
                <form method="POST" action="{{ route('password.otp.reset') }}" class="space-y-4" data-auth-reset-form>
                    @csrf

                    <label class="block">
                        <span class="field-label">Account email</span>
                        <input class="field-input" type="email" name="email" autocomplete="email" required data-auth-reset-email>
                    </label>

                    <label class="block">
                        <span class="field-label">Email OTP</span>
                        <input class="field-input tracking-[0.35em]" name="otp" inputmode="numeric" maxlength="6" autocomplete="one-time-code" required>
                    </label>

                    <label class="block">
                        <span class="field-label">New password</span>
                        <input class="field-input" type="password" name="password" autocomplete="new-password" required>
                    </label>

                    <label class="block">
                        <span class="field-label">Confirm new password</span>
                        <input class="field-input" type="password" name="password_confirmation" autocomplete="new-password" required>
                    </label>

                    <button class="btn-primary w-full" type="submit" data-auth-submit>
                        Reset password
                    </button>

                    <button class="btn-secondary w-full" type="button" data-auth-panel-target="forgot">
                        Request a new OTP
                    </button>
                </form>
            </div>
        </section>
    </div>
</div>