pediatric-ai-scribe-v3/public/components/settings.html

        <div class="module-header">
          <h2><i class="fas fa-cog"></i> Settings</h2>
          <p>Account security, integrations, and personal templates</p>
        </div>

        <div class="settings-page">

          <!-- 2FA -->
          <div class="settings-section card">
            <h3><i class="fas fa-shield-halved"></i> Two-Factor Authentication</h3>
            <p id="2fa-status">Status: Loading...</p>
            <button id="btn-setup-2fa" class="btn-sm btn-primary">Enable 2FA</button>
            <button id="btn-disable-2fa" class="btn-sm btn-ghost hidden">Disable 2FA</button>
            <div id="2fa-setup" class="hidden">
              <p>Scan this QR code with your authenticator app:</p>
              <img id="2fa-qr" src="" alt="QR Code">
              <p>Or enter manually: <code id="2fa-secret"></code></p>
              <div class="form-group">
                <label>Enter the 6-digit code to verify:</label>
                <input type="text" id="2fa-verify-code" maxlength="6" placeholder="123456">
                <button id="btn-verify-2fa" class="btn-sm btn-success">Verify & Enable</button>
              </div>
            </div>
          </div>

          <!-- Nextcloud -->
          <div class="settings-section card">
            <h3><i class="fas fa-cloud"></i> Nextcloud Integration</h3>
            <p>Export generated documents to your Nextcloud.</p>
            <div id="nc-status">Not connected</div>
            <div class="form-group">
              <label>Nextcloud URL</label>
              <input type="text" id="nc-url" placeholder="https://cloud.example.com">
            </div>
            <div class="form-group">
              <label>Username</label>
              <input type="text" id="nc-user" placeholder="your-username">
            </div>
            <div class="form-group">
              <label>App Password</label>
              <input type="password" id="nc-pass" placeholder="Generate in Nextcloud → Settings → Security">
              <small>Go to Nextcloud → Settings → Security → Create new app password</small>
            </div>
            <button id="btn-nc-connect" class="btn-sm btn-primary">Connect</button>
            <button id="btn-nc-disconnect" class="btn-sm btn-ghost hidden">Disconnect</button>
          </div>

          <!-- My Templates / Memories -->
          <div class="settings-section card">
            <h3><i class="fas fa-book-medical"></i> My Templates</h3>
            <p style="font-size:13px;color:var(--g600);">Save reusable templates for physical exam, ROS, encounter format, etc. The AI will use these when generating notes. You can reference them by saying "use my normal physical exam" in dictation.</p>
            <div style="margin-bottom:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
              <select id="mem-category" style="font-size:13px;padding:5px 8px;border:1px solid var(--g300);border-radius:6px;">
                <option value="physical_exam">Physical Exam Template</option>
                <option value="ros">Review of Systems Template</option>
                <option value="encounter_format">Encounter Note Format</option>
                <option value="family_history">Family History Format</option>
                <option value="assessment_plan">Assessment &amp; Plan Format</option>
                <option value="custom">Custom</option>
              </select>
              <input type="text" id="mem-name" style="font-size:13px;padding:5px 8px;border:1px solid var(--g300);border-radius:6px;flex:1;min-width:150px;" placeholder="Template name (e.g. Normal PE)">
            </div>
            <textarea id="mem-content" rows="5" style="width:100%;font-size:12px;padding:8px;border:1px solid var(--g300);border-radius:6px;resize:vertical;box-sizing:border-box;" placeholder="Paste your template here. Example: HEENT: Normocephalic, atraumatic. Eyes: PERRL. Ears: TMs clear. Throat: clear..."></textarea>
            <div style="margin-top:8px;display:flex;gap:8px;">
              <button id="btn-mem-save" class="btn-sm btn-primary"><i class="fas fa-plus"></i> Add Template</button>
            </div>
            <div id="mem-list" style="margin-top:12px;display:flex;flex-direction:column;gap:6px;">
              <p style="color:var(--g400);font-size:13px;">Loading templates...</p>
            </div>
          </div>

          <!-- Saved Encounters -->
          <div class="settings-section card">
            <h3><i class="fas fa-floppy-disk"></i> Saved Encounters</h3>
            <p style="font-size:13px;color:var(--g600);">Encounters are automatically deleted after 7 days per site policy.</p>
            <div id="saved-enc-list" style="display:flex;flex-direction:column;gap:6px;">
              <p style="color:var(--g400);font-size:13px;">Loading...</p>
            </div>
          </div>

          <!-- HIPAA -->
          <div class="settings-section card">
            <h3><i class="fas fa-lock"></i> HIPAA & Privacy</h3>
            <div class="hipaa-info">
              <p><strong>Current Status:</strong> This tool processes data through third-party AI APIs.</p>
              <ul>
                <li>✅ All connections use HTTPS/TLS encryption</li>
                <li>✅ Authentication required</li>
                <li>✅ No patient data stored on server</li>
                <li>✅ 2FA available</li>
                <li>⚠️ OpenRouter does not currently offer BAA</li>
                <li>⚠️ For full HIPAA: use Azure OpenAI or AWS Bedrock with BAA</li>
              </ul>
              <p><strong>Recommendation:</strong> Do not enter real PHI until your organization has executed BAAs with all AI providers.</p>
            </div>
          </div>

        </div>