{{-- Modal: Authenticator App Setup --}}
<div class="modal fade" id="authenticatorSetupModal" tabindex="-1" aria-labelledby="authenticatorSetupModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="authenticatorSetupModalLabel">
                    <i class="ti ti-shield-lock me-2"></i>Set Up Authenticator App
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                {{-- Step 1: Install App --}}
                <div class="mb-4">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="badge bg-primary rounded-pill">1</span>
                        <h6 class="mb-0">Install an Authenticator App</h6>
                    </div>
                    <p class="text-muted small mb-2">Download and install one of the following authenticator apps on your mobile device:</p>
                    <div class="d-flex flex-wrap gap-2">
                        <span class="badge bg-label-primary"><i class="ti ti-brand-google me-1"></i>Google Authenticator</span>
                        <span class="badge bg-label-info"><i class="ti ti-brand-windows me-1"></i>Microsoft Authenticator</span>
                        <span class="badge bg-label-dark"><i class="ti ti-lock me-1"></i>Authy</span>
                    </div>
                </div>

                <hr>

                {{-- Step 2: Scan QR Code --}}
                <div class="mb-4">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="badge bg-primary rounded-pill">2</span>
                        <h6 class="mb-0">Scan QR Code</h6>
                    </div>
                    <p class="text-muted small mb-3">Open your authenticator app and scan the QR code below, or enter the setup key manually.</p>
                    <div class="text-center mb-3">
                        {{-- Placeholder QR code (static UI) --}}
                        <div class="d-inline-flex align-items-center justify-content-center border rounded p-3" style="width: 180px; height: 180px; background: #f8f9fa;">
                            <div class="text-center">
                                <i class="ti ti-qrcode" style="font-size: 5rem; color: #697a8d;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="bg-light rounded p-3">
                        <label class="form-label small fw-semibold mb-1">Setup Key (Manual Entry)</label>
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control font-monospace" value="JBSW Y3DP EHPK 3PXP L4XT GZKD" readonly>
                            <button type="button" class="btn btn-outline-primary" title="Copy to clipboard">
                                <i class="ti ti-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <hr>

                {{-- Step 3: Verify Code --}}
                <div>
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="badge bg-primary rounded-pill">3</span>
                        <h6 class="mb-0">Verify Code</h6>
                    </div>
                    <p class="text-muted small mb-2">Enter the 6-digit code from your authenticator app to verify the setup.</p>
                    <div class="d-flex gap-2 justify-content-center mb-3">
                        <input type="text" class="form-control text-center fw-bold" maxlength="1" style="width: 46px; height: 46px; font-size: 1.25rem;" placeholder="·">
                        <input type="text" class="form-control text-center fw-bold" maxlength="1" style="width: 46px; height: 46px; font-size: 1.25rem;" placeholder="·">
                        <input type="text" class="form-control text-center fw-bold" maxlength="1" style="width: 46px; height: 46px; font-size: 1.25rem;" placeholder="·">
                        <input type="text" class="form-control text-center fw-bold" maxlength="1" style="width: 46px; height: 46px; font-size: 1.25rem;" placeholder="·">
                        <input type="text" class="form-control text-center fw-bold" maxlength="1" style="width: 46px; height: 46px; font-size: 1.25rem;" placeholder="·">
                        <input type="text" class="form-control text-center fw-bold" maxlength="1" style="width: 46px; height: 46px; font-size: 1.25rem;" placeholder="·">
                    </div>
                </div>

                {{-- Recovery Codes Notice --}}
                <div class="alert alert-warning d-flex align-items-start gap-2 mb-0 mt-3">
                    <i class="ti ti-alert-triangle mt-1"></i>
                    <div>
                        <strong>Important:</strong> After enabling 2FA, you will receive recovery codes. Store them in a safe place — they can be used to access your account if you lose your authenticator device.
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">
                    <i class="ti ti-shield-check me-1"></i> Enable 2FA
                </button>
            </div>
        </div>
    </div>
</div>