@extends('layouts.front.app')

@section('title', __('twofactor.title'))

@section('noPageIndex', true)
@section('disablePromoBar', true)
@section('disableHeader', true)
@section('disableFooter', true)

@section('content')
<section
    class="border-b border-border bg-gradient-to-b from-muted/50 to-background"
    aria-labelledby="twofactor-setup-heading">
    <div class="container py-10 sm:py-14 lg:py-16 xl:py-20">
        <div class="mx-auto w-full max-w-5xl">
            <article
                class="overflow-hidden rounded-2xl border border-border bg-card shadow-hover dark:shadow-soft lg:rounded-3xl"
                x-data="twoFactorSetup({
                    userEmail: @js($user->email),
                    emailResendCooldown: @js($emailResendCooldown ?? 0),
                    urls: @js([
                        'totp' => route($guard . '.twofactor.setup.totp'),
                        'verify' => route($guard . '.twofactor.setup.verify'),
                        'verifySubmit' => route($guard . '.twofactor.setup.verify.submit'),
                        'resetVerifyThrottle' => route($guard . '.twofactor.setup.verify.reset'),
                        'sendEmail' => route($guard . '.twofactor.setup.email.send'),
                    ]),
                    verifyMaxAttempts: @js((int) config('twofactorconfig.security.max_attempts', 5)),
                    i18n: @js([
                        'copy' => __('twofactor.setup.copy'),
                        'copied' => __('twofactor.setup.copied'),
                        'resend' => __('twofactor.setup.email.resend'),
                        'resend_in' => __('twofactor.setup.email.resend_in'),
                        'available_in' => __('twofactor.choose.methods.email.available_in'),
                        'sending' => __('twofactor.setup.email.sending'),
                        'progress_step' => __('twofactor.progress.step'),
                        'footer_hint_totp' => __('twofactor.setup.totp.footer_hint'),
                        'footer_hint_email' => __('twofactor.setup.email.footer_hint'),
                        'toast_code_sent' => __('twofactor.toast.code_sent'),
                        'toast_code_resent' => __('twofactor.toast.code_resent'),
                        'toast_resend_failed' => __('twofactor.toast.resend_failed'),
                        'toast_verify_failed' => __('twofactor.toast.verify_failed'),
                        'verify_throttled' => __('twofactor.verify.throttled'),
                        'verify_locked_in' => __('twofactor.verify.locked_in'),
                        'verify_attempts_remaining' => __('twofactor.verify.attempts_remaining'),
                    ]),
                })"
                @twofactor-back.window="goBackFromVerify()">
                <div class="grid lg:grid-cols-5 lg:items-stretch">
                    @include('pages.twofactor.force-setup.partials.aside')

                    <div class="flex min-h-full flex-col px-6 py-8 sm:px-8 sm:py-10 lg:col-span-3 lg:px-10 lg:py-10">
                        <div class="w-full">
                            @include('pages.twofactor.force-setup.partials.choose-method')
                            @include('pages.twofactor.force-setup.partials.setup-shell')
                            @include('pages.twofactor.force-setup.partials.verify-shell')
                        </div>

                        @include('pages.twofactor.force-setup.partials.footer')
                    </div>
                </div>
            </article>
        </div>
    </div>
</section>
@endsection

@push('before-app-js')
@vite(['resources/js/components/otp-input.js', 'resources/js/twofactor/setup.js'])
@endpush