<div ng-controller="mfa" class="jb-list-backups-container jb-grey-0">

    <div class="row" navigation active="menuItem"></div>
    <div class="row rounded-4 jb-white-0 jb-panel-row shadow-lg">

        <!-- Main Title Section -->
        <div class="jb-main-title rounded-3">
           {{ isFirstTime ? lang.t("Enable Multi-Factor Authentication (MFA)") : lang.t("Multi-Factor Authentication (MFA)") }}
            <p>{{ isFirstTime ? lang.t("Secure your plugin by enabling MFA. Scan the QR code below and enter the generated code to activate MFA for your account.") : lang.t("This account has MFA protection enabled.") }}</p>
        </div>

        <div class="row justify-content-center">
            <!-- MFA Activation for First Time Users -->
            <div ng-if="isFirstTime" class="col-md-6 p-4 rounded bg-white">

                <!-- QR Code Section -->
                <div class="text-center mb-4">
                    <h5 class="fw-semibold">{{ lang.t("Scan the QR Code") }}</h5>
                    <p class="text-muted">{{ lang.t("Use your preferred authenticator app to scan the QR code below:") }}</p>
                    <div class="border rounded p-3">
                        <img ng-src="{{qrCode}}" alt="{{ lang.t('QR Code') }}" class="img-fluid">
                    </div>
                </div>

                <!-- Input Section -->
                <div class="mb-4">
                    <h5 class="fw-semibold">{{ lang.t("Enter the Code") }}</h5>
                    <p class="text-muted">{{ lang.t("After scanning the QR code, enter the 6-digit code generated by your authenticator app below:") }}</p>
                    <div class="input-group">
                        <input type="text" max="6" class="form-control" placeholder="{{ lang.t('Enter MFA Code') }}" ng-model="mfaCode">
                    </div>
                    <small class="text-muted d-block mt-2">{{ lang.t("Ensure the code is entered before it expires in your app.") }}</small>
                </div>


                <!-- Action Buttons -->
                <div class="text-center">
                    <button class="btn btn-primary w-100 jb_button"
                            ng-click="validateMFA(mfaCode)"
                            ng-disabled="isValidating">
                        <span ng-if="isValidating" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                        {{ lang.t("Activate MFA") }}
                    </button>
                    <button class="btn btn-outline-secondary w-100 mt-2"
                            ng-click="skipMfa()"
                            ng-disabled="isSkipping">
                        <span ng-if="isSkipping" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                        {{ lang.t("Skip for Now") }}
                    </button>
                </div>

            </div>

            <!-- MFA Validation for Existing Users -->
            <div ng-if="!isFirstTime" class="col-md-6 p-4 rounded bg-white">

                <!-- Input Section -->
                <div class="mb-4">
                    <h5 class="fw-semibold">{{ lang.t("Enter the Code") }}</h5>
                    <div class="input-group">
                        <input type="text" max="6" class="form-control" placeholder="{{ lang.t('Enter MFA Code') }}" ng-model="mfaCode">
                    </div>
                    <small class="text-muted d-block mt-2">{{ lang.t("Ensure the code is entered before it expires in your app.") }}</small>
                </div>

                <!-- Action Buttons -->
                <div class="text-center">
                    <button class="btn btn-primary w-100 jb_button"
                            ng-click="validateMFA(mfaCode)"
                            ng-disabled="isValidating">
                        <span ng-if="isValidating" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                        {{ lang.t("Validate MFA") }}
                    </button>
                </div>



            </div>

        </div>

    </div>
</div>