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>

          <!-- Compliance -->
          <div class="settings-section card">
            <h3><i class="fas fa-shield-halved"></i> Compliance & Usage</h3>
            <div class="hipaa-info">
              <p><strong>AWS Bedrock</strong> is available with a Business Associate Agreement (BAA) for HIPAA-eligible workloads.</p>
              <ul>
                <li>✅ All connections use HTTPS/TLS encryption</li>
                <li>✅ Authentication with optional 2FA</li>
                <li>✅ No patient data stored on server beyond session</li>
                <li>✅ AWS Bedrock supports BAA for HIPAA compliance</li>
                <li>✅ Azure OpenAI supports BAA for HIPAA compliance</li>
              </ul>
              <p><strong>Important:</strong> Check with your institution's guidelines and policies before use. This tool is not intended for production clinical use without proper organizational authorization and provider BAAs in place. Use with caution.</p>
            </div>
          </div>

        </div>