<div class="space-y-5">
    <x-panel :title="__('settings.twofa_title')" :subtitle="__('settings.twofa_subtitle')">
        @unless ($twoFactorEnabled)
            <div class="mb-4 flex items-start gap-2.5 rounded-md border border-accent/25 bg-accent/10 px-4 py-3">
                <x-icon name="shield" class="mt-0.5 h-4 w-4 shrink-0 text-accent-text" />
                <p class="text-sm text-ink-2">{{ __('settings.twofa_recommended') }}</p>
            </div>
        @endunless

        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <x-status-dot :status="$hasTotp ? 'online' : 'offline'" />
                <div>
                    <p class="text-sm text-ink">{{ $hasTotp ? __('settings.twofa_status_on') : __('settings.twofa_status_off') }}</p>
                    <p class="font-mono text-[11px] text-ink-3">{{ $hasTotp ? __('settings.twofa_hint_on') : __('settings.twofa_hint_off') }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                @if ($twoFactorEnabled)
                    <x-modal-trigger variant="secondary" component="modals.recovery-codes">{{ __('auth.recovery_manage') }}</x-modal-trigger>
                @endif
                @if ($hasTotp)
                    <x-modal-trigger variant="danger-soft" action="confirmDisableTwoFactor">{{ __('settings.twofa_remove_totp') }}</x-modal-trigger>
                @else
                    <x-btn variant="accent" :href="route('two-factor.setup')" wire:navigate>
                        <x-icon name="shield" class="h-3.5 w-3.5" /> {{ __('settings.twofa_setup') }}
                    </x-btn>
                @endif
            </div>
        </div>
    </x-panel>

    <livewire:settings.webauthn-keys />

    <p class="flex items-start gap-2 px-1 font-mono text-[11px] text-ink-4">
        <x-icon name="shield" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
        <span>{{ __('settings.recovery_note') }}</span>
    </p>
</div>
