@extends('layouts.auth')

@section('title', trans('auth.otp_verify_title'))

@section('content')
<div class="w-full max-w-[430px]"
     x-data="authOtpFlow({
        step: 'otp',
        email: @js($email),
        sendUrl: @js(route('login.submit')),
        verifyUrl: @js(route('login.verify.submit')),
        resendUrl: @js(route('login.resend')),
        backUrl: @js(route('login', ['email' => $email])),
        csrf: @js(csrf_token()),
        message: @js(session('info')),
        strings: window.authOtpStrings,
     })">

    <div class="bg-white dark:bg-navy-900 rounded-[28px] p-7 sm:p-9 shadow-xl shadow-slate-200/60 dark:shadow-navy-950/40 border border-slate-100 dark:border-slate-800 transition-all">
        <div x-show="error" x-cloak class="mb-4 p-3 rounded-2xl bg-red-500/10 border border-red-500/30 text-red-600 dark:text-red-400 text-xs flex items-center gap-2">
            <i class="fa-solid fa-circle-exclamation shrink-0"></i>
            <span x-text="error"></span>
        </div>

        @if($errors->any())
            <div class="mb-4 p-3 rounded-2xl bg-red-500/10 border border-red-500/30 text-red-600 dark:text-red-400 text-xs flex items-center gap-2">
                <i class="fa-solid fa-circle-exclamation shrink-0"></i>
                <span>{{ $errors->first() }}</span>
            </div>
        @endif

        @include('auth.partials.otp-step')
    </div>

    <!-- Bottom subtext -->
    <p class="text-[11px] text-slate-400 dark:text-slate-500 text-center mt-5">
        {{ trans('auth.passwordless_hint_verify') }}
    </p>
</div>
@endsection

@section('scripts')
    @include('auth.partials.auth-otp-script')
@endsection