@php
$verifyMaxAttempts = $verifyMaxAttempts ?? (int) config('twofactorconfig.security.max_attempts', 5);
@endphp

<div
    x-data="twofactorTotpSetupModal({
        verifyMaxAttempts: @js($verifyMaxAttempts),
        urls: {
            totp: @js(route($guard . '.twofactor.settings.totp.setup')),
            verify: @js(route($guard . '.twofactor.settings.totp.verify')),
            verifySubmit: @js(route($guard . '.twofactor.settings.totp.verify.submit')),
            resetVerifyThrottle: @js(route($guard . '.twofactor.settings.totp.verify.reset')),
        },
        i18n: {
            copy: @js(__('twofactor.setup.copy')),
            copied: @js(__('twofactor.setup.copied')),
            totp_load_error: @js(__('twofactor.setup.totp.load_error')),
            totp_retry: @js(__('twofactor.setup.totp.retry')),
            verify_load_error: @js(__('twofactor.verify.load_error')),
            verify_retry: @js(__('twofactor.verify.retry')),
            toast_verify_failed: @js(__('twofactor.toast.verify_failed')),
            verify_attempts_remaining: @js(__('twofactor.verify.attempts_remaining')),
            verify_locked_in: @js(__('twofactor.verify.locked_in')),
        },
    })"
    @open-totp-setup-modal.window="openModal()"
    @twofactor-totp-back.window="goBackFromVerify()"
    x-cloak>
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
        role="dialog"
        aria-modal="true"
        aria-labelledby="totp-setup-modal-title"
        @keydown.escape.prevent>
        <div
            x-show="open"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="relative flex max-h-[min(90vh,720px)] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-2xl">
            <div
                x-show="isLoading"
                x-cloak
                class="absolute inset-0 z-20 flex items-center justify-center rounded-2xl bg-card/85 backdrop-blur-[2px]"
                aria-live="polite"
                aria-busy="true">
                <x-heroicon-o-arrow-path class="h-9 w-9 animate-spin text-brand" aria-hidden="true" />
                <span class="sr-only">{{ __('buttons.loading') }}</span>
            </div>

            <div class="flex shrink-0 items-center justify-between border-b border-border px-5 py-4 sm:px-6">
                <h3 id="totp-setup-modal-title" class="text-base font-semibold text-foreground">
                    {{ __('pages/twofactor-settings.methods.totp.setup') }}
                </h3>
                <button
                    type="button"
                    class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-50"
                    x-bind:disabled="!canClose"
                    @click="closeModal()"
                    aria-label="{{ __('buttons.close') }}">
                    <x-heroicon-o-x-mark class="h-5 w-5" aria-hidden="true" />
                </button>
            </div>

            <div class="min-h-0 flex-1 overflow-y-auto px-5 py-5 sm:px-6">
                {{-- Step 1: QR code --}}
                <div
                    x-show="isStep('setup')"
                    x-cloak
                    x-transition:enter="twofactor-step-enter"
                    x-transition:enter-start="twofactor-step-enter-start"
                    x-transition:enter-end="twofactor-step-enter-end"
                    class="flex w-full flex-col">
                    <header class="mb-4 shrink-0">
                        <h4 class="text-lg font-bold tracking-tight text-foreground">
                            {{ __('twofactor.setup.totp.heading') }}
                        </h4>
                        <p class="mt-1 text-sm leading-relaxed text-muted-foreground">
                            {{ __('twofactor.setup.totp.subheading') }}
                        </p>
                    </header>

                    <div class="rounded-xl border border-border bg-muted/20 px-4 py-6 dark:bg-muted/10 sm:px-6">
                        @include('pages.twofactor.force-setup.partials.setup-totp-skeleton')
                        @include('pages.twofactor.force-setup.partials.setup-totp-content')
                        @include('pages.twofactor.force-setup.partials.setup-totp-error')
                    </div>

                    <div class="mt-5 flex shrink-0 justify-end">
                        <x-buttons.primary
                            type="button"
                            class="w-full sm:w-auto"
                            x-bind:disabled="isLoading || totpLoadState !== 'loaded'"
                            @click="goToVerify()">
                            {{ __('twofactor.setup.next_verify') }}
                            <x-heroicon-o-arrow-right class="h-4 w-4 shrink-0" aria-hidden="true" />
                        </x-buttons.primary>
                    </div>
                </div>

                {{-- Step 2: Verify OTP --}}
                <div
                    x-show="isStep('verify')"
                    x-cloak
                    x-transition:enter="twofactor-step-enter"
                    x-transition:enter-start="twofactor-step-enter-start"
                    x-transition:enter-end="twofactor-step-enter-end"
                    class="flex w-full flex-col">
                    <div
                        x-show="verifyLoadState === 'loading'"
                        x-cloak
                        class="flex flex-col items-center justify-center gap-4 py-8"
                        aria-busy="true">
                        <x-skeleton.horizontal class="h-16 w-16 rounded-2xl" />
                        <x-skeleton.horizontal class="h-4 w-48 rounded" />
                        <x-skeleton.horizontal class="h-12 w-full max-w-xs rounded-xl" />
                    </div>

                    <div
                        x-show="verifyLoadState === 'error'"
                        x-cloak
                        class="flex flex-col items-center gap-4 py-6 text-center">
                        <p class="text-sm text-muted-foreground" x-text="i18n.verify_load_error"></p>
                        <x-buttons.secondary type="button" @click="loadVerifyPanel(true)">
                            <x-heroicon-o-arrow-path class="h-4 w-4 shrink-0" aria-hidden="true" />
                            <span x-text="i18n.verify_retry"></span>
                        </x-buttons.secondary>
                    </div>

                    <div
                        x-ref="verifyContent"
                        x-show="verifyLoadState === 'loaded'"
                        x-cloak
                        class="w-full min-w-0"></div>
                </div>
            </div>
        </div>
    </div>
</div>