From df34a85a898cfbe984d244a3e049721fe14d71ee Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 17 Mar 2026 10:35:00 -0400
Subject: [PATCH] cherry: import ae_comp__badge_obj_view.svelte (v1 with edit)
 from wip-modal-fix-attempt

---
 .../[badge_id]/ae_comp__badge_obj_view.svelte | 1393 +++++++++++++++++
 1 file changed, 1393 insertions(+)
 create mode 100644 src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte

diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
new file mode 100644
index 00000000..bfc54caf
--- /dev/null
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
@@ -0,0 +1,1393 @@
+<script lang="ts">
+    interface Props {
+        event_id: string;
+        event_badge_id: string;
+        lq__event_badge_obj?: any;
+        update_status?: string;
+        update_complete?: boolean;
+        is_review_mode?: boolean;
+        log_lvl?: number;
+    }
+
+    let {
+        event_id,
+        event_badge_id,
+        lq__event_badge_obj,
+        update_status = $bindable('idle'),
+        update_complete = $bindable(true),
+        is_review_mode = false,
+        log_lvl = 0
+    }: Props = $props();
+
+    // *** Import Svelte specific
+    import { browser } from '$app/environment';
+
+    // *** Import other supporting libraries
+    import { liveQuery } from 'dexie';
+
+    import type { key_val } from '$lib/stores/ae_stores';
+    import { core_func } from '$lib/ae_core/ae_core_functions';
+    import {
+        ae_snip,
+        ae_loc,
+        ae_sess,
+        ae_api,
+        ae_trig,
+        slct,
+        slct_trigger
+    } from '$lib/stores/ae_stores';
+    import { db_events } from '$lib/ae_events/db_events';
+    import {
+        events_loc,
+        events_sess,
+        events_slct,
+        events_trigger
+    } from '$lib/stores/ae_events_stores';
+    import { events_func } from '$lib/ae_events_functions';
+
+    // *** Variables
+    let ae_promises: key_val = $state({});
+    let ae_tmp: key_val = $state({});
+    let ae_triggers: key_val = $state({});
+
+    // ISHLT 2024 badge type codes
+    let badge_type_code_li = [
+        { code: 'current_member', name: 'Member' },
+        { code: 'inactive_member', name: 'Non-Member' },
+        { code: 'current_member_trainee', name: 'Trainee Member' },
+        { code: 'inactive_member_trainee', name: 'Trainee Non-Member' },
+        { code: 'ex_all', name: 'Exhibitor All Access' },
+        { code: 'ex_booth', name: 'Exhibitor Booth Staff' },
+        { code: 'hftx', name: 'HFTX Master Academy' },
+        { code: 'mcs', name: 'MCS Master Academy' },
+        { code: 'pediatric', name: 'Pediatric' },
+        { code: 'guest', name: 'Guest' },
+        { code: 'staff', name: 'Staff' },
+        { code: 'volunteer', name: 'Volunteer' },
+        { code: 'test', name: 'Test' }
+    ];
+
+    // *** Set initial variables
+    $slct.event_badge_id = event_badge_id; // $page['page_for']['event_badge_id'];
+    let trigger = $state(null);
+
+    let initial_loading_promise = $state(null);
+
+    let event_badge_obj_load_promise = $state(null);
+    let event_badge_obj_update_promise = $state(null);
+
+    let event_badge_qr_mecard_get_promise = $state(null);
+    let event_badge_qr_id_get_promise = $state(null);
+
+    let show_event_badge_tools_modal: boolean = $state(false);
+    let show_restricted_fields: boolean = $state(false);
+
+    // Editable fields
+    let editable_full_name_override: string | null = $state(null);
+    let editable_professional_title_override: string | null = $state(null);
+    let editable_affiliations_override: string | null = $state(null);
+    let editable_location_override: string | null = $state(null);
+    let editable_allow_tracking: boolean | null = $state(null);
+    let editable_email: string | null = $state(null);
+    let editable_badge_type_code: string | null = $state(null);
+
+    // Manage edit state locally
+    let edit_mode_active: boolean = $state(false);
+
+    // Initialize editable fields when lq__event_badge_obj changes
+    $effect(() => {
+        if (lq__event_badge_obj) {
+            editable_full_name_override =
+                lq__event_badge_obj.full_name_override ?? lq__event_badge_obj.full_name;
+            editable_professional_title_override =
+                lq__event_badge_obj.professional_title_override ??
+                lq__event_badge_obj.professional_title;
+            editable_affiliations_override =
+                lq__event_badge_obj.affiliations_override ?? lq__event_badge_obj.affiliations;
+            editable_location_override =
+                lq__event_badge_obj.location_override ?? lq__event_badge_obj.location;
+            editable_allow_tracking = lq__event_badge_obj.allow_tracking ?? null;
+            editable_email = lq__event_badge_obj.email ?? null;
+            editable_badge_type_code = lq__event_badge_obj.badge_type_code ?? null;
+
+            if (is_review_mode) {
+                edit_mode_active = true;
+                $ae_loc.edit_mode = true;
+            } else {
+                edit_mode_active = false; // Ensure it starts off if not in review mode
+                $ae_loc.edit_mode = false;
+            }
+        }
+    });
+
+    let show_print_msg: null | boolean = $state(null);
+    let hide_qr: null | boolean = $state(null);
+
+    // These variables seem unused or redundant now with editable_ fields
+    // let use_badge_type = $state(null);
+    // let use_badge_type_code = $state('');
+
+    let slct_badge_type = '';
+
+    /* *** BEGIN *** This should be moved out */
+    // display options: 'front_bool', 'front_html', 'back_bool', 'back_html'
+
+    let option_ticket_1_display_opt = 'front_bool';
+    let option_ticket_2_display_opt = 'front_bool';
+    let option_ticket_3_display_opt = 'front_bool';
+
+    let option_other_1_display_opt = 'back_html';
+    let option_other_2_display_opt = 'back_html';
+
+    let code_to_html: any = { option_1: {}, option_2: {} };
+    code_to_html.option_1['1'] = '<span class="fas fa-biohazard"></span>';
+    code_to_html.option_1['true'] = '<span class="fas fa-biohazard"></span>';
+    code_to_html.option_1['True'] = '<span class="fas fa-biohazard"></span>';
+    code_to_html.option_1['Dairy Free'] = '<span class="fas fa-utensils"></span>';
+    code_to_html.option_1['Gluten Free'] = '<span class="fas fa-utensils"></span>';
+    code_to_html.option_1['Halal'] = '<span class="fas fa-utensils"></span>';
+    code_to_html.option_1['Kosher'] = '<span class="fas fa-utensils"></span>';
+    code_to_html.option_1['Meat'] = '<span class="fas fa-bone"></span>';
+    code_to_html.option_1['Pescatarian'] = '<span class="fas fa-fish"></span>';
+    code_to_html.option_1['Vegan'] = '<span class="fas fa-utensils"></span>';
+    code_to_html.option_1['Vegetarian'] = '<span class="fas fa-carrot"></span>';
+
+    code_to_html.option_2['1'] = '<span class="fas fa-star-of-life"></span>';
+    code_to_html.option_2['true'] = '<span class="fas fa-star-of-life"></span>';
+    code_to_html.option_2['True'] = '<span class="fas fa-star-of-life"></span>';
+
+    code_to_html.option_2['First Time '] = '<span class="fas fa-hand-paper"></span>';
+    /* *** END *** This should be moved out */
+
+    let full_name_class_size: string = $state('text-[.60in]');
+    let professional_title_class_size: string = $state('text-[.35in]');
+    let affiliations_class_size: string = $state('text-[.60in]');
+    let location_class_size: string = $state('text-[.35in]');
+
+    // WARNING: This does not currently take into account the total lengths of the strings, only the longest part when split by spaces. This help with wrapping in the tighter spaces of the badge.
+
+    let lq__event_badge_template_obj = $derived(
+        liveQuery(async () => {
+            if (log_lvl) {
+                console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`);
+            }
+            let results = await db_events.badge_template.get(
+                $lq__event_badge_obj?.event_badge_template_id
+            );
+
+            // Re-calculate font sizes based on potentially edited values
+            const current_full_name =
+                editable_full_name_override ?? lq__event_badge_obj?.full_name ?? '';
+            const current_professional_title =
+                editable_professional_title_override ??
+                lq__event_badge_obj?.professional_title ??
+                '';
+            const current_affiliations =
+                editable_affiliations_override ?? lq__event_badge_obj?.affiliations ?? '';
+            const current_location =
+                editable_location_override ?? lq__event_badge_obj?.location ?? '';
+
+            longest_full_name_override_part = longest_str_part(current_full_name);
+            if (longest_full_name_override_part >= 9) {
+                full_name_class_size = 'text-[.45in]';
+            } else if (longest_full_name_override_part >= 7) {
+                full_name_class_size = 'text-[.60in]';
+            } else {
+                full_name_class_size = 'text-[.75in]';
+            }
+
+            longest_professional_title_override_part = longest_str_part(current_professional_title);
+            if (longest_professional_title_override_part >= 13) {
+                professional_title_class_size = 'text-[.35in]';
+            } else if (longest_professional_title_override_part >= 10) {
+                professional_title_class_size = 'text-[.35in]';
+            } else if (longest_professional_title_override_part >= 7) {
+                professional_title_class_size = 'text-[.35in]';
+            } else {
+                professional_title_class_size = 'text-[.35in]';
+            }
+
+            longest_affiliations_override_part = longest_str_part(current_affiliations);
+            if (longest_affiliations_override_part >= 55) {
+                affiliations_class_size = 'text-[.30in]';
+            } else if (longest_affiliations_override_part >= 45) {
+                affiliations_class_size = 'text-[.35in]';
+            } else if (longest_affiliations_override_part >= 35) {
+                affiliations_class_size = 'text-[.35in]';
+            } else if (longest_affiliations_override_part >= 25) {
+                affiliations_class_size = 'text-[.40in]';
+            } else if (longest_affiliations_override_part >= 20) {
+                affiliations_class_size = 'text-[.40in]';
+            } else if (longest_affiliations_override_part >= 7) {
+                affiliations_class_size = 'text-[.40in]';
+            } else {
+                affiliations_class_size = 'text-[.60in]';
+            }
+            if (affiliations_class_size > full_name_class_size) {
+                affiliations_class_size = full_name_class_size;
+            }
+
+            longest_location_override_part = longest_str_part(current_location);
+            if (longest_location_override_part >= 55) {
+                location_class_size = 'text-[.30in]';
+            } else if (longest_location_override_part >= 45) {
+                location_class_size = 'text-[.35in]';
+            } else if (longest_location_override_part >= 35) {
+                location_class_size = 'text-[.35in]';
+            } else if (longest_location_override_part >= 25) {
+                location_class_size = 'text-[.35in]';
+            } else if (longest_location_override_part >= 20) {
+                location_class_size = 'text-[.35in]';
+            } else if (longest_location_override_part >= 15) {
+                location_class_size = 'text-[.35in]';
+            } else {
+                location_class_size = 'text-[.35in]';
+            }
+            if (location_class_size > professional_title_class_size) {
+                location_class_size = professional_title_class_size;
+            } else if (professional_title_class_size > location_class_size) {
+                professional_title_class_size = location_class_size;
+            }
+
+            // These are no longer needed as we use the editable fields directly
+            // option_other_1_override = $lq__event_badge_obj?.option_other_1_override ?? $lq__event_badge_obj?.option_other_1;
+            // option_other_2_override = $lq__event_badge_obj?.option_other_2_override ?? $lq__event_badge_obj?.option_other_2;
+            // option_ticket_1_override = $lq__event_badge_obj?.option_ticket_1_override ?? $lq__event_badge_obj?.option_ticket_1;
+            // option_ticket_2_override = $lq__event_badge_obj?.option_ticket_2_override ?? $lq__event_badge_obj?.option_ticket_2;
+            // option_ticket_3_override = $lq__event_badge_obj?.option_ticket_3_override ?? $lq__event_badge_obj?.option_ticket_3;
+
+            return results;
+        })
+    );
+
+    // *** Functions and Logic
+    function preventDefault<T extends Event>(fn: (event: T) => void) {
+        return function (event: T) {
+            event.preventDefault();
+            fn(event);
+        };
+    }
+
+    function longest_str_part(str: string) {
+        if (str) {
+            let parts = str.trim().split(' ');
+            let longest = 0;
+            for (let part of parts) {
+                if (part.length > longest) {
+                    longest = part.length;
+                }
+            }
+            return longest;
+        } else {
+            return 0;
+        }
+    }
+
+    let qr_data_url: any = $state('');
+    let qr_error_message = $state('');
+
+    // Trigger doing a update for event badge
+    $effect(() => {
+        if (ae_triggers.event_badge_update) {
+            ae_triggers.event_badge_update = false;
+            update_status = 'loading';
+            update_complete = false;
+        }
+    });
+
+    $effect(async () => {
+        if (browser && $lq__event_badge_obj?.event_badge_id) {
+            console.log('Generating QR code...');
+            qr_error_message = '';
+            qr_data_url = '';
+
+            let params: any = {};
+            params.obj_type = 'event_badge';
+            params.obj_id = $lq__event_badge_obj?.event_badge_id;
+
+            try {
+                // Use 'vcard' as the qr_type, passing all required params
+                // const data_url = await core_func.js_generate_qr_code('obj', params);
+                qr_data_url = core_func.js_generate_qr_code('obj', params);
+            } catch (error) {
+                qr_error_message = error.message;
+                console.error(error);
+            }
+        }
+    });
+
+    // Example VCard data
+    const qrParams = {
+        n: 'Doe, John',
+        fn: 'John Doe',
+        org: 'Acme Corp',
+        email: 'john.doe@example.com',
+        tel: '+15551234567',
+        adr_loc: 'Springfield', // Must be present to include address block
+        adr_country: 'USA'
+        // ... include all other necessary parameters
+    };
+
+    /**
+     * Function to call the QR generation logic
+     */
+    async function get_qr_code() {
+        console.log('Generating QR code...');
+        qr_error_message = '';
+        qr_data_url = '';
+        try {
+            // Use 'vcard' as the qr_type, passing all required params
+            const dataUrl = await core_func.js_generate_qr_code('vcard', qrParams);
+            qr_data_url = dataUrl;
+        } catch (error) {
+            qr_error_message = error.message;
+            console.error(error);
+        }
+    }
+
+    async function handle_save_changes() {
+        if (!lq__event_badge_obj?.event_badge_id_random) {
+            console.error('Cannot save changes: event_badge_id_random is missing.');
+            return;
+        }
+
+        update_status = 'loading';
+        update_complete = false;
+
+        const data_to_update: key_val = {};
+
+        // Only include fields that have actually changed
+        if (
+            editable_full_name_override !==
+            (lq__event_badge_obj.full_name_override ?? lq__event_badge_obj.full_name)
+        ) {
+            data_to_update.full_name_override = editable_full_name_override;
+        }
+        if (
+            editable_professional_title_override !==
+            (lq__event_badge_obj.professional_title_override ??
+                lq__event_badge_obj.professional_title)
+        ) {
+            data_to_update.professional_title_override = editable_professional_title_override;
+        }
+        if (
+            editable_affiliations_override !==
+            (lq__event_badge_obj.affiliations_override ?? lq__event_badge_obj.affiliations)
+        ) {
+            data_to_update.affiliations_override = editable_affiliations_override;
+        }
+        if (
+            editable_location_override !==
+            (lq__event_badge_obj.location_override ?? lq__event_badge_obj.location)
+        ) {
+            data_to_update.location_override = editable_location_override;
+        }
+        if (editable_allow_tracking !== lq__event_badge_obj.allow_tracking) {
+            data_to_update.allow_tracking = editable_allow_tracking;
+        }
+        if (editable_email !== lq__event_badge_obj.email) {
+            data_to_update.email = editable_email;
+        }
+        if (editable_badge_type_code !== lq__event_badge_obj.badge_type_code) {
+            data_to_update.badge_type_code = editable_badge_type_code;
+        }
+
+        if (Object.keys(data_to_update).length === 0) {
+            console.log('No changes to save.');
+            update_status = 'done';
+            update_complete = true;
+            if (!is_review_mode) {
+                edit_mode_active = false;
+                $ae_loc.edit_mode = false;
+            }
+            return;
+        }
+
+        try {
+            await events_func.update_ae_obj__event_badge({
+                api_cfg: $ae_api,
+                event_badge_id: lq__event_badge_obj.event_badge_id_random,
+                data_kv: data_to_update,
+                log_lvl: log_lvl
+            });
+            update_status = 'done';
+            update_complete = true;
+            if (!is_review_mode) {
+                edit_mode_active = false;
+                $ae_loc.edit_mode = false;
+            }
+            // Optionally, refresh the lq__event_badge_obj if needed, though Dexie might handle it
+        } catch (error) {
+            console.error('Error saving changes:', error);
+            update_status = 'error';
+            update_complete = true;
+        }
+    }
+
+    function handle_cancel_changes() {
+        if (lq__event_badge_obj) {
+            editable_full_name_override =
+                lq__event_badge_obj.full_name_override ?? lq__event_badge_obj.full_name;
+            editable_professional_title_override =
+                lq__event_badge_obj.professional_title_override ??
+                lq__event_badge_obj.professional_title;
+            editable_affiliations_override =
+                lq__event_badge_obj.affiliations_override ?? lq__event_badge_obj.affiliations;
+            editable_location_override =
+                lq__event_badge_obj.location_override ?? lq__event_badge_obj.location;
+            editable_allow_tracking = lq__event_badge_obj.allow_tracking ?? null;
+            editable_email = lq__event_badge_obj.email ?? null;
+            editable_badge_type_code = lq__event_badge_obj.badge_type_code ?? null;
+        }
+        if (!is_review_mode) {
+            edit_mode_active = false;
+            $ae_loc.edit_mode = false;
+        }
+        update_status = 'idle';
+        update_complete = true;
+    }
+</script>
+
+<!--
+onclick={() => {
+    $slct.event_badge_obj = event_badge_obj;
+    $slct.event_badge_id = $lq__event_badge_obj.event_badge_id_random;
+    slct_this_badge = true
+}}
+onkeypress={() => {
+    // event_badge_obj = event_badge_obj;
+    // event_badge_id = $lq__event_badge_obj.event_badge_id_random;
+    // slct_this_badge = true
+}} -->
+
+<!-- <button class="btn btn-sm preset-outlined-surface-200-800" onclick={get_qr_code}>Generate VCard QR Code</button> -->
+<!-- {#if qr_error_message}
+    <p style="color: red;">Error: {qr_error_message}</p>
+{:else if qr_data_url}
+    <h2>Generated QR Code:</h2>
+    <img src={qr_data_url} alt="QR Code" />
+{:else}
+    <p>Click the button to generate the QR code.</p>
+{/if} -->
+
+<section
+    id="event_badge_{$lq__event_badge_obj?.event_badge_id}"
+    class="event_badge_wrapper event_badge print_area
+        flex flex-row flex-wrap gap-4
+        items-stretch justify-center
+        p-2 m-0
+        outline-2 outline-dashed outline-blue-500
+        min-h-[6.0in]
+        max-w-[8.5in] overflow-visible
+        "
+>
+    {#if $lq__event_badge_obj && $lq__event_badge_template_obj}
+        <!-- max-w-lg -->
+        <!-- *** badge_front section start *** -->
+        <section
+            class="badge_front badge_type__{use_badge_type_code.toLowerCase()}
+        flex flex-col gap-1
+        items-stretch justify-between
+        min-h-[6.0in]
+        max-h-[6.0in]
+        w-[4in]
+        max-w-fit
+        p-0 m-0 overflow-visible
+        text-center
+        relative
+        outline-4 outline-red-500/50 hover:outline-red-700/75
+        group
+        "
+        >
+            <span
+                class="
+            print:hidden absolute top-1 left-4
+            text-xs italic
+            text-gray-500 group-hover:text-red-800
+            transition-all
+            "
+            >
+                Front of badge
+            </span>
+
+            <div
+                class="
+            print:hidden absolute top-1 right-4
+            hover:preset-tonal-secondary
+            transition-all group
+            flex flex-col gap-1 items-center justify-center
+            "
+                class:preset-outlined-warning-200-800={edit_mode_active}
+                class:preset-tonal-warning={edit_mode_active}
+            >
+                {#if edit_mode_active}
+                    <button
+                        class="
+                btn btn-sm text-xs
+                preset-tonal-success preset-outlined-success-100-900 hover:preset-filled-success-500
+                transition-all group
+                "
+                        onclick={handle_save_changes}
+                        title="Save Changes"
+                    >
+                        <span class="fas fa-save m-1"></span>
+                        <span
+                            class="
+                    hidden
+                    group-hover:inline-block
+                    text-xs
+                    "
+                        >
+                            Save Changes
+                        </span>
+                    </button>
+                    <button
+                        class="
+                btn btn-sm text-xs
+                preset-tonal-tertiary preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-500
+                transition-all group
+                "
+                        onclick={handle_cancel_changes}
+                        title="Cancel Editing"
+                    >
+                        <span class="fas fa-times m-1"></span>
+                        <span
+                            class="
+                    hidden
+                    group-hover:inline-block
+                    text-xs
+                    "
+                        >
+                            Cancel
+                        </span>
+                    </button>
+                {:else}
+                    <button
+                        class="
+                btn btn-sm text-xs
+                preset-tonal-warning preset-outlined-warning-100-900 hover:preset-filled-secondary-500
+                transition-all group
+                "
+                        onclick={() => {
+                            edit_mode_active = true;
+                            $ae_loc.edit_mode = true;
+                        }}
+                        title="Edit Badge Information"
+                    >
+                        <span class="fas fa-edit m-1"></span>
+                        <span
+                            class="
+                    hidden
+                    group-hover:inline-block
+                    text-xs
+                    "
+                        >
+                            Edit Badge Information
+                        </span>
+                    </button>
+                {/if}
+
+                <div class="w-md max-w-lg m-1 p-1" class:hidden={!edit_mode_active}>
+                    <p class="text-xs italic text-gray-500">
+                        Show list of fields that they can edit here. This may need to broken down in
+                        to sections that can be collapsed.
+                    </p>
+                    <ul class="text-left list-disc list-inside text-sm">
+                        <li>Full Name</li>
+                        <li>Professional Title</li>
+                        <li>Affiliations</li>
+                        <li>Location</li>
+                        <li>Option Ticket 1</li>
+                        <li>Option Ticket 2</li>
+                        <li>Option Ticket 3</li>
+                        <li>Option Other 1</li>
+                        <li>Option Other 2</li>
+                        <li>Badge Type</li>
+                        <li>Allow Tracking</li>
+                        <li>Show Print Message</li>
+                        <li>Hide QR Code</li>
+                    </ul>
+                </div>
+            </div>
+
+            {#if $lq__event_badge_template_obj.header_path}
+                <div
+                    class="badge_header
+                image
+                min-h-[.50in]
+                max-h-[1.00in]
+                max-w-full
+                m-0 p-0
+                overflow-hidden
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+                "
+                >
+                    <img
+                        class="header_image"
+                        src={$lq__event_badge_template_obj.header_path}
+                        alt="check header path"
+                    />
+                </div>
+            {:else}
+                <div class="badge_header logo_text">
+                    <img
+                        class="badge_logo"
+                        src={$lq__event_badge_template_obj.logo_path}
+                        alt="check badge logo"
+                    />
+                    <div class="banner_text">
+                        <div class="row_one">
+                            {$lq__event_badge_template_obj.header_row_1}
+                        </div>
+                        <div class="row_two">
+                            {$lq__event_badge_template_obj.header_row_2}
+                        </div>
+                    </div>
+                </div>
+            {/if}
+
+            <div
+                class="badge_body
+            grow
+            max-h-[4in] m-0 p-0
+            overflow-clip
+            flex flex-col gap-1
+            items-stretch justify-between
+            "
+            >
+                <div
+                    class="person_name
+                max-h-[3.0in] m-0 p-0
+                overflow-hidden
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+                "
+                >
+                    <!-- NOTE: Need to add some logic if any part of the name is 9 characters or more to reduce the font size OR if the total length is more than 15ish to reduce the font size :NOTE -->
+                    <!-- Examples: mSC-tTzL_OA, QLddtYl8sfo -->
+
+                    <div class="full_name_override_all {full_name_class_size} leading-none">
+                        <!-- <span class="float-right text-sm italic m-2">
+                {longest_full_name_override_part}&times; char
+                </span> -->
+                        {#if edit_mode_active}
+                            <input
+                                type="text"
+                                bind:value={editable_full_name_override}
+                                class="input w-full text-center"
+                            />
+                        {:else}
+                            <span class="full_name_override">
+                                {#if editable_full_name_override}
+                                    {editable_full_name_override.trim()}
+                                {:else}
+                                    -- no name --
+                                {/if}
+                            </span>
+                        {/if}
+                    </div>
+
+                    {#if editable_professional_title_override || edit_mode_active}
+                        <div
+                            class="professional_title
+                        {professional_title_class_size} leading-none
+                        italic
+                        "
+                        >
+                            {#if edit_mode_active}
+                                <input
+                                    type="text"
+                                    bind:value={editable_professional_title_override}
+                                    class="input w-full text-center"
+                                />
+                            {:else}
+                                {editable_professional_title_override}
+                            {/if}
+                        </div>
+                    {/if}
+                </div>
+
+                {#if editable_affiliations_override || editable_location_override || edit_mode_active || editable_email || edit_mode_active || editable_allow_tracking !== null || edit_mode_active}
+                    <div
+                        class="affiliations_location
+                max-h-[3.0in] m-0 p-0
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+                "
+                    >
+                        {#if editable_affiliations_override || edit_mode_active}
+                            <div
+                                class="affiliations
+                        {affiliations_class_size} leading-none
+                        "
+                            >
+                                {#if edit_mode_active}
+                                    <textarea
+                                        bind:value={editable_affiliations_override}
+                                        class="textarea w-full text-center"
+                                        rows="2"
+                                    ></textarea>
+                                {:else}
+                                    {editable_affiliations_override}
+                                {/if}
+                            </div>
+                        {/if}
+
+                        {#if editable_location_override || edit_mode_active}
+                            <div
+                                class="location
+                        {location_class_size} leading-none
+                        "
+                            >
+                                {#if edit_mode_active}
+                                    <input
+                                        type="text"
+                                        bind:value={editable_location_override}
+                                        class="input w-full text-center"
+                                    />
+                                {:else}
+                                    <span class="city state_province country"
+                                        >{editable_location_override}</span
+                                    >
+                                {/if}
+                            </div>
+                        {/if}
+
+                        {#if editable_email || edit_mode_active}
+                            <div class="email-field text-sm">
+                                {#if edit_mode_active}
+                                    <label
+                                        >Email: <input
+                                            type="email"
+                                            bind:value={editable_email}
+                                            class="input w-full"
+                                        /></label
+                                    >
+                                {:else}
+                                    Email: {editable_email}
+                                {/if}
+                            </div>
+                        {/if}
+
+                        {#if editable_allow_tracking !== null || edit_mode_active}
+                            <div
+                                class="allow-tracking-field text-sm flex items-center justify-center gap-2"
+                            >
+                                {#if edit_mode_active}
+                                    <label
+                                        >Allow Tracking: <input
+                                            type="checkbox"
+                                            bind:checked={editable_allow_tracking}
+                                            class="checkbox"
+                                        /></label
+                                    >
+                                {:else}
+                                    Allow Tracking: {editable_allow_tracking ? 'Yes' : 'No'}
+                                {/if}
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
+
+                {#if ['front_bool', 'front_back_bool'].includes(option_ticket_1_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_2_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_3_display_opt) || $lq__event_badge_template_obj.show_qr_front || edit_mode_active}
+                    <div class="special">
+                        <span class="badge_body_special_left">
+                            {#if option_ticket_1_override}<span
+                                    class="ticket_1_code fg_green fas fa-star"
+                                ></span>{/if}
+                        </span>
+                        <span class="badge_body_special_right">
+                            {#if option_ticket_2_override}
+                                <span class=" ticket_2_code fg_red fas fa-star"></span>
+                            {/if}
+                            {#if option_ticket_3_override}
+                                <span class="ticket_3_code fg_blue fas fa-star"></span>
+                            {/if}
+                        </span>
+                        {#if $lq__event_badge_template_obj.show_qr_front}
+                            {#await qr_data_url}
+                                Generating...
+                            {:then result}
+                                {#if qr_data_url}
+                                    <img
+                                        class="qr_code mecard_qr"
+                                        style=""
+                                        src={qr_data_url}
+                                        alt="missing QR code"
+                                    />
+                                {/if}
+                            {/await}
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+
+            <div
+                class="badge_footer
+            {editable_badge_type_code?.toLowerCase()}
+            justify-self-end
+            min-h-[.25in]
+            max-h-[.50in]
+            max-w-full
+            m-0 p-0
+            overflow-hidden
+            flex flex-row gap-1 items-center justify-center
+            hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+            "
+                title={editable_badge_type_code}
+            >
+                {#if edit_mode_active && badge_type_code_li}
+                    <label
+                        >Badge Type:
+                        <select
+                            bind:value={editable_badge_type_code}
+                            class="select text-xs px-1 max-w-fit"
+                        >
+                            {#each badge_type_code_li as badge_type_code_item}
+                                <option value={badge_type_code_item.code}
+                                    >{badge_type_code_item.name}</option
+                                >
+                            {/each}
+                        </select>
+                    </label>
+                {:else}
+                    THE FOOTER
+                    {#if option_other_1_override && ['front_bool', 'front_back_bool'].includes(option_other_1_display_opt)}
+                        <span class="badge_footer_special_left"
+                            ><span class="fas fa-biohazard"></span></span
+                        >
+                    {:else if option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt)}
+                        <span class="badge_footer_special_left">{option_other_1_override}</span>
+                    {/if}
+
+                    <span class="badge_footer_center {editable_badge_type_code?.toLowerCase()}"
+                        >{editable_badge_type_code}</span
+                    >
+
+                    {#if option_other_2_override && ['front_bool', 'front_back_bool'].includes(option_other_2_display_opt)}
+                        <span class="badge_footer_special_right"
+                            ><span class="fas fa-star-of-life"></span></span
+                        >
+                    {:else if option_other_2_override && ['front_html', 'front_back_html'].includes(option_other_2_display_opt)}
+                        <span class="badge_footer_special_right">{option_other_2_override}</span>
+                    {/if}
+                {/if}
+            </div>
+
+            <!-- {#if $lq__event_badge_template_obj.show_qr_front}
+    <div class="container qr_code">
+        {#await initial_loading_promise}
+            Generating...
+        {:then result}
+            {#if initial_loading_promise}
+                <img class="mecard_qr qr_code" style="" src="/event/qr_image/event_badge_obj_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
+            {/if}
+        {/await}
+    </div>
+    {/if} -->
+
+            <!-- {#await initial_loading_promise}
+        Generating...
+    {:then result}
+        {#if initial_loading_promise}
+            <img class="qr_code mecard_qr" style="" src="/event/qr_image/event_badge_mecard_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
+        {/if}
+    {/await} -->
+
+            {#if $lq__event_badge_template_obj.show_qr_front}
+                {#await event_badge_qr_id_get_promise}
+                    Generating...
+                {:then result}
+                    {#if event_badge_qr_id_get_promise}
+                        <!-- {img_obj_url} -->
+
+                        <img
+                            class="qr_code mecard_qr"
+                            style=""
+                            class:v_hide_print={hide_qr}
+                            src={qr_data_url}
+                            alt="missing QR code"
+                            ondblclick={() => {
+                                // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
+                                hide_qr ? (hide_qr = false) : (hide_qr = true);
+                            }}
+                        />
+                        <!-- src="{$cfg.api['base_url']}/qr/{$ae_loc.account_id}/{$lq__event_badge_obj.event_badge_id_random}?filename=qr_{$ae_loc.account_id}_{$lq__event_badge_obj.event_badge_id_random}_mecard.png" -->
+                    {/if}
+                {/await}
+            {/if}
+
+            <!-- </div> -->
+            <!-- badge class div end -->
+        </section>
+        <!-- *** badge section end *** -->
+
+        <!-- *** badge_back (fold under) section start *** -->
+        <section
+            class="badge_back
+        flex flex-col gap-1
+        items-center justify-between
+        min-h-[6.0in]
+        max-h-[6.0in]
+        w-[4in]
+        max-w-fit
+        p-0 m-0 overflow-visible
+        text-left text-sm
+        relative
+        outline-4 outline-green-500/50 hover:outline-green-700/75
+        group
+        "
+        >
+            <span
+                class="
+            print:hidden absolute top-1 right-4
+            text-xs italic
+            text-gray-500 group-hover:text-green-800
+            "
+            >
+                Back of badge
+            </span>
+
+            {#if $lq__event_badge_template_obj.secondary_header_path}
+                <div
+                    class="badge_back_header
+                image
+                min-h-[1.00in]
+                max-h-[1.00in]
+                max-w-full
+                m-0 p-0
+                overflow-hidden
+                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+                "
+                >
+                    <img
+                        class="header_image"
+                        src={$lq__event_badge_template_obj.secondary_header_path}
+                        alt="check secondary header path"
+                    />
+                </div>
+            {:else if $lq__event_badge_template_obj.header_path}
+                <div class="badge_back_header image max-w-xl">
+                    <img
+                        class="header_image"
+                        src={$lq__event_badge_template_obj.header_path}
+                        alt="check primary header path"
+                    />
+                </div>
+            {:else}
+                <div class="badge_back_header logo_text">
+                    <img
+                        class="badge_logo"
+                        src={$lq__event_badge_template_obj.logo_path}
+                        alt="check badge logo"
+                    />
+                    <div class="banner_text">
+                        <div class="row_one">
+                            {$lq__event_badge_template_obj.header_row_1}
+                        </div>
+                        <div class="row_two">
+                            {$lq__event_badge_template_obj.header_row_2}
+                        </div>
+                    </div>
+                </div>
+            {/if}
+
+            <div
+                class="badge_back_content
+            grow
+            max-h-[6in] m-0 p-0
+            overflow-visible
+            flex flex-col gap-1
+            items-stretch justify-between
+            text-xs px-1
+            hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
+            "
+            >
+                <div
+                    class="wifi_information
+                    flex flex-row gap-4 items-center justify-center
+                    "
+                >
+                    {#if $lq__event_badge_template_obj.wireless_ssid}
+                        <div class="grow flex flex-col gap-0 items-center justify-end">
+                            <span class="w-full flex flex-row gap-1 items-center justify-start">
+                                <span class="w-20 text-gray-500 italic"> Signal Name </span>
+                                <strong
+                                    class="wifi_ssid font-bold font-mono text-lg tracking-widest leading-none"
+                                >
+                                    {$lq__event_badge_template_obj.wireless_ssid}
+                                </strong>
+                            </span>
+                            <span class="w-full flex flex-row gap-1 items-center justify-start">
+                                <span class="w-20 text-gray-500 italic"> Access Code </span>
+                                <strong
+                                    class="wifi_code font-bold font-mono text-lg tracking-widest leading-none"
+                                >
+                                    {$lq__event_badge_template_obj.wireless_password}
+                                </strong>
+                            </span>
+                        </div>
+                        <div
+                            class="wifi_label flex flex-row-reverse gap-1 items-center justify-center text-xl text-gray-500"
+                        >
+                            <span class="fas fa-wifi"></span>
+                            WiFi
+                        </div>
+                    {/if}
+
+                    <div class="network_username_password hidden">
+                        Username = <span class="network_username">username</span><br />
+                        Password = <span class="network_password">password</span>
+                    </div>
+                </div>
+
+                <div class="app_information text-xs">
+                    <strong>Download Meeting App:</strong>
+                    <!-- <img style="width: .75in; float: right;" src="/event/qr_image/testing123" alt="missing person information QR code"> -->
+                    <ol style="margin: 0; padding-top: 0; padding-bottom: 0;">
+                        <li style="">
+                            Use QR code or search your app store for "<strong>App Name</strong>"
+                        </li>
+                        <li style="">
+                            Once downloaded, use the search feature to find "<strong
+                                >999<sup style="font-size:.5em;">th</sup> Meeting</strong
+                            >" guide
+                        </li>
+                        <li style="">
+                            You may also go to <a href="https://oneskyit.com/">OneSkyIT.com</a>
+                        </li>
+                    </ol>
+                </div>
+
+                <!-- {#if $lq__event_badge_template_obj.attendee_info} -->
+                <!-- Information for attendee only (banquets, receptions, and other) -->
+                {#if $lq__event_badge_obj.other_1 || $lq__event_badge_obj.other_2 || $lq__event_badge_obj.ticket_1_code || $lq__event_badge_obj.ticket_2_code || $lq__event_badge_obj.ticket_3_code || $lq__event_badge_obj.ticket_4_code || $lq__event_badge_obj.ticket_5_code}
+                    <div class="attendee_information">
+                        <!-- <strong>Attendee Info:</strong> -->
+                        <ul>
+                            {#if $lq__event_badge_obj.ticket_1_code}
+                                <li>{$lq__event_badge_template_obj.ticket_1_text}</li>
+                            {/if}
+                            {#if $lq__event_badge_obj.ticket_2_code}
+                                <li>{$lq__event_badge_template_obj.ticket_2_text}</li>
+                            {/if}
+                            {#if $lq__event_badge_obj.ticket_3_code}
+                                <li>{$lq__event_badge_template_obj.ticket_3_text}</li>
+                            {/if}
+                            {#if $lq__event_badge_obj.ticket_4_code}
+                                <li>{$lq__event_badge_template_obj.ticket_4_text}</li>
+                            {/if}
+                            {#if $lq__event_badge_obj.ticket_5_code}
+                                <li>{$lq__event_badge_template_obj.ticket_5_text}</li>
+                            {/if}
+                        </ul>
+
+                        {#if $ae_loc.administrator_access}
+                            {#if $lq__event_badge_obj.other_1}
+                                <div class="other_1">
+                                    Other 1: {$lq__event_badge_obj.other_1}
+                                    {#if option_other_1_override && ['back_bool', 'front_back_bool'].includes(option_other_1_display_opt)}
+                                        - {option_other_1_override}
+                                    {:else if option_other_1_override && ['back_html', 'front_back_html'].includes(option_other_1_display_opt)}
+                                        - {option_other_1_override}
+                                    {/if}
+                                </div>
+                            {/if}
+                            {#if $lq__event_badge_obj.other_2}
+                                <div class="other_2">
+                                    Other 2: {$lq__event_badge_obj.other_2}
+                                    {#if option_other_2_override && ['back_bool', 'front_back_bool'].includes(option_other_2_display_opt)}
+                                        - {option_other_2_override}
+                                    {:else if option_other_2_override && ['back_html', 'front_back_html'].includes(option_other_2_display_opt)}
+                                        - {option_other_2_override}
+                                    {/if}
+                                </div>
+                            {/if}
+                        {/if}
+                    </div>
+                    <!-- {/if} -->
+                {/if}
+
+                {#if $lq__event_badge_template_obj.exhibitor_info}
+                    <div class="container exhibitor_information">
+                        <strong>Exhibitor Info:</strong>
+                        <!-- Information for exhibitor only -->
+                    </div>
+                {/if}
+
+                {#if $lq__event_badge_template_obj.presenter_info}
+                    <div class="container presenter_information">
+                        <strong>Presenter Info:</strong>
+                        <!-- Information for presenter only -->
+                    </div>
+                {/if}
+
+                {#if $lq__event_badge_template_obj.staff_info}
+                    <div class="container staff_information">
+                        <strong>Staff Info:</strong>
+                        <!-- Information for staff only -->
+                    </div>
+                {/if}
+
+                {#if $lq__event_badge_template_obj.vip_info}
+                    <div class="container vip_information">
+                        <strong>VIP Info:</strong>
+                        <!-- Information for VIP only -->
+                    </div>
+                {/if}
+
+                {#if $lq__event_badge_template_obj.vote_info}
+                    <div class="container vote_information">
+                        <div><strong>Voting Info:</strong></div>
+                        <!-- <div>Vote in the Election at <a href="https://oneskyit.com/vote">oneskyit.com/vote</a></div> -->
+                    </div>
+                {/if}
+
+                {#if $lq__event_badge_template_obj.show_qr_back}
+                    <div
+                        class="person_information qr_badge_id
+                "
+                    >
+                        <div class="qr_badge_id_label text-center">
+                            <strong>
+                                {$lq__event_badge_obj.given_name}'s
+                            </strong>
+                            Badge ID and QR Code:
+                        </div>
+                        <div class="text-center">
+                            <span
+                                class="event_badge_id
+                        uppercase font-bold font-mono text-lg tracking-widest leading-tight
+                        hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white
+                        z-10
+                        "
+                            >
+                                {$lq__event_badge_obj.event_badge_id_random}
+                            </span>
+                        </div>
+                        {#await qr_data_url}
+                            <!-- Must use this await when the image is generated. It either happens here or on the $effect with async -->
+                            Generating...
+                        {:then result}
+                            {#if result}
+                                <div
+                                    class="qr_badge_id_part_1 flex flex-row items-center justify-between"
+                                >
+                                    <img
+                                        class="qr_code mecard_qr
+                            image
+                            w-[1.5in]
+                            max-w-48
+                            hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white
+                            z-10
+                            "
+                                        class:v_hide_print={hide_qr}
+                                        src={result}
+                                        alt="badge QR code"
+                                        ondblclick={() => {
+                                            // (hide_qr) ? hide_qr = !hide_qr : hide_qr;
+                                            hide_qr ? (hide_qr = false) : (hide_qr = true);
+                                        }}
+                                    />
+                                    <div
+                                        class="qr_badge_id_agreement fs_xs f_align_justify
+                            text-xs
+                            italic
+                            "
+                                    >
+                                        {#if allow_tracking}
+                                            <p>
+                                                This was <strong>allowed</strong> at the time your badge
+                                                was printed. You may opt-out at anytime.
+                                            </p>
+                                            <p>
+                                                By allowing this QR code to be scanned by an
+                                                exhibitor or staff, you understand and agree that
+                                                they may use your personal information.
+                                            </p>
+                                        {:else}
+                                            <p>
+                                                Tracking was <strong>not</strong> allowed at the time
+                                                your badge was printed. You may opt-in at anytime.
+                                            </p>
+                                            <p>
+                                                If this QR code is scanned by an exhibitor or staff,
+                                                they will <strong>not</strong> have access to your information.
+                                            </p>
+                                        {/if}
+                                    </div>
+                                </div>
+                            {/if}
+                        {/await}
+                    </div>
+                {/if}
+            </div>
+
+            <div class="badge_back_footer text-xxs italic text-gray-500">
+                <!-- IMPORTANT: This will need to be rotated with CSS for printing on the fanfold badges. -->
+                Fold in half here
+                <!-- Fold this section under the badge.
+        Insert into badge holder. -->
+            </div>
+
+            <!-- </div> -->
+            <!-- fold class div end -->
+        </section>
+        <!-- *** fold under section end *** -->
+
+        <!-- *** receipt section start *** -->
+        <section class="receipt hidden">
+            <!-- receipt class div start -->
+
+            <div class="receipt_header">
+                <img
+                    class="badge_logo max-w-sm"
+                    src={$lq__event_badge_template_obj.logo_path}
+                    alt="check badge logo"
+                />
+                <div class="banner_text">
+                    <div class="row_one">{$lq__event_badge_template_obj.header_row_1}</div>
+                    <div class="row_two">{$lq__event_badge_template_obj.header_row_2}</div>
+                </div>
+            </div>
+
+            <div class="receipt_content">
+                <!-- receipt_content class div start -->
+                <div>
+                    <span style="display: none;"
+                        >Invoice Number: <span class="Invoice_Number">Invoice_Number</span><br
+                        /></span
+                    >
+                    Account Number: <span class="BT_ID">BT_ID</span><br />
+                    Order Number: <span class="Order_Number">Order_Number</span><br />
+                </div>
+                <hr />
+                <div>
+                    Name: <span class="Orders_Full_Name">Full Name</span> (ID:
+                    <span class="Member_ID">Member_ID</span>)<br />
+                    <address><span class="Orders_Full_Address">Full Address</span></address>
+                    Email:<span class="Orders_Email">No Email</span>
+                </div>
+                <hr />
+
+                <table class="table_borders">
+                    <thead>
+                        <tr style="">
+                            <th style="width: 2em;">No.</th>
+                            <th style="width: 27em;">Product Description</th>
+                            <th style="width: 3em;">Qty.</th>
+                            <th style="width: 5em;">Price</th>
+                            <th style="width: 5em;">Total</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="roweven"
+                            ><td>1</td><td>Registration for Meeting</td><td>1</td><td>$300.00</td
+                            ><td>$300.00</td></tr
+                        >
+                        <tr class="rowodd"
+                            ><td>2</td><td>Printed Program</td><td>1</td><td>$25.00</td><td
+                                >$25.00</td
+                            ></tr
+                        >
+                        <tr class="roweven"
+                            ><td>3</td><td>Opening Reception</td><td>1</td><td>$0.00</td><td
+                                >$0.00</td
+                            ></tr
+                        >
+                        <tr class="rowodd"
+                            ><td>4</td><td>Closing Banquet</td><td>1</td><td>$85.00</td><td
+                                >$85.00</td
+                            ></tr
+                        >
+                        <tr><th colspan="4">Total Charges:</th><th colspan="2">$410.00</th></tr>
+                        <tr><th colspan="4">Total Payments:</th><th colspan="2">$410.00</th></tr>
+                        <tr><th colspan="4">Balance:</th><th colspan="2">$0.00</th></tr>
+                    </tbody>
+                </table>
+            </div>
+            <!-- receipt_content class div end -->
+
+            <div class="receipt_footer">
+                <p class="printed">Receipt Printed: January 23, 2019 03:18 PM</p>
+            </div>
+        </section>
+        <!-- receipt class div end -->
+        <!-- *** receipt section end *** -->
+
+        <!-- *** ticket section start *** -->
+        <section class="tickets_left_container hidden">
+            <div class="tickets">
+                <!-- Fold class div start -->
+
+                <div class="ticket_container ticket_1">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_1_code}{$lq__event_badge_template_obj.ticket_1_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_1 class div end -->
+                <div class="ticket_container ticket_2">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_2_code}{$lq__event_badge_template_obj.ticket_2_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_2 class div end -->
+                <div class="ticket_container ticket_3">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_3_code}{$lq__event_badge_template_obj.ticket_3_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_3 class div end -->
+                <div class="ticket_container ticket_4">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_4_code}{$lq__event_badge_template_obj.ticket_4_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_3 class div end -->
+            </div>
+            <!-- ticket class div end -->
+        </section>
+        <!-- *** ticket section end *** -->
+
+        <!-- *** ticket section start *** -->
+        <section class="tickets_right_container hidden">
+            <div class="tickets">
+                <!-- Fold class div start -->
+
+                <div class="ticket_container ticket_5">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_5_code}{$lq__event_badge_template_obj.ticket_5_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_5 class div end -->
+                <div class="ticket_container ticket_6">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_6_code}{$lq__event_badge_template_obj.ticket_6_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_6 class div end -->
+                <div class="ticket_container ticket_7">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_7_code}{$lq__event_badge_template_obj.ticket_7_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_7 class div end -->
+                <div class="ticket_container ticket_8">
+                    <div class="ticket_body">
+                        {#if $lq__event_badge_obj.ticket_8_code}{$lq__event_badge_template_obj.ticket_8_text}{/if}
+                    </div>
+                </div>
+                <!-- ticket_8 class div end -->
+            </div>
+            <!-- ticket class div end -->
+        </section>
+        <!-- *** ticket section end *** -->
+    {/if}
+    <!-- End if for lq__event_badge_template_obj -->
+</section>
+
+<pre
+    class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded
+        mt-4
+        print:hidden
+        ">
+    {JSON.stringify($lq__event_badge_obj, null, 2)}
+</pre>