<div class="bg-white shadow-xl sm:rounded-lg">
    <div class="p-6 sm:px-20">

        <div class="my-6">
            <h3 class="text-lg font-medium text-theme-primary">
                @if ($this->enabled)
                    {{ __('You have now enabled two factor authentication') }}
                @else
                    {{ __('You have not enabled two factor authentication') }}
                @endif
            </h3>

            @if (!$this->enabled)
                <div class="mt-3 text-sm text-theme-secondary">
                    <p>
                        {{ __('This is a security risk since you can manage profiles with critical permissions. You should enable two factor authentication now.') }}
                    </p>
                </div>
                <div class="mt-3 text-right">
                    <x-jetstream.button type="button" wire:click="redirectToSettings" wire:loading.attr="disabled">
                        {{ __('Enable') }}
                    </x-jetstream.button>
                </div>
            @endif
        </div>
    </div>
</div>