<script lang="ts">
	interface Props {
		event_id: string;
		event_badge_id: string;
		lq__event_badge_obj?: any;
		update_status?: string;
		update_complete?: boolean;
		log_lvl?: number;
	}

	let {
		event_id,
		event_badge_id,
		lq__event_badge_obj,
		update_status = $bindable('idle'),
		update_complete = $bindable(true),
		log_lvl = 0
	}: Props = $props();

	// *** Import Svelte specific
	import { browser } from '$app/environment';

	// *** Import other supporting libraries
	import { liveQuery } from 'dexie';

	// import {
	//         ArrowDown01, ArrowDown10, ArrowDownUp,
	//         BetweenVerticalEnd, BetweenVerticalStart,
	//         BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
	//         Check, Copy,
	//         Expand, Eye, EyeOff,
	//         Flag, FlagOff, FilePlus, Fingerprint,
	//         Globe,
	//         Library,
	//         MessageSquareWarning, Minus,
	//         Notebook,
	//         Pencil, Plus,
	//         RemoveFormatting,
	//         SquareLibrary,
	//         Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
	//         Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
	//         X
	//     } from '@lucide/svelte';

	import type { key_val } from '$lib/stores/ae_stores';
	// import { ae_util } from '$lib/ae_utils/ae_utils';
	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);

	let allow_tracking: null | boolean = $state(null);
	let show_allow_tracking: boolean = $state(false);

	let edit_full_name_override = $state(false);
	let edit_professional_title_override = $state(false);
	let edit_affiliations_override = $state(false);
	let edit_location_override = $state(false);

	let show_print_msg: null | boolean = $state(null);
	let hide_qr: null | boolean = $state(null);

	let use_badge_type = $state(null);
	let use_badge_type_code = $state('');
	// let use_badge_type_code_list = [];
	// use_badge_type_code_list.push({code: 'current_member', name: 'Member'});
	// use_badge_type_code_list.push({code: 'inactive_member', name: 'Non-Member'});

	// use_badge_type_code_list.push({code: 'MBR', name: 'Member'});
	// use_badge_type_code_list.push({code: 'AHMB', name: 'Member'});

	// use_badge_type_code_list.push({code: 'SNMB', name: 'Student/Trainee Non-Member'});
	// use_badge_type_code_list.push({code: 'SMBR', name: 'Student/Trainee Member'});

	// use_badge_type_code_list.push({code: 'NMBR', name: 'Non-Member'});
	// use_badge_type_code_list.push({code: 'ANHM', name: 'Non-Member'});
	// use_badge_type_code_list.push({code: 'INMB', name: 'Non-Member'});

	// use_badge_type_code_list.push({code: 'EXO', name: 'Exhibitor Booth Staff'});
	// use_badge_type_code_list.push({code: 'EXALL', name: 'Exhibitor All Access'});

	// use_badge_type_code_list.push({code: 'GUEST', name: 'Guest'});

	// use_badge_type_code_list.push({code: 'HEART', name: 'HFTX Core'});
	// use_badge_type_code_list.push({code: 'LUNG', name: 'LTX Core'});

	// use_badge_type_code_list.push({code: 'STAFF', name: 'Staff'});
	// use_badge_type_code_list.push({code: 'VIP', name: 'VIP'});
	// use_badge_type_code_list.push({code: 'VOL', name: 'Volunteer'});

	let full_name_override = $state(null); // Usually set by the person or similar
	let longest_full_name_override_part = 0;
	let full_name = $state(null); // Usually auto generated

	let professional_title_override = $state(null);
	let longest_professional_title_override_part = 0;

	let affiliations_override = $state(null);
	let longest_affiliations_override_part = 0;

	let location_override = $state(null);
	let longest_location_override_part = 0;

	let option_other_1_display_opt: any = $state(null);
	let option_other_1_override: any = $state(null);
	let option_other_2_display_opt: any = $state(null);
	let option_other_2_override: any = $state(null);

	let option_ticket_1_display_opt: any = $state(null);
	let option_ticket_1_override: any = $state(null);
	let option_ticket_2_display_opt: any = $state(null);
	let option_ticket_2_override: any = $state(null);
	let option_ticket_3_display_opt: any = $state(null);
	let option_ticket_3_override: any = $state(null);
	// let option_ticket_4_display_opt = $state(null);
	// let option_ticket_5_display_opt = $state(null);
	// let option_ticket_6_display_opt = $state(null);
	// let option_ticket_7_display_opt = $state(null);
	// let option_ticket_8_display_opt = $state(null);

	let slct_badge_type = '';

	// let qr_type = 'mecard';
	// let qr_img_src = $state(null);
	// let img_obj_url = $state(null);

	/* *** BEGIN *** This should be moved out */
	// display options: 'front_bool', 'front_html', 'back_bool', 'back_html'

	option_ticket_1_display_opt = 'front_bool';
	option_ticket_2_display_opt = 'front_bool';
	option_ticket_3_display_opt = 'front_bool';

	option_other_1_display_opt = 'back_html';
	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>';
	// code_to_html.option_2['1-5'] = '<span class="fas fa-grimace"></span>';
	// code_to_html.option_2['6-10'] = '<span class="fas fa-grimace"></span>';
	// code_to_html.option_2['11-15'] = '<span class="fas fa-grimace"></span>';
	// code_to_html.option_2['16-29'] = '<span class="fas fa-grimace"></span>';
	// code_to_html.option_2['30+'] = '<span class="fas fa-grimace"></span>';
	// code_to_html.option_2['Unknown'] = '<span class="fas fa-radiation"></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
			);

			full_name_override =
				$lq__event_badge_obj?.full_name_override ?? $lq__event_badge_obj?.full_name;
			longest_full_name_override_part = longest_str_part(full_name_override ?? '');

			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]';
			}

			professional_title_override =
				$lq__event_badge_obj?.professional_title_override ??
				$lq__event_badge_obj?.professional_title;
			longest_professional_title_override_part = longest_str_part(
				professional_title_override ?? ''
			);
			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]';
			}

			affiliations_override =
				$lq__event_badge_obj?.affiliations_override ?? $lq__event_badge_obj?.affiliations;
			longest_affiliations_override_part = longest_str_part(affiliations_override ?? '');
			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;
			}

			location_override = $lq__event_badge_obj?.location_override ?? $lq__event_badge_obj?.location;
			longest_location_override_part = longest_str_part(location_override ?? '');
			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;
			}

			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;
			// option_ticket_4_override = $lq__event_badge_obj?.option_ticket_4_override ?? $lq__event_badge_obj?.option_ticket_4;
			// option_ticket_5_override = $lq__event_badge_obj?.option_ticket_5_override ?? $lq__event_badge_obj?.option_ticket_5;
			// option_ticket_6_override = $lq__event_badge_obj?.option_ticket_6_override ?? $lq__event_badge_obj?.option_ticket_6;
			// option_ticket_7_override = $lq__event_badge_obj?.option_ticket_7_override ?? $lq__event_badge_obj?.option_ticket_7;
			// option_ticket_8_override = $lq__event_badge_obj?.option_ticket_8_override ?? $lq__event_badge_obj?.option_ticket_8;

			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);
		}
	}
