diff --git a/src/lib/element_qr_scanner backup.svelte b/src/lib/element_qr_scanner backup.svelte
new file mode 100644
index 00000000..25f8e88d
--- /dev/null
+++ b/src/lib/element_qr_scanner backup.svelte	
@@ -0,0 +1,543 @@
+<script lang="ts">
+// *** Import Svelte core
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+// import 'html5-qrcode';
+import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from 'html5-qrcode';
+
+// *** Import Aether core variables and functions
+import { api } from '$lib/api';
+import { ae_api } from '$lib/ae_stores';
+
+// *** Import Aether core components
+// import Element_input from './element_input.svelte';
+// import ae from '/element_input.svelte';
+// import Input_element from '/element_input.svelte';
+
+// *** Import Aether module variables and functions
+
+// *** Import Aether module components
+
+// *** Export/Exposed variables and functions for component
+export let start_qr_scanner: boolean = true;
+export let show_pause_btn: boolean = false; // pause and resume buttons
+export let show_qr_manual_text_entry_option: boolean = false;
+export let show_qr_manual_badge_id_entry_option: boolean = false;
+export let show_qr_scan_result: boolean = true;
+
+export let qr_fps = 15;
+export let qr_viewfinder_width = 275; // 275 seems good... Need to not let the this be larger than the container which changes based on the width of the screen/window.
+export let qr_facing_mode = 'environment'; // environment, user, { exact: 'environment'}, { exact: 'user'}
+
+// *** Set initial variables
+let scanning_status: string = 'not_started';
+let qr_scan_result: null|string = null;
+let qr_found_text: null|string = null;
+let qr_entered_text: null|string = null;
+let qr_entered_badge_id: null|string = null;
+let show_qr_manual_entry: null|boolean = null;
+let disable_submit_badge_id_btn: boolean = true;
+
+let user_media_status = 'not_requested';
+
+
+// let max_results: number = 50;
+
+const dispatch = createEventDispatcher();
+
+let html5_qr_code: any|null|string = null;
+// let html5_qr_code = new Html5Qrcode(
+//     'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
+// );
+
+// let qr_scan_cfg = { fps: 10, qrbox: 400 }; // default was 250 and using 300 when 600px
+let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good... Need to not let the this be larger than the container which changes based on the width of the screen/window.
+
+// let mounted = false;
+
+
+onMount(() => {
+    console.log('** Element Mounted: ** QR Scanner');
+
+    // NOTE: We only want to trigger the scanning to start after the page has fully loaded.
+    navigator.mediaDevices.getUserMedia({video: true})
+    .then(successCallback, errorCallback);
+
+    // NOTE: This can only be done after the page has fully loaded.
+    // if (start_qr_scanner) {
+    //     handle_start_qr_scanning();
+    // }
+});
+
+
+onDestroy(async () => {
+    console.log('** Element Destroyed: ** QR Scanner');
+
+    qr_scan_result = null;
+    qr_found_text = null;
+
+    await handle_stop_qr_scanning();
+});
+
+
+var successCallback = function(error: any) {
+    console.log('Camera access allowed');
+    user_media_status = 'allowed';
+
+    // let subject = 'Camera Access Allowed';
+    // let message = error;
+    // send_init_confirm_email(subject, message);
+
+    dispatch('qr_camera', {
+        status: 'allowed',
+    });
+
+    // NOTE: This can only be done after the page has fully loaded.
+    if (start_qr_scanner) {
+        handle_start_qr_scanning();
+    }
+};
+var errorCallback = function(error: any) {
+    if (error.name == 'NotAllowedError') {
+        console.log('Camera access not allowed!');
+        user_media_status = 'denied';
+
+        // let subject = 'Camera Access Denied';
+        // let message = error;
+        // send_init_confirm_email(subject, message);
+
+        dispatch('qr_camera', {
+            status: 'denied',
+        });
+    }
+};
+
+
+// $: if (mounted && start_qr_scanner) {
+//     console.log('START QR SCANNING');
+//     handle_start_qr_scanning();
+// } else if (mounted && !start_qr_scanner) {
+//     console.log('STOP QR SCANNING');
+//     handle_stop_qr_scanning();
+// }
+
+
+async function handle_start_qr_scanning() {
+    console.log('*** handle_start_qr_scanning() ***');
+
+    if (user_media_status == 'denied') {
+        console.log('Camera access not allowed!');
+        return;
+    } else if (user_media_status == 'not_requested') {
+        console.log('Camera access not requested yet!');
+        return;
+    }
+
+    qr_scan_result = null;
+    qr_found_text = null;
+
+    if (html5_qr_code) {
+        console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...');
+        // html5_qr_code.clear();
+        // document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
+
+        html5_qr_code = new Html5Qrcode(
+            'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
+        );
+    } else {
+        console.log('html5_qr_code not found. Creating new Html5Qrcode...');
+        html5_qr_code = new Html5Qrcode(
+            'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
+        );
+    }
+
+    if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
+        // console.log('Scanner is not started');
+
+        return await html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error)
+        .then((ignore: any) => {
+            console.log('Scanning has started');
+            scanning_status = 'scanning';
+
+            // let subject = 'QR Scanning Started';
+            // let message = ignore;
+            // send_init_confirm_email(subject, message);
+
+            return true;
+        }).catch((err) => {
+            console.log('There was an error while trying to start the QR scanner');
+            scanning_status = 'start_error';
+
+            let subject = 'QR Scanning Start Error';
+            let message = err;
+            send_init_confirm_email(subject, message);
+
+            return false;
+        });
+
+
+    } else {
+        console.log('Scanner is already started');
+        return;
+    }
+
+    
+}
+
+
+function handle_pause_qr_scanning() {
+    if (html5_qr_code && html5_qr_code.getState() != Html5QrcodeScannerState.SCANNING) {
+        console.log('Scanner is not scanning!');
+        return;
+    }
+
+    html5_qr_code.pause();
+    scanning_status = 'paused';
+}
+
+function handle_resume_qr_scanning() {
+    if (html5_qr_code && html5_qr_code.getState() != Html5QrcodeScannerState.PAUSED) {
+        console.log('Scanner is not paused!');
+        return;
+    }
+
+    document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
+    html5_qr_code.resume();
+    scanning_status = 'scanning';
+}
+
+
+async function handle_stop_qr_scanning() {
+    start_qr_scanner = false;
+
+    if (!html5_qr_code) {
+        console.log('html5_qr_code object found. Nothing to stop?');
+        return false;
+    }
+    
+    let state = html5_qr_code.getState();
+    console.log('html5_qr_code state:', state);
+
+    if (state == Html5QrcodeScannerState.NOT_STARTED) {
+        console.log('Scanner is not started');
+        return;
+    }
+
+    if (state == Html5QrcodeScannerState.PAUSED || state == Html5QrcodeScannerState.SCANNING) {
+        console.log('Scanner is not started');
+        await html5_qr_code.stop()
+        scanning_status = 'not_started';
+        return;
+    }
+
+    await html5_qr_code.clear();
+    return true;
+
+    // html5_qr_code.pause();
+
+    // return html5_qr_code.stop()
+    // .then((ignore) => {
+    //     console.log('Scanning has stopped');
+    //     // document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
+    //     scanning_status = 'not_started';
+    // }).then((ignore) => {
+    //     // html5_qr_code = null;
+    //     // html5_qr_code.clear();
+    // }).catch((err) => {
+    //     console.log('There was an error while trying to stop the scanning');
+    //     return false;
+    // });
+
+    // html5_qr_code = null;
+}
+
+
+// Callback function for QrcodeSuccessCallback (decodedText: string, result: Html5QrcodeResult)
+function handle_qr_scan_success(decoded_text, decoded_result) {
+    console.log('*** handle_qr_scan_success() ***');
+
+    console.log(`QR scanned = ${decoded_text}`, decoded_result);
+
+    qr_scan_result = decoded_text; // NOTE: decoded_result is not currently used by html5-qrcode
+    qr_found_text = decoded_text;
+
+    dispatch('qr_scan_result', {
+        result: qr_scan_result, // This text will need to be parsed to get more info.
+        text: qr_found_text, // This text will need to be parsed to get more info.
+        entry_method: 'QR',
+    });
+
+    // handle_pause_qr_scanning();
+    handle_stop_qr_scanning();
+}
+
+
+// Callback function for QrcodeErrorCallback (errorMessage: string, error: Html5QrcodeError)
+// NOTE: Most of the time this is normal and not an actual error. It just did not find something to scan.
+function handle_qr_scan_error(qr_error_message, qr_code_error) {
+    // console.log('*** handle_qr_scan_error() ***');
+
+    if (qr_code_error.type) {
+        console.log(`Error scanning code = ${qr_error_message}`, qr_code_error);
+        return;
+    }
+}
+
+
+$: if ( qr_entered_badge_id && qr_entered_badge_id.length >= 11 && qr_entered_badge_id && qr_entered_badge_id.length <= 14) {
+    disable_submit_badge_id_btn = false;
+} else {
+    disable_submit_badge_id_btn = true;
+}
+
+
+function handle_qr_manual_entry() {
+    console.log('*** handle_qr_manual_entry() ***');
+
+    if (qr_entered_text) {
+        console.log(`QR entered text = ${qr_entered_text}`);
+    } else if (qr_entered_badge_id) {
+        console.log(`QR entered badge ID = ${qr_entered_badge_id}`);
+        qr_entered_text = `OBJ:ot:event_badge,oi:${qr_entered_badge_id}`;
+        console.log(`Parse to proper QR badge ID = ${qr_entered_text}`);
+    }
+
+    // html5_qr_code.stop().then((ignore) => {
+    //     console.log('Scanning has stopped');
+    //     document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
+    // }).catch((err) => {
+    //     console.log('There was an error while trying to stop the scanning');
+    // });
+
+    qr_scan_result = qr_entered_text;
+
+    dispatch('qr_scan_result', {
+        result: qr_scan_result,
+        entry_method: 'manual',
+    });
+
+    qr_scan_result = null;
+    qr_entered_text = null;
+}
+
+
+
+
+
+function send_init_confirm_email(subject, message) {
+    console.log(`*** send_init_confirm_email() *** ${subject}`);
+
+    let to_email = 'scott.idem+skdev@oneskyit.com';
+
+    // let origin_url = encodeURI(`${data.url.origin}`);
+
+    let full_subject = `${subject} Aether QR Scanner Debugging`;
+
+    let body_html = `
+    <div>Scott,
+    <p>This is an automatic debug email from the Aether QR scanner.</p>
+    </div>
+
+    <br>
+
+    <div>
+    Message:<br>
+    <pre>
+    ${JSON.stringify(message)}
+    </pre>
+    </div>
+    `;
+
+    api.send_email({
+        api_cfg: $ae_api,
+        from_email: 'noreply+ae_qr_debug@oneskyit.com',
+        from_name: 'AE QR Debug',
+        to_email: to_email,
+        subject: full_subject,
+        body_html: body_html,
+    });
+}
+
+
+</script>
+
+
+<section
+    class="ae_element qr_scanner border-2 border-slate-500/10 space-y-2 flex flex-col gap-1 justify-center items-center min-w-full max-w-full"
+    class:not_started={scanning_status == 'not_started'}
+    class:paused={scanning_status == 'paused'}
+    class:scanning={scanning_status == 'scanning'}
+    >
+
+    <!-- <header>
+        <h2>QR Scanner</h2>
+    </header> -->
+
+    <!-- <fieldset class=""> -->
+        <!-- <legend class="d_none">QR Scanner:</legend> -->
+
+        <div
+            class="ae_container qr_scanning_container"
+            >
+            <div
+                class="ae_options m-1"
+                >
+            {#if scanning_status == 'not_started' }
+                    <button on:click={handle_start_qr_scanning} class="btn btn-lg variant-soft-primary btn_start"><span class="fas fa-qrcode mx-1"></span> Start Scanning</button>
+                    <span class="loading-text">
+                        Scanning stopped
+                    </span>
+            {:else if scanning_status == 'paused' && show_pause_btn}
+                    <button on:click={handle_resume_qr_scanning} class="btn btn-md variant-soft-primary btn_resume"><span class="fas fa-play"></span> Resume</button>
+                    <span>Scanning paused</span>
+            {:else if scanning_status == 'scanning'}
+                    <button on:click={handle_stop_qr_scanning} class="btn btn-md variant-soft-secondary btn_stop">
+                        <span class="fas fa-crosshairs fa-spin opacity-50 m-1"></span>
+                        <!-- <span class="fas fa-stop-circle m-1"></span> -->
+                        Stop
+                    </button>
+                    {#if show_pause_btn}
+                        <button on:click={handle_pause_qr_scanning} class="btn btn-lg variant-soft-secondary btn_pause"><span class="fas fa-pause-circle"></span> Pause</button>
+                    {/if}
+                    <!-- <span>Scanning for QR code...</span> -->
+                    <!-- <div class="modal-loading"> -->
+                        <!-- <span class="fas fa-crosshairs fa-spin opacity-50"></span> -->
+                        <span class="loading-text">
+                            Scanning for QR code...
+                        </span>
+                    <!-- </div> -->
+            {/if}
+            </div>
+
+            <div id="qr_scanner_viewfinder" class="qr_scanner_viewfinder grow flex flex-col justify-center items-center" style=""></div> <!-- width: 600px -->
+        </div>
+
+        {#if show_qr_manual_text_entry_option}
+        <div class="ae_container qr_manual_entry text_entry">
+            {#if show_qr_manual_entry}
+                <label for="entered_text" class="">Enter text</label>
+                <input type="text" name="entered_text" id="entered_text" bind:value="{qr_entered_text}">
+                <button on:click={handle_qr_manual_entry} class="btn btn-md variant-soft-warning"><span class="fas fa-paper-plane"></span> Submit Text</button>
+
+
+                <div class="search_by_text">
+                    <input type='text' placeholder="Name or Email" label="Name or Email" value={search_query_str} focus={true} on:oninput={handle_oninput_search_query_str} />
+                </div>
+
+            {:else}
+                <button on:click={() => show_qr_manual_entry=true} class="btn btn-md variant-soft-warning"><span class="fas fa-keyboard"></span> Enter Text</button>
+            {/if}
+        </div>
+        {/if}
+
+        {#if show_qr_manual_badge_id_entry_option}
+        <div class="ae_container qr_manual_entry badge_id_entry">
+            {#if show_qr_manual_entry}
+                <form on:submit|preventDefault={() => handle_qr_manual_entry} class="flex">
+
+                    <!-- <label for="entered_badge_id" class="">Enter badge ID</label>
+                    <input type="text" name="entered_badge_id" id="entered_badge_id" bind:value="{qr_entered_badge_id}"> -->
+
+                    <input
+                        bind:value="{qr_entered_badge_id}"
+                        type="text"
+                        name="entered_badge_id"
+                        id="entered_badge_id"
+                        required
+                        placeholder="Enter Badge ID"
+                        class="input max-w-52"
+                        />
+
+                    <button
+                        type="submit"
+                        on:click={handle_qr_manual_entry}
+                        disabled={disable_submit_badge_id_btn}
+                        class="btn btn-md variant-ghost-primary m-1"
+                        class:btn_default={disable_submit_badge_id_btn}
+                        class:btn_primary={!disable_submit_badge_id_btn}
+                        >
+                        <span class="fas fa-paper-plane mx-1"></span> Submit Badge ID
+                    </button>
+
+                </form>
+            {:else}
+            <button on:click={() => show_qr_manual_entry=true} class="btn btn-md variant-soft-secondary m-1"><span class="fas fa-keyboard mx-1"></span> Enter Badge ID</button>
+            {/if}
+        </div>
+        {/if}
+
+        {#if show_qr_scan_result && qr_scan_result}
+        <div class="ae_container qr_scan_result">
+            <span class="label">Raw Result:</span>
+            <span id="qr_scan_result_value" class="value">{qr_scan_result}</span>
+        </div>
+        {/if}
+    <!-- </fieldset> -->
+
+</section>
+
+
+<style>
+.not_started {
+    background-color: hsla(0, 100%, 75%, 0.3);
+    border-color: hsla(0, 100%, 75%, 0.6);
+}
+.paused {
+    background-color: hsla(60, 100%, 75%, 0.3);
+    border-color: hsla(60, 100%, 75%, 0.6);
+}
+.scanning {
+    background-color: hsla(120, 100%, 75%, 0.3);
+    border-color: hsla(120, 100%, 75%, 0.6);
+}
+
+
+.qr_scanner {
+    /* outline: solid thin pink; */
+
+    max-width: 100vw;
+
+    /* overflow-x: scroll; */
+
+    display: flex;
+    flex-direction: column;
+    /* flex-wrap: wrap; */
+
+    justify-content: flex-start;
+    align-items: center; /* center */
+    align-content: stretch;
+}
+
+.ae_element.qr_scanner div.qr_scanner_viewfinder {
+    /* max-width: 100vw; */
+    /* contain: content; */
+    /* contain: contain; */
+}
+
+.qr_scanner .qr_scanner_viewfinder {
+    /* outline: dashed medium blue; */
+    min-width: 400px;
+
+    width: 100%;
+    /* max-width: 100%; */
+    max-width: 500px;
+    /* max-width: 100vw; */
+    /* outline: solid thin red; */
+
+    contain: contain;
+    overflow-x: scroll;
+}
+
+@media (max-width: 767px) {
+    .qr_scanner .qr_scanner_viewfinder {
+        /* outline: dashed medium red; */
+        min-width: 80vw;
+        /* width: 100%; */
+        /* max-width: 100%; */
+        /* max-width: 450px; */
+        max-width: 100vw;
+
+        margin: 0;
+        padding: 0;
+    }
+}
+</style>
diff --git a/src/lib/element_qr_scanner.svelte b/src/lib/element_qr_scanner.svelte
index 25f8e88d..b2bce7d1 100644
--- a/src/lib/element_qr_scanner.svelte
+++ b/src/lib/element_qr_scanner.svelte
@@ -5,8 +5,6 @@ import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from 'html5-qrcode';
 
 // *** Import Aether core variables and functions
-import { api } from '$lib/api';
-import { ae_api } from '$lib/ae_stores';
 
 // *** Import Aether core components
 // import Element_input from './element_input.svelte';
@@ -37,9 +35,6 @@ let qr_entered_badge_id: null|string = null;
 let show_qr_manual_entry: null|boolean = null;
 let disable_submit_badge_id_btn: boolean = true;
 
-let user_media_status = 'not_requested';
-
-
 // let max_results: number = 50;
 
 const dispatch = createEventDispatcher();
@@ -58,52 +53,36 @@ let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good
 onMount(() => {
     console.log('** Element Mounted: ** QR Scanner');
 
-    // NOTE: We only want to trigger the scanning to start after the page has fully loaded.
+    // NOTE: This can only be done after the page has fully loaded. At least that is what my tests have shown so far. -2022-12-02
+    if (start_qr_scanner) {
+        handle_start_qr_scanning();
+    }
+
     navigator.mediaDevices.getUserMedia({video: true})
     .then(successCallback, errorCallback);
-
-    // NOTE: This can only be done after the page has fully loaded.
-    // if (start_qr_scanner) {
-    //     handle_start_qr_scanning();
-    // }
 });
 
 
-onDestroy(async () => {
+onDestroy(() => {
     console.log('** Element Destroyed: ** QR Scanner');
 
     qr_scan_result = null;
     qr_found_text = null;
 
-    await handle_stop_qr_scanning();
+    handle_stop_qr_scanning();
 });
 
 
 var successCallback = function(error: any) {
     console.log('Camera access allowed');
-    user_media_status = 'allowed';
-
-    // let subject = 'Camera Access Allowed';
-    // let message = error;
-    // send_init_confirm_email(subject, message);
 
     dispatch('qr_camera', {
         status: 'allowed',
     });
-
-    // NOTE: This can only be done after the page has fully loaded.
-    if (start_qr_scanner) {
-        handle_start_qr_scanning();
-    }
 };
 var errorCallback = function(error: any) {
     if (error.name == 'NotAllowedError') {
         console.log('Camera access not allowed!');
-        user_media_status = 'denied';
-
-        // let subject = 'Camera Access Denied';
-        // let message = error;
-        // send_init_confirm_email(subject, message);
 
         dispatch('qr_camera', {
             status: 'denied',
@@ -121,24 +100,16 @@ var errorCallback = function(error: any) {
 // }
 
 
-async function handle_start_qr_scanning() {
+function handle_start_qr_scanning() {
     console.log('*** handle_start_qr_scanning() ***');
 
-    if (user_media_status == 'denied') {
-        console.log('Camera access not allowed!');
-        return;
-    } else if (user_media_status == 'not_requested') {
-        console.log('Camera access not requested yet!');
-        return;
-    }
-
     qr_scan_result = null;
     qr_found_text = null;
 
     if (html5_qr_code) {
         console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...');
         // html5_qr_code.clear();
-        // document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
+        document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
 
         html5_qr_code = new Html5Qrcode(
             'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
@@ -150,37 +121,21 @@ async function handle_start_qr_scanning() {
         );
     }
 
-    if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
-        // console.log('Scanner is not started');
+    // if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
+    //     // console.log('Scanner is not started');
+    // } else {
+    //     console.log('Scanner is already started');
+    //     return;
+    // }
 
-        return await html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error)
-        .then((ignore: any) => {
-            console.log('Scanning has started');
-            scanning_status = 'scanning';
-
-            // let subject = 'QR Scanning Started';
-            // let message = ignore;
-            // send_init_confirm_email(subject, message);
-
-            return true;
-        }).catch((err) => {
-            console.log('There was an error while trying to start the QR scanner');
-            scanning_status = 'start_error';
-
-            let subject = 'QR Scanning Start Error';
-            let message = err;
-            send_init_confirm_email(subject, message);
-
-            return false;
-        });
-
-
-    } else {
-        console.log('Scanner is already started');
-        return;
-    }
-
-    
+    html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error).then((ignore: any) => {
+        console.log('Scanning has started');
+        scanning_status = 'scanning';
+        return true;
+    }).catch((err) => {
+        console.log('There was an error while trying to start the QR scanner');
+        return false;
+    });
 }
 
 
@@ -206,46 +161,28 @@ function handle_resume_qr_scanning() {
 }
 
 
-async function handle_stop_qr_scanning() {
-    start_qr_scanner = false;
-
-    if (!html5_qr_code) {
-        console.log('html5_qr_code object found. Nothing to stop?');
-        return false;
-    }
-    
-    let state = html5_qr_code.getState();
-    console.log('html5_qr_code state:', state);
-
-    if (state == Html5QrcodeScannerState.NOT_STARTED) {
+function handle_stop_qr_scanning() {
+    if (html5_qr_code && html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
         console.log('Scanner is not started');
         return;
     }
 
-    if (state == Html5QrcodeScannerState.PAUSED || state == Html5QrcodeScannerState.SCANNING) {
-        console.log('Scanner is not started');
-        await html5_qr_code.stop()
-        scanning_status = 'not_started';
-        return;
-    }
-
-    await html5_qr_code.clear();
-    return true;
+    // qr_scan_result = null;
+    // qr_found_text = null;
 
     // html5_qr_code.pause();
 
-    // return html5_qr_code.stop()
-    // .then((ignore) => {
-    //     console.log('Scanning has stopped');
-    //     // document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
-    //     scanning_status = 'not_started';
-    // }).then((ignore) => {
-    //     // html5_qr_code = null;
-    //     // html5_qr_code.clear();
-    // }).catch((err) => {
-    //     console.log('There was an error while trying to stop the scanning');
-    //     return false;
-    // });
+    html5_qr_code.stop().then((ignore) => {
+        console.log('Scanning has stopped');
+        document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
+        scanning_status = 'not_started';
+    }).then((ignore) => {
+        // html5_qr_code = null;
+        html5_qr_code.clear();
+    }).catch((err) => {
+        console.log('There was an error while trying to stop the scanning');
+        return false;
+    });
 
     // html5_qr_code = null;
 }
@@ -267,7 +204,29 @@ function handle_qr_scan_success(decoded_text, decoded_result) {
     });
 
     // handle_pause_qr_scanning();
+
     handle_stop_qr_scanning();
+
+    // html5_qr_code.stop().then((ignore) => {
+    //     console.log('Scanning has stopped');
+    //     scanning_status = 'not_started';
+    //     document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
+
+    //     qr_scan_result = decoded_text;
+    //     qr_found_text = decoded_text;
+
+    //     dispatch('qr_scan_result', {
+    //         result: qr_scan_result,
+    //         entry_method: 'QR',
+    //     });
+
+    //     // qr_scan_result = null;
+    //     // qr_found_text = null;
+    //     return true;
+    // }).catch((err) => {
+    //     console.log('There was an error while trying to stop the scanning');
+    //     return false;
+    // });
 }
 
 
@@ -318,46 +277,6 @@ function handle_qr_manual_entry() {
     qr_scan_result = null;
     qr_entered_text = null;
 }
-
-
-
-
-
-function send_init_confirm_email(subject, message) {
-    console.log(`*** send_init_confirm_email() *** ${subject}`);
-
-    let to_email = 'scott.idem+skdev@oneskyit.com';
-
-    // let origin_url = encodeURI(`${data.url.origin}`);
-
-    let full_subject = `${subject} Aether QR Scanner Debugging`;
-
-    let body_html = `
-    <div>Scott,
-    <p>This is an automatic debug email from the Aether QR scanner.</p>
-    </div>
-
-    <br>
-
-    <div>
-    Message:<br>
-    <pre>
-    ${JSON.stringify(message)}
-    </pre>
-    </div>
-    `;
-
-    api.send_email({
-        api_cfg: $ae_api,
-        from_email: 'noreply+ae_qr_debug@oneskyit.com',
-        from_name: 'AE QR Debug',
-        to_email: to_email,
-        subject: full_subject,
-        body_html: body_html,
-    });
-}
-
-
 </script>
 
 
diff --git a/src/routes/events_leads/exhibit/[slug]/leads_add_scan backup.svelte b/src/routes/events_leads/exhibit/[slug]/leads_add_scan backup.svelte
new file mode 100644
index 00000000..5211c92c
--- /dev/null
+++ b/src/routes/events_leads/exhibit/[slug]/leads_add_scan backup.svelte	
@@ -0,0 +1,871 @@
+<script lang="ts">
+console.log(`ae_events_leads exhibit [slug] leads_add_scan.svelte`, $events_slct);
+
+import { ae_util } from '$lib/ae_utils';
+import { liveQuery } from "dexie";
+import { db_events } from "$lib/db_events";
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+// import { core_func } from '$lib/ae_core_functions';
+import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
+
+import Element_qr_scanner from '$lib/element_qr_scanner.svelte';
+
+
+// TEMPORARY: For testing and development
+// $events_sess.leads.show_form__search = true;
+// $events_sess.leads.show_form__scan = true;
+// TEMPORARY: For testing and development
+
+
+$: event_exhibit_obj = liveQuery(
+    () => db_events.exhibits.get($events_slct.exhibit_id)
+);
+
+$: event_exhibit_tracking_obj = liveQuery(
+    () => db_events.exhibit_tracking.get($events_slct.exhibit_tracking_id)
+);
+
+$events_sess.leads.entered_search_str = '';
+// $events_sess.leads.entered_search_str = 'Albert Einstein';
+
+let tmp_search_terms = $events_sess.leads.entered_search_str.split(' ')
+
+
+$: event_badge_obj = liveQuery(
+    () => db_events.badges.get($events_slct.badge_id)
+);
+
+// Version 2: This does not work yet
+let event_badge_obj_li = liveQuery(
+    // () => db_events.exhibits.toArray()
+    () => db_events.badges
+        // .where({event_exhibit_id_random: $events_slct.exhibit_id, enable: true, hide: false})
+        // .where({event_id_random: $events_loc.event_id})
+        .where('event_id_random').equals($events_loc.event_id)
+        // .where('event_id_random').equals($events_slct.event_id)
+        // .or('full_name').equalsIgnoreCase($events_sess.leads.entered_search_str)
+        // .and('full_name').anyOfIgnoreCase([$events_sess.leads.entered_search_str, 'Sasa Vukelic'])
+        // .where('full_name').anyOfIgnoreCase(tmp_search_terms)
+        // .and('enable').equals(true)
+        .sortBy('full_name') // Use sortBy() instead of orderBy(). toArray() is also not needed???
+        // .toArray()
+
+        // , full_name: 'Susan'
+        // Scott Idem
+        // Albert Einstein
+);
+
+
+// We are using Dexie.js for the database. This liveQuery should only show records that match the event_id and contain the search string.
+// Version 3: This does not work yet
+let event_badge_obj_li_v3 = liveQuery(
+    // () => db_events.exhibits.toArray()
+    () => db_events.badges
+        .where({event_exhibit_id_random: $events_slct.exhibit_id, full_name: $events_sess.leads.entered_search_str})
+);
+
+
+let search_submit_results: Promise<any>|key_val;
+let scan_submit_results: Promise<any>|key_val;
+
+async function handle_submit_form_search(event) {
+    console.log('*** handle_submit_form_search() ***', event);
+
+    $events_sess.leads.submit_status__search = 'submitting';
+
+    let search_str = $events_sess.leads.entered_search_str.trim();
+    console.log(search_str);
+
+    search_submit_results = await events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $event_exhibit_obj.event_id_random, fulltext_search_qry_str: search_str, external_event_id: $events_loc.leads.default__external_registration_id});
+    console.log(search_submit_results);
+
+    $events_slct.badge_obj_li = search_submit_results;
+}
+
+let load_event_badge_results = null;
+function handle_qr_scan_result(event) {
+    console.log('*** handle_qr_scan_result() ***');
+
+    let qr_scan_result = event.detail.result;
+    console.log(qr_scan_result);
+    let qr_scan_obj = ae_util.process_data_string(qr_scan_result);
+
+    if (qr_scan_obj.qr_type == 'OBJ') {
+        console.log(`Got a QR type of OBJ. Type ${qr_scan_obj.type}; ID ${qr_scan_obj.id}`);
+
+        if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_badge') {
+            console.log(`Found an Event Badge object type and ID.`);
+            let event_badge_id = qr_scan_obj.id
+
+            $events_sess.leads.qr_scan_result = `Found a badge type with ID: ${event_badge_id}`;
+
+            load_event_badge_results = events_func.handle_load_ae_obj_id__badge({api_cfg: $ae_api, badge_id: event_badge_id })
+            .then((result) => {
+                $events_slct.badge_id = event_badge_id;
+                $events_slct.badge_obj = result;
+                console.log(result);
+            });
+
+            // event_exhibit_tracking_obj_create_promise = await handle_create_event_exhibit_tracking_obj($slct.event_exhibit_id, event_badge_id);
+            // console.log(event_exhibit_tracking_obj_create_promise);
+            // if (event_exhibit_tracking_obj_create_promise) {
+            //     console.log('Created new log entry for this badge.');
+            //     console.log(event_exhibit_tracking_obj_create_promise);
+
+            //     handle_load_event_exhibit_obj({event_exhibit_id: $slct.event_exhibit_id, try_cache: false});
+
+            //     $slct.event_exhibit_tracking_obj = event_exhibit_tracking_obj_create_promise;
+            //     $slct.event_exhibit_tracking_id = $slct.event_exhibit_tracking_obj.event_exhibit_tracking_id_random;
+            //     // $slct.event_badge_obj = $slct.event_exhibit_tracking_obj.event_badge;
+            //     // $slct.event_badge_id = $slct.event_badge_obj.event_badge_id_random;
+            //     show_add_qr = false;
+            //     qr_scan_result = '';
+            //     qr_scan_obj = {};
+            //     show_tracking_entry = true;
+            // } else if (event_exhibit_tracking_obj_create_promise === null) {
+            //     console.log('A matching log entry probably exists for this person!');
+            // } else {
+            //     console.log('Something unexpected happened???');
+            // }
+
+
+            $events_sess.leads.show_confirm__add_lead[event_badge_id] = true;
+
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_exhibit') {
+            console.log(`Ignoring.`);
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_person') {
+            console.log(`Ignoring.`);
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_session') {
+            console.log(`Ignoring.`);
+        } else {
+            console.log(`Ignoring. The object returned was unexpected or not valid.`);
+            console.log(qr_scan_obj);
+        }
+    } else if (qr_scan_obj.qr_type == 'MECARD') {
+        console.log(`Got a QR type of MECARD. This was not expected, but we will at least display it???`);
+
+        // https://github.com/ertant/vCard
+        // vcard = vCardParser.parse(qr_scan_obj.str); // vCard
+        // console.log(vcard);
+
+        mecard = qr_scan_obj.str.split(';'); // vCard
+        // NOTE: Next we need to loop through the values and split each again on ":".
+        // NOTE: Then probably do a second check based on the known key values (N, EMAIL, ADR).
+        console.log(mecard);
+
+        show_mecard = true;
+    } else {
+        console.log(`Got a QR type of ${qr_scan_obj.qr_type}. Display warning to user, but otherwise ignoring.`);
+        console.log(qr_scan_obj);
+    }
+}
+
+function handle_qr_camera(event) {
+    console.log('*** handle_qr_camera() ***', event.detail);
+
+    if (!$ae_loc.hub.qr) {
+        $ae_loc.hub.qr = {};
+    }
+
+    if (event.detail.status == 'allowed') {
+        // console.log('Camera access allowed');
+        $ae_loc.hub.qr.camera_status = 'allowed';
+    } else if (event.detail.status == 'denied') {
+        console.log('Camera access denied!?');
+        $ae_loc.hub.qr.camera_status = 'denied';
+    }
+}
+</script>
+
+
+<section class="tab__add_section min-w-full flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix">
+
+{#if $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
+
+{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
+<div>Leads for:
+    <strong>{$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}</strong>
+</div>
+{:else}
+    <div class="border border-slate-500/10 p-2 variant-soft-warning">Please go to the Main tab and select a license to use.</div>
+{/if}
+
+<!-- <div class="border border-slate-500/10 p-2 variant-soft-warning">This section is not fully enabled for ISHLT 2024 at this time. The ability to add a lead by scanning the attendee's QR code or by searching for their name, will be enabled before the ISHLT 2024 Annual Meeting in Prague.</div> -->
+
+<p>
+    <!-- This page is used to test QR scanning with your device. -->
+    {#if $ae_loc.hub.qr.camera_status == 'unknown'}
+        <strong>You will need to allow access to your device's camera when asked.</strong>
+    {:else if $ae_loc.hub.qr.camera_status == 'denied'}
+        <strong>You need to allow access to your device's camera. Currently this seems to be blocked or denied for this site.</strong>
+        Please check your browser's permissions.
+    {/if}
+</p>
+
+
+<span class="flex flex-col md:flex-row wrap justify-center items-center">
+<button
+    class="btn btn-xl variant-ghost-primary m-2 w-64 add_person_qr_btn"
+    on:click={() => {
+        // $slct.event_exhibit_tracking_id = null;
+        // $slct.event_exhibit_tracking_obj = null;
+        // show_add_qr = true;
+        // qr_scan_obj = null;
+        // event_exhibit_tracking_obj_create_promise = null;
+        $events_sess.leads.show_form__scan = true;
+        $events_sess.leads.qr_scan_start = true;
+    }}
+    title="Scan a QR code to add a person to the leads list."
+    >
+    <span class="fas fa-qrcode mx-1"></span>
+    Scan to Add Person
+</button>
+
+<button
+    class="btn btn-xl variant-ghost-primary m-2 w-64 add_person_search_btn"
+    on:click={() => {
+        // $slct.event_exhibit_tracking_id = null;
+        // $slct.event_exhibit_tracking_obj = null;
+        // show_add_search = true;
+        // qr_scan_obj = null;
+        // event_exhibit_tracking_obj_create_promise = null;
+        $events_sess.leads.show_form__search = true;
+    }}
+    disabled={!$ae_loc.trusted_access && 2==4}
+    title="Search for a person to add to the leads list."
+    >
+    <span class="fas fa-search mx-1"></span>
+    Search to Add Person
+</button>
+</span>
+
+<span class="">
+{#if ($events_loc.leads.show_content__scan_requirements)}
+    <button class="btn btn-sm variant-soft-secondary" on:click={() => $events_loc.leads.show_content__scan_requirements=false}><span class="fas fa-info mx-1"></span> Hide Requirements</button>
+{:else if (!$events_loc.leads.show_content__scan_requirements)}
+    <button class="btn btn-sm variant-soft-secondary" on:click={() => $events_loc.leads.show_content__scan_requirements=true}><span class="fas fa-info mx-1"></span> Requirements</button>
+{/if}
+</span>
+
+{#if $events_loc.leads.show_content__scan_requirements}
+<div class="border border-slate-500/10 p-2 variant-soft-secondary">
+    <p>You will need a device with a camera to scan the QR codes. You will also of course need one or more valid QR codes to scan.
+    <!-- <button class="ae_btn btn_sm" on:click={() => show='qr_codes'}><span class="fas fa-qrcode"></span> Example QR Codes</button> -->
+    </p>
+    <ul class="list-disc list-inside">
+        <li>Most laptops, workstations, Android phones/tablets, iPhones, and iPads are compatible</li>
+        <li>The device must have a current (within the last 4 years) web browser such as Google Chrome, Mozilla Firefox, Apple's Safari, or Microsoft Edge. Opera is not yet fully supported.</li>
+        <li>There is no Android or Apple app that needs to be installed!</li>
+        <li>The device must have a camera for scanning or you will need to manually enter attendee badge IDs.</li>
+        <li>The only permission you need to allow is access to your device's camera when asked.</li>
+    </ul>
+</div>
+{:else}
+    <!-- <button class="ae_btn btn_sm btn_info" on:click={() => show_requirements=true}><span class="fas fa-eye"></span> Requirements</button> -->
+{/if}
+
+
+{:else} <!-- $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] -->
+<div class="variant-soft-error">Not logged in. Please log in and select a user license.</div>
+{/if} <!-- $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] -->
+
+</section>
+
+
+{#if $events_sess.leads.show_form__search}
+<div class="ae_quick_modal_container">
+<section
+    class="
+        ae_quick_popover
+        events__leads__search
+        z-50
+        flex
+        flex-col
+        gap-4
+        justify-stretch
+        max-h-full
+        min-w-full
+        "
+    >
+    <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
+        <h2 class="h3">Search</h2>
+
+        <div class="">
+            <form
+                id="form__search_text"
+                class="form flex flex-col sm:flex-row md:flex-row lg:flex-row wrap gap-2 justify-center items-center w-full"
+                on:submit|preventDefault={handle_submit_form_search}
+                >
+
+            <!-- This is the plain text search field for looking up attendees based on their name, email, etc. The focus needs to be set automatically! -->
+            <input
+                type="text"
+                name="entered_search_string"
+                placeholder="Search for attendee"
+                bind:value={$events_sess.leads.entered_search_str}
+                required
+                class="input max-w-56"
+                autofocus
+                />
+
+            <button
+                type="submit"
+                class="btn variant-ghost-primary"
+                >
+                <span class="fas fa-search mx-1"></span>
+                Search
+            </button>
+
+            </form>
+        </div>
+
+        <div class="popover__actions">
+            <button
+                type="button"
+                class="btn variant-soft-primary"
+                on:click={() => {
+                    $events_sess.leads.show_form__search = false;
+                }}
+                >
+                <span class="fas fa-times mx-1"></span>
+                Close
+            </button>
+        </div>
+    </header>
+
+
+    <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
+    <div class="ae_events__badge_li w-full">
+    {#if $event_badge_obj_li}
+        <!-- {#if $ae_loc.trusted_access} -->
+
+        <div class="border border-slate-500/10 p-2 variant-glass-success min-h-96">
+        <p>{$events_slct.badge_obj_li.length} results found</p>
+
+        {#each $events_slct.badge_obj_li as event_badge_obj_v2, index}
+
+        <div class="ae_events__badge_li__item flex flex-row justify-between items-center mx-0 my-2 border border-slate-500/10 p-2 hover:bg-slate-500/10">
+            <button
+                type="button"
+                on:click={() => {
+                    // if (confirm(`Add ${event_badge_obj_v2.full_name} <${event_badge_obj_v2.email}> to the leads list?`)) {
+                    // } else {
+                    //     return false;
+                    // }
+                    // console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
+
+                    $events_sess.leads.show_confirm__add_lead[index] = true;
+                }}
+                disabled={!$ae_loc.trusted_access && 2==4}
+                title="Add {event_badge_obj_v2.full_name} to the leads list?"
+                class="btn btn-md variant-soft-primary mx-1"
+                >
+                <span class="fas fa-plus mx-1"></span>
+                Add
+            </button>
+
+            <!-- This block needs to be moved or something. It takes up too much space! -->
+            <!-- This uses the event_badge_obj_v2 from the for each loop. -->
+            {#if $events_sess.leads.show_confirm__add_lead[index]}
+            <div class="ae_quick_modal_container">
+                <section
+                    class="
+                        ae_quick_popover_small
+                        events__leads__scan
+                        z-50
+                        flex
+                        flex-col
+                        gap-4
+                        justify-stretch
+
+                        "
+                    >
+                    <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
+                        <h2 class="h3">Add Selected?</h2>
+
+                        <div class="popover__actions">
+                            <button
+                                type="button"
+                                class="btn variant-soft-primary"
+                                on:click={() => {
+                                    $events_sess.leads.show_confirm__add_lead[index] = false;
+                                }}
+                                >
+                                <span class="fas fa-times mx-1"></span>
+                                Close
+                            </button>
+                        </div>
+                    </header>
+
+                    <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
+                    <p>Are you sure you want to add <strong>{event_badge_obj_v2.full_name}</strong> to the leads list?</p>
+                    <p>Badge ID: <strong>{event_badge_obj_v2.event_badge_id_random}</strong></p>
+                    <div class="flex flex-row gap-16 justify-center items-center">
+                        <button
+                            type="button"
+                            class="btn variant-soft-primary"
+                            on:click={() => {
+                                console.log(`Do not add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
+
+                                $events_sess.leads.show_confirm__add_lead[index] = false;
+                            }}
+                            >
+                            <span class="fas fa-times mx-1"></span>
+                            No
+                        </button>
+
+                        <button
+                            type="button"
+                            class="btn variant-soft-primary"
+                            disabled={!$ae_loc.trusted_access && 2==4}
+                            on:click={() => {
+                                console.log(`Add ${event_badge_obj_v2.full_name} ${event_badge_obj_v2.email} to the leads list`);
+
+                                // TEMPORARY: For testing and development
+                                // if (!$ae_loc.trusted_access) {
+                                //     console.log('You do not have permission to add this person to the leads list.');
+                                //     return false;
+                                // }
+                                // TEMPORARY: For testing and development
+
+                                events_func.handle_create_ae_obj__exhibit_tracking({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id, event_badge_id: event_badge_obj_v2.event_badge_id_random, external_person_id: $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key, })
+                                .then((result) => {
+                                    console.log(result);
+                                    let exhibit_tracking_id = null;
+                                    let exhibit_tracking_obj = {};
+                                    if (result) {
+                                        exhibit_tracking_id = result.event_exhibit_tracking_id_random;
+                                        exhibit_tracking_obj = result;
+
+                                        $events_slct.exhibit_tracking_id = exhibit_tracking_id;
+                                        $events_slct.exhibit_tracking_obj = exhibit_tracking_obj;
+
+                                        $events_sess.leads.show_confirm__add_lead[index] = false;
+                                    } else {
+                                        console.log('This badge ID has probably already been added to the lead list for this exhibit.');
+
+                                        // Need to look the old record up and set it to not hidden.
+                                        // events_func.handle_update_ae_obj_id_crud({api_cfg: $ae_api, object_type: 'event_exhibit_tracking', object_id: $events_slct.exhibit_tracking_id, field_name: 'hide', new_field_value: false})
+
+                                        $events_sess.leads.show_confirm__add_lead[index] = false;
+                                    }
+
+                                    if ($events_loc.leads.auto_view) {
+                                        $events_sess.leads.show_form__search = false;
+                                        $events_sess.leads.show_form__scan = false;
+
+                                        // $events_slct.exhibit_tracking_id = exhibit_tracking_id;
+                                        // $events_slct.exhibit_tracking_obj = exhibit_tracking_id;
+
+                                        $events_loc.leads.tab[$events_slct.exhibit_id] = 'leads';
+
+                                        $events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
+                                    }
+                                });
+
+                                // $events_sess.leads.show_confirm__add_lead[index] = false;
+                            }}
+                            >
+                            <span class="fas fa-check mx-1"></span>
+                            Yes
+                        </button>
+                    </div>
+                    </section> <!-- .popover__content -->
+                </section> <!-- .ae_quick_popover -->
+
+            </div>
+            {/if}
+
+            <div class="grow flex flex-row wrap justify-between items-center mx-1">
+                <!-- <span class="ae_events__badge_li__item__id">
+                    {event_badge_obj_v2.event_badge_id_random}
+                </span> -->
+                <span class="ae_events__badge_li__item__name">
+                    <span class="fas fa-user mx-0.5"></span>
+                    {#if $event_exhibit_obj?.priority || $ae_loc.trusted_access}
+                        {event_badge_obj_v2.full_name}
+                    {:else}
+                        <span class="ae_events__badge_li__item__name__hidden">
+                            {event_badge_obj_v2.full_name ? event_badge_obj_v2.full_name.substring(0, 1) + '...' : 'Hidden'}
+                        </span>
+                    {/if}
+                </span>
+                <span class="text-sm text-right">
+                    <span class="ae_events__badge_li__item__affiliations">
+                        {#if $event_exhibit_obj?.priority || $ae_loc.trusted_access}
+                            {event_badge_obj_v2.affiliations}
+                        {:else}
+                            <span class="ae_events__badge_li__item__affiliations__hidden">
+                                {event_badge_obj_v2.affiliations ? event_badge_obj_v2.affiliations.substring(0, 3) + '...' : 'Hidden'}
+                            </span>
+                        {/if}
+                    </span>
+                    <span class="ae_events__badge_li__item__email">
+                        {#if $event_exhibit_obj?.priority || $ae_loc.trusted_access}
+                            <a href="mailto:{event_badge_obj_v2.email}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
+                                <span class="fas fa-envelope mx-0.5"></span>
+                                {event_badge_obj_v2.email}</a>
+                        {:else}
+                            <span class="ae_events__badge_li__item__email__hidden">
+                                <span class="fas fa-envelope mx-0.5"></span>
+                                {event_badge_obj_v2.email ? event_badge_obj_v2.email.substring(0, 1) + '...@example.com' : 'Hidden'}
+                            </span>
+                        {/if}
+                    </span>
+                </span>
+            </div>
+        </div>
+
+        {/each}
+        </div>
+
+
+        <!-- <div class="border border-slate-500/10 p-2 variant-soft-warning">
+            <p>{$event_badge_obj_li.length} results found cached</p>
+        {#each $event_badge_obj_li as event_badge_obj, index}
+        <div class="ae_events__badge_li__item">
+            <span class="ae_events__badge_li__item__id">
+                {event_badge_obj.event_badge_id_random}
+            </span>
+            --
+            <span class="ae_events__badge_li__item__name">
+                {event_badge_obj.full_name}
+            </span>
+        </div>
+        {/each}
+        </div> -->
+
+        <!-- {:else}
+            <div class="variant-soft-warning">The search results are not enabled at this time.</div>
+        {/if} -->
+    {:else}
+        <div class="variant-soft-warning">No results yet</div>
+    {/if}
+    </div>
+    </section> <!-- .popover__content -->
+
+
+    <footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
+        <div class="popover__content__actions">
+            <button
+                type="submit"
+                form="form__search_text"
+                class="btn variant-ghost-primary"
+                disabled={search_submit_results instanceof Promise && !search_submit_results}
+                on:click={() => {
+                    // trigger = 'save__ds__code';
+                    // $slct_trigger = 'save__ds__code';
+                }}
+                >
+                <span class="fas fa-search mx-1"></span>
+                Search
+            </button>
+        </div>
+
+        <div class="popover__status">
+            <!-- Something text -->
+            {#await search_submit_results}
+                <div class="modal-loading">
+                    <span class="fas fa-spinner fa-spin"></span>
+                    <span class="loading-text">
+                        Searching...
+                    </span>
+                </div>
+            {:then search_submit_results}
+                {#if search_submit_results}
+                <div>
+                    <span class="fas fa-check text-green-500"></span>
+                    <span class="saved-text">
+                        Complete
+                    </span>
+
+                    <span class="results_cache text-sm">
+                    (
+                    <span class="search_results text-sm">{$events_slct.badge_obj_li.length} results</span>
+                    {#if $ae_loc.trusted_access}
+                    &amp;
+                    <span class="idb_cache text-sm">{$event_badge_obj_li.length} cached</span>
+                    {/if}
+                    )
+                    </span>
+                </div>
+                {/if}
+            {/await}
+
+            <div
+                class="ae_debug"
+                class:hidden={!$ae_loc?.debug}
+                >
+                submit: {$events_sess?.leads.submit_status__search}
+            </div>
+        </div>
+
+        <div class="popover__actions">
+        <button
+            type="button"
+            class="btn variant-soft-primary"
+            on:click={() => {
+                $events_sess.leads.show_form__search = false;
+            }}
+            >
+            <span class="fas fa-times mx-1"></span>
+            Close
+        </button>
+        </div>
+
+    </footer> <!-- .popover__footer -->
+
+</section> <!-- .ae_quick_popover -->
+</div> <!-- .ae_quick_modal_container -->
+{/if}
+
+<!-- **END** Search Form -->
+
+
+<!-- **BEGIN** Scan Form -->
+
+{#if $events_sess.leads.show_form__scan}
+<div class="ae_quick_modal_container">
+    <section
+        class="
+            ae_quick_popover
+            events__leads__scan
+            z-50
+            flex
+            flex-col
+            gap-4
+            justify-stretch
+            max-h-full
+            min-w-full
+            "
+        >
+        <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
+            <h2 class="h3">Scan</h2>
+
+            <div class="popover__actions">
+                <button
+                    type="button"
+                    class="btn variant-soft-primary"
+                    on:click={() => {
+                        $events_sess.leads.show_form__scan = false;
+                        $events_sess.leads.qr_scan_start = false;
+                    }}
+                    >
+                    <span class="fas fa-times mx-1"></span>
+                    Close
+                </button>
+            </div>
+        </header>
+
+        <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
+
+
+        <!-- <div class=""> -->
+        <Element_qr_scanner
+            start_qr_scanner={$events_sess.leads.qr_scan_start} 
+            show_qr_scan_result={true} 
+            show_qr_manual_badge_id_entry_option={true} 
+            on:qr_scan_result={handle_qr_scan_result}
+            on:qr_camera={handle_qr_camera}
+            />
+        <!-- </div> -->
+
+        <div class="qr_quick_results variant-soft-secondary font-bold p-4">
+            {@html $events_sess.leads.qr_scan_result ?? 'No results yet'}
+        </div>
+
+
+
+        <!-- This block needs to be moved or something. It takes up too much space! -->
+        <!-- This uses the events_slct with badge_id and badge_obj. -->
+        {#if $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] && $event_badge_obj}
+        <div class="ae_quick_modal_container">
+            <section
+                class="
+                    ae_quick_popover_small
+                    events__leads__scan
+                    z-50
+                    flex
+                    flex-col
+                    gap-4
+                    justify-stretch
+
+                    "
+                >
+                <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
+                    <h2 class="h3">Add Scanned?</h2>
+
+                    <div class="popover__actions">
+                        <button
+                            type="button"
+                            class="btn variant-soft-primary"
+                            on:click={() => {
+                                $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
+
+                                $events_slct.badge_id = null;
+                                $events_slct.badge_obj = null;
+                            }}
+                            >
+                            <span class="fas fa-times mx-1"></span>
+                            Close
+                        </button>
+                    </div>
+                </header>
+
+                <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
+                <p>Are you sure you want to add <strong>{$event_badge_obj.full_name}</strong> to the leads list?</p>
+                <p>Badge ID: <strong>{$event_badge_obj.event_badge_id_random}</strong></p>
+                <div class="flex flex-row gap-16 justify-center items-center">
+                    <button
+                        type="button"
+                        class="btn variant-soft-primary"
+                        on:click={() => {
+                            console.log(`Do not add ${$event_badge_obj.full_name} ${$event_badge_obj.email} to the leads list`);
+
+                            $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
+
+                            $events_slct.badge_id = null;
+                            $events_slct.badge_obj = null;
+
+                            // $events_slct = $events_slct;
+                            // $events_sess = $events_sess;
+                        }}
+                        >
+                        <span class="fas fa-times mx-1"></span>
+                        No
+                    </button>
+
+                    <button
+                        type="button"
+                        class="btn variant-soft-primary"
+                        disabled={!$ae_loc.trusted_access && 2==4}
+                        on:click={() => {
+                            console.log(`Add ${event_badge_obj.full_name} ${event_badge_obj.email} to the leads list`);
+
+                            // TEMPORARY: For testing and development
+                            // if (!$ae_loc.trusted_access) {
+                            //     console.log('You do not have permission to add this person to the leads list.');
+                            //     return false;
+                            // }
+                            // TEMPORARY: For testing and development
+
+                            events_func.handle_create_ae_obj__exhibit_tracking({api_cfg: $ae_api, exhibit_id: $events_slct.exhibit_id, event_badge_id: $events_slct.badge_id, external_person_id: $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key, })
+                            .then((result) => {
+                                console.log(result);
+                                let exhibit_tracking_id = null;
+                                let exhibit_tracking_obj = {};
+                                if (result) {
+                                    exhibit_tracking_id = result.event_exhibit_tracking_id_random;
+                                    exhibit_tracking_obj = result;
+
+                                    $events_slct.exhibit_tracking_id = exhibit_tracking_id;
+                                    $events_slct.exhibit_tracking_obj = exhibit_tracking_obj;
+                                } else {
+                                    console.log('This badge ID has probably already been added to the lead list for this exhibit.');
+
+                                    // Need to look the old record up and set it to not hidden.
+                                }
+                                $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
+
+                                // $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
+                                $events_slct.badge_id = null;
+                                $events_slct.badge_obj = null;
+
+                                if ($events_loc.leads.auto_view) {
+                                    $events_sess.leads.show_form__search = false;
+                                    $events_sess.leads.show_form__scan = false;
+
+                                    $events_loc.leads.tab[$events_slct.exhibit_id] = 'leads';
+
+                                    $events_sess.leads.show_form__view_lead = $events_slct.exhibit_tracking_id;
+                                }
+                            });
+
+                            // $events_sess.leads.show_confirm__add_lead[$events_slct.badge_id] = false;
+                        }}
+                        >
+                        <span class="fas fa-check mx-1"></span>
+                        Yes
+                    </button>
+                </div>
+                </section> <!-- .popover__content -->
+            </section> <!-- .ae_quick_popover -->
+
+        </div>
+        {/if}
+
+
+        </section> <!-- .popover__content -->
+
+        <footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
+            <!-- <div class="popover__content__actions">
+                <button
+                    type="button"
+                    class="btn variant-soft-primary"
+                    on:click={() => {
+                        $events_sess.leads.qr_scan_start = !$events_sess.leads.qr_scan_start;
+                    }}
+                    >
+                    <span class="fas fa-search mx-1"></span>
+                    {#if $events_sess.leads.qr_scan_start}
+                        Stop Scanning
+                    {:else}
+                        Scanning
+                    {/if}
+                </button>
+            </div> -->
+
+            <div class="popover__status">
+                <!-- Something text -->
+                <!-- {#await scan_submit_results}
+                    <div class="modal-loading">
+                        <span class="fas fa-spinner fa-spin"></span>
+                        <span class="loading-text">
+                            Scanning...
+                        </span>
+                    </div>
+                {:then scan_submit_results}
+                    {#if scan_submit_results}
+                    <div>
+                        <span class="fas fa-check text-green-500"></span>
+                        <span class="saved-text
+                        ">
+                            Complete
+                        </span>
+                    </div>
+                    {/if}
+                {/await} -->
+
+                <div
+                    class="ae_debug"
+                    class:hidden={!$ae_loc?.debug}
+                    >
+                    submit: {$events_sess?.leads.submit_status__scan}
+                </div>
+            </div>
+
+            <div class="popover__actions">
+            <button
+                type="button"
+                class="btn variant-soft-primary"
+                on:click={() => {
+                    $events_sess.leads.show_form__scan = false;
+                    $events_sess.leads.qr_scan_start = false;
+                }}
+                >
+                <span class="fas fa-times mx-1"></span>
+                Close
+            </button>
+            </div>
+
+        </footer> <!-- .popover__footer -->
+
+</section> <!-- .ae_quick_popover -->
+</div> <!-- .ae_quick_modal_container -->
+{/if}
+
+
+<style lang="postcss">
+
+</style>
diff --git a/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte b/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte
index 5211c92c..3bdb9a45 100644
--- a/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte
+++ b/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte
@@ -799,26 +799,25 @@ function handle_qr_camera(event) {
         </section> <!-- .popover__content -->
 
         <footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
-            <!-- <div class="popover__content__actions">
+            <div class="popover__content__actions">
                 <button
-                    type="button"
+                    type="submit"
+                    form="form__scan_text"
                     class="btn variant-soft-primary"
+                    disabled={scan_submit_results instanceof Promise && !scan_submit_results}
                     on:click={() => {
-                        $events_sess.leads.qr_scan_start = !$events_sess.leads.qr_scan_start;
+                        // trigger = 'save__ds__code';
+                        // $slct_trigger = 'save__ds__code';
                     }}
                     >
                     <span class="fas fa-search mx-1"></span>
-                    {#if $events_sess.leads.qr_scan_start}
-                        Stop Scanning
-                    {:else}
-                        Scanning
-                    {/if}
+                    Scan
                 </button>
-            </div> -->
+            </div>
 
             <div class="popover__status">
                 <!-- Something text -->
-                <!-- {#await scan_submit_results}
+                {#await scan_submit_results}
                     <div class="modal-loading">
                         <span class="fas fa-spinner fa-spin"></span>
                         <span class="loading-text">
@@ -835,7 +834,7 @@ function handle_qr_camera(event) {
                         </span>
                     </div>
                     {/if}
-                {/await} -->
+                {/await}
 
                 <div
                     class="ae_debug"
@@ -850,6 +849,7 @@ function handle_qr_camera(event) {
                 type="button"
                 class="btn variant-soft-primary"
                 on:click={() => {
+
                     $events_sess.leads.show_form__scan = false;
                     $events_sess.leads.qr_scan_start = false;
                 }}