<div class="col-sm-12 col-md-8 col-lg-4 col-md-offset-2 col-lg-offset-4">
    <form role="form">
        <div class="panel panel-default">
            <header class="panel-heading">
                <strong class="panel-title">Multi-Factor Authentication</strong>
            </header>

            <section class="panel-body">
                <FwNotifications @outlet="mfa" />

                <p>Please enter your 6-digit authentication code.</p>

                <p class="text-muted small">
                    Open your authenticator app (Google Authenticator, Microsoft Authenticator, etc.)
                </p>

               <div class="form-group">
            <label class="control-label">
                Authentication Code
            </label>

            <Input
                @value={{this.code}}
                class="form-control"
                placeholder="123456"
            />
        </div>
        <div class="form-group">
            <label>
                <Input
                @type="checkbox"
                @checked={{this.trustDevice}}
                />
                Remember this device
            </label>
        </div>
            </section>

            <footer class="panel-footer clearfix">
                <FwPromiseButton
                    @id="mfaButton"
                    @promise={{action "verify"}}
                    @type="submit"
                    @class="pull-left btn btn-sm btn-primary"
                >
                    <i class="fa-solid fa-shield-halved"></i>
                    Verify
                </FwPromiseButton>

                <LinkTo @route="login" class="pull-right btn btn-sm btn-default">
                    <i class="fa-solid fa-backward-step"></i>
                    Back to Login
                </LinkTo>
            </footer>
        </div>
    </form>
</div>