{{page-title "TwoFa"}}
<Layout::Section::Header @title="2FA" />

<Layout::Section::Body class="overflow-y-scroll h-full">
    <div class="container mx-auto h-screen">
        <div class="max-w-3xl my-10 mx-auto space-y-6">
            <ContentPanel @title="2FA Settings" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <div class="mb-3">
                    {{#if this.loadCompanyTwoFaSettings.isIdle}}
                        <TwoFaSettings
                            @showEnforceOption={{true}}
                            @showMethodSelection={{false}}
                            @twoFaMethods={{this.methods}}
                            @twoFaSettings={{this.twoFaSettings}}
                            @onTwoFaToggled={{this.onTwoFaToggled}}
                            @onTwoFaMethodSelected={{this.onTwoFaMethodSelected}}
                            @onTwoFaEnforcedToggled={{this.onTwoFaEnforceToggled}}
                        />
                    {{else}}
                        <div class="flex items-center justify-center p-4">
                            <Spinner @loadingMessage="Loading User 2FA Settings..." @wrapperClass="flex flex-row" @iconClass="mr-2" />
                        </div>
                    {{/if}}
                </div>
                <Button
                    @type="primary"
                    @buttonType="submit"
                    @text="Save 2FA Settings"
                    @icon="save"
                    @onClick={{this.saveTwoFactor}}
                    @isLoading={{this.enforceTwoFaForCompanyUsers.isRunning}}
                />
            </ContentPanel>
        </div>
    </div>
    <Spacer @height="300px" />
</Layout::Section::Body>