</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={$ae_loc.edit_mode}
				class:preset-tonal-warning={$ae_loc.edit_mode}
			>
				<button
					class="
            btn btn-sm text-xs
            preset-tonal-warning preset-outlined-warning-100-900 hover:preset-filled-secondary-500
            transition-all group
            "
					onclick={() => {
						show_event_badge_tools_modal = true;
						$ae_loc.edit_mode = !$ae_loc.edit_mode;
					}}
					title="Edit Badge Information"
				>
					{#if $ae_loc.edit_mode}
						<span class="fas fa-times m-1"></span>
					{:else}
						<span class="fas fa-edit m-1"></span>
					{/if}
					<span
						class="
                hidden
                group-hover:inline-block
                text-xs
                "
					>
						{#if $ae_loc.edit_mode}
							Close Edit
						{:else}
							Edit Badge Information
						{/if}
					</span>
				</button>

				<div class="w-md max-w-lg m-1 p-1" class:hidden={!$ae_loc.edit_mode}>
					<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">{@html $lq__event_badge_template_obj.header_row_1}</div>
						<div class="row_two">{@html $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 $lq__event_badge_obj.title_names}<span class="title_names">{$lq__event_badge_obj.title_names}</span>{/if} -->

						<span class="full_name_override">
							{#if full_name_override}
								{@html full_name_override.trim()}
							{:else}
								-- no name --
							{/if}
						</span>

						<!-- {#if $lq__event_badge_obj.designations}<span class="designations">{$lq__event_badge_obj.designations}</span>{/if} -->
					</div>

					{#if professional_title_override}
						<div
							class="professional_title
                        {professional_title_class_size} leading-none
                        italic
                        "
						>
							{@html professional_title_override}
						</div>
					{/if}
				</div>

				<!-- {#if $lq__event_badge_obj.pronouns}
        <div class="pronouns">
            <span class="pronouns">{@html $lq__event_badge_obj.pronouns}</span>
        </div>
        {/if} -->

				<!-- {#if $lq__event_badge_obj.professional_title}
        <div class="professional_title">
            <span class="professional_title" class:str_25={$lq__event_badge_obj.professional_title.length>25}>{@html $lq__event_badge_obj.professional_title}</span>
        </div>
        {/if} -->

				{#if affiliations_override || location_override}
					<div
						class="affiliations_location
                max-h-[3.0in] m-0 p-0
                hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
                "
					>
						{#if affiliations_override}
							<div
								class="affiliations
                        {affiliations_class_size} leading-none
                        "
							>
								{@html affiliations_override}
							</div>
						{/if}

						{#if location_override}
							<div
								class="location
                        {location_class_size} leading-none
                        "
							>
								<span class="city state_province country">{@html location_override}</span>
							</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}
					<div class="special">
						<span class="badge_body_special_left">
							<!-- {#if option_ticket_1_override}<span class="ticket_1_code fg_red fas fa-star"></span>{/if} -->
							{#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>
								<!-- <span class=" ticket_2_code fg_gold 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
            {use_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={use_badge_type_code}
			>
				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">{@html option_other_1_override}</span>
				{/if}

				<span class="badge_footer_center {use_badge_type_code.toLowerCase()}"
					>{@html use_badge_type}</span
				>

				<!-- {#if $lq__event_badge_obj.other_2}
            <span class="badge_footer_special_right"><span class="fas fa-star-of-life"></span></span>
        {/if} -->

				{#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">{@html option_other_2_override}</span>
				{/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">{@html $lq__event_badge_template_obj.header_row_1}</div>
						<div class="row_two">{@html $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>{@html $lq__event_badge_template_obj.ticket_1_text}</li>
							{/if}
							{#if $lq__event_badge_obj.ticket_2_code}
								<li>{@html $lq__event_badge_template_obj.ticket_2_text}</li>
							{/if}
							{#if $lq__event_badge_obj.ticket_3_code}
								<li>{@html $lq__event_badge_template_obj.ticket_3_text}</li>
							{/if}
							{#if $lq__event_badge_obj.ticket_4_code}
								<li>{@html $lq__event_badge_template_obj.ticket_4_text}</li>
							{/if}
							{#if $lq__event_badge_obj.ticket_5_code}
								<li>{@html $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)}
										- {@html 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)}
										- {@html 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}{@html $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}{@html $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}{@html $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}{@html $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}{@html $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}{@html $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}{@html $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}{@html $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>
