{{page-title "Account Auth"}}
<Layout::Section::Header @title="Account Auth" />

<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="Change Password" @open={{true}} @wrapperClass="bordered-classic">
                <form id="change-password-form" aria-label="change-password" {{on "submit" (perform this.changePassword)}}>
                    <legend class="mb-3">Change Password</legend>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <InputGroup @name="Enter new Password" @type="password" @value={{this.newPassword}} />
                        <InputGroup @name="Confirm Password" @type="password" @value={{this.newConfirmPassword}} />
                    </div>
                    <Button @type="primary" @buttonType="submit" @text="Confirm & Change Password" @icon="save" {{on "click" (perform this.changePassword)}} />
                </form>
            </ContentPanel>

            {{#if this.isSystemTwoFaEnabled}}
                <ContentPanel @title="2FA Settings" @open={{true}} @wrapperClass="bordered-classic">
                    <div class="mb-3">
                        {{#if this.loadUserTwoFaSettings.isIdle}}
                            <TwoFaSettings @twoFaMethods={{this.methods}} @twoFaSettings={{this.twoFaSettings}} @onTwoFaToggled={{this.onTwoFaToggled}} @onTwoFaMethodSelected={{this.onTwoFaMethodSelected}} />
                        {{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.saveTwoFactorAuthSettings}} @isLoading={{this.saveUserTwoFaSettings.isRunning}} />
                </ContentPanel>
            {{/if}}
        </div>
    </div>
    <Spacer @height="500px" />
</Layout::Section::Body>