{{page-title "2FA Config"}}
<Layout::Section::Header @title="2FA Config">
    <Button @type="primary" @size="sm" @icon="save" @text={{t "common.save-changes"}} @onClick={{this.saveSettings}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
</Layout::Section::Header>

<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-4">
            <ContentPanel @title="2FA Config" @open={{true}} @wrapperClass="bordered-classic">
                {{#if this.loadSystemTwoFaConfig.isIdle}}
                    <TwoFaSettings
                        @showEnforceOption={{true}}
                        @twoFaMethods={{this.methods}}
                        @twoFaSettings={{this.twoFaSettings}}
                        @onTwoFaToggled={{this.onTwoFaToggled}}
                        @onTwoFaMethodSelected={{this.onTwoFaMethodSelected}}
                        @onTwoFaEnforcedToggled={{this.onTwoFaEnforceToggled}}
                        @isLoading={{this.isLoading}}
                    />
                {{else}}
                    <div class="flex items-center justify-center p-4">
                        <Spinner @loadingMessage="Loading 2FA Config..." @wrapperClass="flex flex-row" @iconClass="mr-2" />
                    </div>
                {{/if}}
            </ContentPanel>
        </div>
    </div>
    <Spacer @height="300px" />
</Layout::Section::Body>