<div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
    <form role="form">
        <div class="panel panel-default">
            <header class="panel-heading">
                <strong class="panel-title">Set Up Multi-Factor Authentication</strong>
            </header>

            <section class="panel-body">
                <FwNotifications @outlet="mfa-setup" />
                <p>
                <strong>Account:</strong>
                {{model.account}}
                </p>
                <p>
                <strong>User ID:</strong>
                {{model.userId}}
                </p>
               <p>Scan the QR code below with your authenticator app.</p>
                {{#if model.qrCode}}
                <img
                    src={{model.qrCode}}
                    alt="MFA QR Code"
                    style="width:100%;max-width:200px;height:auto;"
                    />
                {{/if}}
                <p class="small text-muted">
                    Can't scan? Enter this code manually:
                </p>
                <div class="input-group">
                    <input
                        type={{if showSecret "text" "password"}}
                        class="form-control"
                        value={{model.secret}}
                        readonly
                    >
                    <span class="input-group-btn">
                        <button
                            type="button"
                            class="btn btn-default"
                            {{action "toggleSecret"}}
                        >
                        {{if showSecret "Hide" "Show"}}
                        </button>
                        <button
                            type="button"
                            class="btn btn-default"
                            {{action "copySecret"}}
                        >
                            <i class="fa-regular fa-clipboard" aria-hidden="true"></i>
                            Copy 
                        </button>
                    </span>
                </div>

                <hr>

                <p>Enter the 6-digit code to verify setup:</p>

            <Input
                @value={{model.code}}
                class="form-control"
                placeholder="123456"
            />
            </section>

            <footer class="panel-footer clearfix">
                <FwPromiseButton
                    @promise={{action "verifySetup"}}
                    @type="submit"
                    @class="pull-left btn btn-sm btn-primary"
                >
                <i class="fa-solid fa-check" aria-hidden="true"></i>
                    Verify & Enable
                </FwPromiseButton>

                <LinkTo @route="login" class="pull-right btn btn-sm btn-danger">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    Cancel
                </LinkTo>
            </footer>
        </div>
    </form>
</div>