<script lang="ts">
	console.log(`ae_events_leads exhibit [slug] leads_view.svelte`);

	import { fade } from 'svelte/transition';

	import type { key_val } from '$lib/stores/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	import { liveQuery } from 'dexie';
	import { db_events } from '$lib/ae_events/db_events';
	import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger
	} from '$lib/stores/ae_events_stores';
	import { events_func } from '$lib/ae_events_functions';

	import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';

	let ae_promises: key_val = {}; // Promise<any>;

	// These will likely be used for patch/update triggers. Maybe delete?
	let ae_triggers: key_val = {};

	$: event_exhibit_obj = liveQuery(() => db_events.exhibit.get($events_slct.exhibit_id));

	$: event_exhibit_tracking_obj = liveQuery(() =>
		db_events.exhibit_tracking.get($events_slct.exhibit_tracking_id)
	);

	// Quickly reload the data for this AE object from the API/DB
	$: if ($events_slct.exhibit_tracking_id) {
		console.log(`Reloading exhibit_tracking object:`, $events_slct.exhibit_tracking_id);
		events_func.handle_load_ae_obj_id__exhibit_tracking({
			api_cfg: $ae_api,
			exhibit_tracking_id: $events_slct.exhibit_tracking_id
		});
	}

	async function handle_submit_form_lead_update(event) {
		console.log('*** handle_submit_form_lead_update() ***');

		// Data in
		let form_data = new FormData(event.target);
		console.log(form_data);

		let exhibit_lead_di: key_val = ae_util.extract_prefixed_form_data({
			prefix: null,
			form_data: form_data,
			trim_values: true,
			bool_tf_str: true,
			log_lvl: 0
		});
		console.log(`exhibit_lead_di:`, exhibit_lead_di);

		// Data out
		let exhibit_lead_do: key_val = {};

		if (!$events_slct.exhibit_tracking_id) {
			console.error(`No exhibit_tracking_id set`);
			return false;
		}

		if (typeof exhibit_lead_di.exhibitor_notes !== 'undefined') {
			exhibit_lead_do.exhibitor_notes = exhibit_lead_di.exhibitor_notes;
		}

		if (typeof exhibit_lead_di.external_person_id !== 'undefined') {
			exhibit_lead_do.external_person_id = exhibit_lead_di.external_person_id;
		}

		let temp_questions = $events_slct.exhibit_tracking_obj.responses_json ?? {};

		for (const [key, value] of Object.entries(exhibit_lead_di)) {
			console.log(`${key}: ${value}`);
			if (key.startsWith('event_lead__leads_custom_question_')) {
				let code = key.replace('event_lead__leads_custom_question_', '');
				console.log(`Custom Question: ${code} = ${value}`);
				temp_questions[code] = { response: value };
			} else {
				// exhibit_lead_do[key] = value;
			}
		}

		console.log(temp_questions);

		if (temp_questions) {
			exhibit_lead_do.responses_json = temp_questions;
			// exhibit_lead_do.responses_json = JSON.stringify(temp_questions);
		}

		ae_promises.update__exhibit_tracking_obj = events_func
			.handle_update_ae_obj__exhibit_tracking({
				api_cfg: $ae_api,
				exhibit_tracking_id: $events_slct.exhibit_tracking_id,
				data: exhibit_lead_do
			})
			.then(function (update__exhibit_tracking_obj) {
				console.log(`update__exhibit_tracking_obj=`, update__exhibit_tracking_obj);

				if (update__exhibit_tracking_obj) {
					$events_slct.exhibit_tracking_obj = update__exhibit_tracking_obj;

					// $slct_trigger = 'load__exhibit_tracking_obj';
					$events_sess.leads.submit_status = 'updated';
				} else {
					console.log('No results returned.');
					$events_sess.leads.submit_status = 'updated_unknown';

					console.log('Trigger a reload of the object.');
					// $slct_trigger = 'load__exhibit_tracking_obj';
				}

				$events_sess.leads.disable_submit__exhibit_tracking_obj = false;
				$events_sess.leads.lead_data_changed = false;
			});
		console.log(ae_promises.update__exhibit_tracking_obj);
		// if (ae_promises.update__exhibit_tracking_obj.event_exhibit_tracking_id_random) {
		//     console.log('Event exhibit_tracking_id_random found was found. It was updated.');
		//     $events_slct.exhibit_tracking_obj = ae_promises.update__exhibit_tracking_obj;

		//     // $slct_trigger = 'load__exhibit_tracking_obj';
		//     $events_sess.leads.submit_status = 'updated';
		// } else {
		//     console.log('No event_exhibit_tracking_id_random found was found. Something may have gone wrong.');
		//     $events_sess.leads.submit_status = 'updated_unknown';

		//     console.log('Trigger a reload of the object.');
		//     // $slct_trigger = 'load__exhibit_tracking_obj';
		// }
		// $events_sess.leads.disable_submit__exhibit_tracking_obj = false;
		// $events_sess.leads.lead_data_changed = false;
	}
</script>

<!-- <section class="leads_view min-w-full flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix"> -->

<div class="ae_quick_modal_container">
	<section
		class="
            ae_quick_popover
            events__leads__view_lead
            z-50
            flex
            flex-col
            gap-2
            justify-stretch
            max-h-full
            min-w-full
            "
	>
		<header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
			<h2 class="h3">
				<span class="text-sm">Lead:</span>
				{#if $event_exhibit_tracking_obj?.priority}
					<span class="fas fa-star m-1"></span>
				{:else}
					<span class="far fa-star m-1 hidden"></span>
				{/if}

				{$event_exhibit_tracking_obj?.event_badge_full_name}
				<span class="text-xs text-slate-500">
					{$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
				</span>
			</h2>

			{#if $events_sess.leads.lead_data_changed}
				<button
					type="submit"
					form="form__lead_update"
					class="btn preset-tonal-error border border-error-500"
					on:click={() => {
						$events_sess.leads.lead_data_changed = false;
					}}
				>
					<span class="fas fa-exclamation-triangle mx-1"></span>
					Save Changes?
				</button>
			{/if}

			{#await ae_promises.update__exhibit_tracking_obj}
				<div class="modal-loading" out:fade={{ duration: 500 }}>
					<span class="fas fa-spinner fa-spin"></span>
					<span class="loading-text">
						<!-- <ProgressRadial value={undefined} /> -->
						Saving...
					</span>
				</div>
			{:then update__exhibit_tracking_obj}
				<!-- {#if update__exhibit_tracking_obj} -->
				{#if $events_sess.leads.lead_data_changed === false}
					<div class="modal-loading">
						<span class="fas fa-check-circle"></span>
						<span class="loading-text">Successfully saved!</span>
					</div>
				{/if}
				<!-- {/if} -->
			{:catch error}
				<div class="modal-loading">
					<span class="fas fa-exclamation-triangle"></span>
					<span class="loading-text">Error: {error.message}</span>
				</div>
			{/await}

			<div class="popover__actions">
				<button
					type="button"
					class="btn preset-tonal-primary"
					on:click={() => {
						$events_sess.leads.lead_data_changed = null;
						$events_sess.leads.show_form__view_lead = false;
					}}
				>
					<span class="fas fa-times mx-1"></span>
					Close
				</button>
			</div>
		</header>

		<section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
			<div class="readonly_values">
				<div class="email ae_obj_prop">
					<span class="label">Email:</span>
					<span class="value">
						<a
							href="mailto:{$event_exhibit_tracking_obj?.event_badge_email}"
							class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
						>
							<!-- {$event_exhibit_tracking_obj?.event_badge_given_name} {$event_exhibit_tracking_obj?.event_badge_family_name} -->
							<!-- &lt; -->
							{$event_exhibit_tracking_obj?.event_badge_email}
							<!-- &gt; -->
						</a>
					</span>
				</div>

				{#if $event_exhibit_tracking_obj?.event_badge_professional_title || $event_exhibit_tracking_obj?.event_badge_professional_title_override}
					<div class="professional_title ae_obj_prop">
						<span class="label" title="Professional Title/Degrees/Credentials"
							>Titles <span class="text-sm">(degrees, credentials)</span>:</span
						>
						<span class="value">
							{#if $event_exhibit_tracking_obj?.event_badge_professional_title_override}
								{$event_exhibit_tracking_obj?.event_badge_professional_title_override}
							{:else}
								{$event_exhibit_tracking_obj?.event_badge_professional_title}
							{/if}
						</span>
					</div>
				{/if}

				{#if $event_exhibit_tracking_obj?.event_badge_affiliations || $event_exhibit_tracking_obj?.event_badge_affiliations_override}
					<div class="affiliations ae_obj_prop">
						<span class="label">Affiliations:</span>
						<span class="value">
							{#if $event_exhibit_tracking_obj?.event_badge_affiliations_override}
								{$event_exhibit_tracking_obj?.event_badge_affiliations_override}
							{:else}
								{$event_exhibit_tracking_obj?.event_badge_affiliations}
							{/if}
						</span>
					</div>
				{/if}

				{#if $event_exhibit_tracking_obj?.event_badge_country}
					<div class="location ae_obj_prop">
						<span class="label">Location:</span>
						<span class="value">
							<!-- <span class="city">{$event_exhibit_tracking_obj?.event_badge_city}</span> -->
							<!-- <span class="state_province">{$event_exhibit_tracking_obj?.event_badge_state_province}</span> -->
							<span class="country">{$event_exhibit_tracking_obj?.event_badge_country}</span>
						</span>
					</div>
				{/if}
			</div>
			<!-- .readonly_values -->

			<div
				class="
    flex flex-row wrap gap-1
    items-center justify-evenly
    content-evenly
    w-full
    "
			>
				<!-- Priority (star) means this should be sorted at the top of lists. -->
				<Element_ae_crud
					trigger_patch={ae_triggers.priority}
					api_cfg={$ae_api}
					object_type={'event_exhibit_tracking'}
					object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
					field_name={'priority'}
					field_type={'button'}
					field_value={$events_slct.exhibit_tracking_obj.priority}
					allow_null={false}
					hide_edit_btn={true}
					outline_element={false}
					show_crud={false}
					display_inline={true}
					class_li={'m-1'}
					on:ae_crud_updated={(e) => {
						console.log(`ae_crud_updated event:`, e.detail);
						events_func.handle_load_ae_obj_id__exhibit_tracking({
							api_cfg: $ae_api,
							exhibit_tracking_id: $events_slct.exhibit_tracking_id
						});
					}}
				>
					{#if $event_exhibit_tracking_obj?.priority}
						<span class="fas fa-star m-1"></span> Stared
					{:else}
						<span class="far fa-star m-1"></span> Not Stared
					{/if}
					<button
						type="button"
						on:click={() => {
							$events_slct.exhibit_tracking_obj.priority = !$event_exhibit_tracking_obj?.priority;
							ae_triggers.priority = true;
						}}
						class="btn btn-sm preset-tonal-warning"
					>
						{#if $event_exhibit_tracking_obj?.priority}
							<span class="fas fa-sync m-1"></span> Remove?
						{:else}
							<span class="fa fa-sync m-1"></span> Star?
						{/if}
					</button>
				</Element_ae_crud>

				<!-- Sort (rank) is a rank from 1 to 5 with 1 being the highest ranked. This should be a group of 5 buttons in a row. Use Tailwind CSS. -->
				<Element_ae_crud
					trigger_patch={ae_triggers.sort}
					api_cfg={$ae_api}
					object_type={'event_exhibit_tracking'}
					object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
					field_name={'sort'}
					field_type={'button'}
					field_value={$events_slct.exhibit_tracking_obj.sort}
					allow_null={false}
					hide_edit_btn={true}
					outline_element={false}
					show_crud={false}
					display_inline={true}
					class_li={'m-1'}
					on:ae_crud_updated={(e) => {
						console.log(`ae_crud_updated event:`, e.detail);
						events_func.handle_load_ae_obj_id__exhibit_tracking({
							api_cfg: $ae_api,
							exhibit_tracking_id: $events_slct.exhibit_tracking_id
						});
					}}
				>
					{#if $event_exhibit_tracking_obj?.sort}
						<span class="fas fa-sort-numeric-up m-1"></span> Ranked
					{:else}
						<span class="fas fa-sort-numeric-down m-1"></span> Not Ranked
					{/if}
					<select
						name="sort"
						class="select max-w-48 m-1"
						bind:value={$events_slct.exhibit_tracking_obj.sort}
						on:change={() => {
							// Not using the Dexie liveQuery for this. It's not working as expected. When you bind to the value it is sometimes undefined.
							// $event_exhibit_tracking_obj.sort = $events_slct.exhibit_tracking_obj.sort;
							// console.log(`Sort changed:`, $events_slct.exhibit_tracking_obj?.sort);
							ae_triggers.sort = true;
						}}
					>
						<option value="">-- Not Selected --</option>
						<option value={1}>1 - Highest</option>
						<option value={2}>2</option>
						<option value={3}>3 - Neutral</option>
						<option value={4}>4</option>
						<option value={5}>5 - Lowest</option>
					</select>
				</Element_ae_crud>
			</div>

			<form
				id="form__lead_update"
				class="form"
				on:submit|preventDefault={handle_submit_form_lead_update}
			>
				<!-- <input
        type="text"
        name="event_badge_full_name"
        placeholder="Full name"
        value={$event_exhibit_tracking_obj?.event_badge_full_name}
        required
        class="input max-w-48 m-1"
        /> -->

				<!-- <input
        type="email"
        name="event_badge_email"
        placeholder="Email address"
        value={$event_exhibit_tracking_obj?.event_badge_email}
        required
        class="input max-w-64 m-1"
        /> -->

				<!-- This checkbox is to mark this lead as priority/important. -->
				<!-- <div class="event_lead__priority">
    <label for="event_lead__priority" class="label">Priority:
    <input
        id="event_lead__priority"
        type="checkbox"
        name="priority"
        value="1"
        checked={$event_exhibit_tracking_obj?.priority}
        class="checkbox m-1"
        />
    </label>
    </div> -->

				<!-- This is a selection list for ranking options from "-- Not Selected --", "1 - Highest", "2", "3- Neutral", "4", "5 - Lowest". -->
				<!-- <div class="event_lead__sort">
    <label for="event_lead__sort" class="label">Rank:
    <select
        id="event_lead__sort"
        name="sort"
        class="select max-w-48 m-1"
        value={$event_exhibit_tracking_obj?.sort}
        >
        <option value="" selected>-- Not Selected --</option>
        <option value={1}>1 - Highest</option>
        <option value={2}>2</option>
        <option value={3}>3 - Neutral</option>
        <option value={4}>4</option>
        <option value={5}>5 - Lowest</option>
    </select>
    </div> -->

				<!-- These are notes by the exhibit staff about this lead -->
				<div class="event_lead__exhibitor_notes">
					<label for="exhibitor_notes" class="label"
						>Notes:
						<textarea
							id="exhibitor_notes"
							name="exhibitor_notes"
							cols="70"
							rows="5"
							placeholder="Staff notes"
							class="textarea my-1"
							on:change={() => {
								$events_sess.leads.lead_data_changed = true;
							}}>{$event_exhibit_tracking_obj?.exhibitor_notes}</textarea
						>
					</label>
				</div>

				<!-- This is for custom questions for a specific exhibit. -->
				{#if $event_exhibit_obj?.leads_custom_questions_json}
					<!-- Exhibit: {$event_exhibit_obj?.leads_custom_questions_json[0].code} -->

					{#if $event_exhibit_obj?.leads_custom_questions_json.length > 0}
						<div class="custom_questions">
							<fieldset id="custom_questions">
								<legend class="legend">
									Custom Questions:
									<button
										type="button"
										on:click={() => {
											$events_loc.leads.show_content__custom_question_descriptions =
												!$events_loc.leads.show_content__custom_question_descriptions;
										}}
										class="btn btn-sm preset-tonal-primary"
									>
										<span class="fas fa-info-circle"></span>
										{#if $events_loc.leads.show_content__custom_question_descriptions}
											<span class="">Hide descriptions</span>
										{:else}
											<span class="sr-only">Show descriptions</span>
										{/if}
									</button>
								</legend>

								{#each $event_exhibit_obj?.leads_custom_questions_json as leads_custom_question, question_index}
									<div class="flex flex-col sm:flex-row wrap justify-between m-1">
										<span class="leads_custom_question text-xs"
											>{leads_custom_question.question}</span
										>

										{#if leads_custom_question.type == 'text'}
											<input
												name="event_lead__leads_custom_question_{leads_custom_question.code}"
												value={$event_exhibit_tracking_obj?.responses_json &&
												$event_exhibit_tracking_obj?.responses_json[leads_custom_question.code]
													? $event_exhibit_tracking_obj?.responses_json[leads_custom_question.code]
															.response
													: null}
												placeholder="Response"
												class="leads_custom_question_response input w-96 text-xs"
												on:change={() => {
													$events_sess.leads.lead_data_changed = true;
												}}
											/>
										{:else if leads_custom_question.type == 'option' && leads_custom_question.option_li}
											<select
												name="event_lead__leads_custom_question_{leads_custom_question.code}"
												class="leads_custom_question_response select w-96 text-xs"
												value={$event_exhibit_tracking_obj?.responses_json &&
												$event_exhibit_tracking_obj?.responses_json[leads_custom_question.code]
													? $event_exhibit_tracking_obj?.responses_json[leads_custom_question.code]
															.response
													: null}
												on:change={() => {
													$events_sess.leads.lead_data_changed = true;
												}}
											>
												{#each leads_custom_question.option_li as option}
													<option value={option}>{option}</option>
												{/each}
											</select>
										{:else}
											Response type not yet configured
										{/if}
										<!-- Show or hide the description of the question. This is often just the full version of the question because otherwise there is not enough space. -->
										{#if $events_loc.leads.show_content__custom_question_descriptions && leads_custom_question?.description}
											<span class="text-xs text-slate-500"
												>{leads_custom_question?.description ?? ''}</span
											>
										{/if}
									</div>
								{/each}
							</fieldset>
						</div>
					{/if}
				{/if}

				<div class="event_lead__external_person_id my-4 mt-8">
					{#if $events_loc.leads.show_content__email_link_warning}
						<div class="border border-slate-500/10 p-2 m-1 preset-tonal-warning">
							<button
								type="button"
								on:click={() => {
									$events_loc.leads.show_content__email_link_warning = false;
								}}
								class="btn btn-sm preset-tonal-warning float-right"
							>
								<span class="fas fa-times mx-1"></span>
								<span class="sr-only">Close</span>
							</button>
							This is the email address of the person that originally scanned the badge. This is used
							to link the lead to the person that scanned the badge. This is useful for tracking who
							scanned the badge and who the lead is associated with.
						</div>
					{/if}
					<label for="event_lead__external_person_id" class="label m-1">
						Linked email:
						<button
							type="button"
							on:click={() => {
								$events_loc.leads.show_content__email_link_warning =
									!$events_loc.leads.show_content__email_link_warning;
							}}
							class="btn btn-sm preset-tonal-warning"
						>
							<span class="fas fa-info-circle"></span>
							{#if $events_loc.leads.show_content__email_link_warning}
								<!-- <span class="sr-only">Hide warning</span> -->
							{:else}
								<span class="sr-only">Show warning</span>
							{/if}
						</button>
						<input
							id="event_lead__external_person_id"
							type="text"
							name="external_person_id"
							placeholder="Linked to email"
							value={$event_exhibit_tracking_obj?.external_person_id ??
								$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
							required
							class="input w-80 m-1 text-xs"
						/>
					</label>
				</div>
			</form>

			<div>
				<!-- Exhibit: {$event_exhibit_obj?.name}<br> -->
				<!-- Person: {$event_exhibit_tracking_obj?.event_badge_full_name} -->
			</div>
		</section>
		<!-- .popover__content -->

		<footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
			<div class="popover__content__actions">
				<button
					type="submit"
					form="form__lead_update"
					disabled={$events_sess.leads.disable_submit__exhibit_tracking_obj}
					on:click={() => {
						// trigger = 'save__ds__code';
						// $slct_trigger = 'save__ds__code';
					}}
					class="btn preset-tonal-primary border border-primary-500"
					class:preset-tonal-error={$events_sess.leads.lead_data_changed}
					class:border-error-500={$events_sess.leads.lead_data_changed}
				>
					<span class="fas fa-save mx-1"></span>
					Save
					{#if $events_sess.leads.lead_data_changed}
						Changes?
					{/if}
					{#await ae_promises.update__exhibit_tracking_obj}
						<div class="modal-loading" out:fade={{ duration: 500 }}>
							<span class="fas fa-spinner fa-spin"></span>
							<span class="loading-text">
								<!-- <ProgressRadial value={undefined} /> -->
								Saving...
							</span>
						</div>
					{:then update__exhibit_tracking_obj}
						{#if update__exhibit_tracking_obj}
							<div class="modal-loading" out:fade={{ duration: 1500 }}>
								<span class="fas fa-check-circle"></span>
								<!-- <span class="loading-text">Successfully saved!</span> -->
							</div>
						{/if}
					{:catch error}
						<div class="modal-loading">
							<span class="fas fa-exclamation-triangle"></span>
							<span class="loading-text">Error: {error.message}</span>
						</div>
					{/await}
				</button>

				<Element_ae_crud
					trigger_patch={ae_triggers.hide}
					api_cfg={$ae_api}
					object_type={'event_exhibit_tracking'}
					object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
					field_name={'hide'}
					field_type={'button'}
					field_value={$events_slct.exhibit_tracking_obj.hide}
					allow_null={false}
					hide_edit_btn={true}
					outline_element={false}
					show_crud={false}
					display_inline={true}
					class_li={'m-1'}
					on:ae_crud_updated={(e) => {
						console.log(`ae_crud_updated event:`, e.detail);
						events_func.handle_load_ae_obj_id__exhibit_tracking({
							api_cfg: $ae_api,
							exhibit_tracking_id: $events_slct.exhibit_tracking_id
						});
					}}
				>
					{#if $ae_loc.trusted_access}
						{$event_exhibit_tracking_obj?.hide ? 'Hidden' : 'Not Hidden'}
					{/if}
					<button
						on:click={() => {
							$events_slct.exhibit_tracking_obj.hide = !$event_exhibit_tracking_obj?.hide;
							ae_triggers.hide = true;
						}}
						class="btn btn-sm preset-tonal-warning"
					>
						{#if $ae_loc.trusted_access}
							{#if $event_exhibit_tracking_obj?.hide}
								<span class="fas fa-eye m-1"></span> Unhide?
							{:else}
								<span class="fas fa-eye-slash m-1"></span> Hide?
							{/if}
						{:else}
							<!-- Users see this as the "Archive" option button -->
							{#if $event_exhibit_tracking_obj?.hide}
								<span class="fas fa-archive m-1"></span> Unarchive
							{:else}
								<span class="fas fa-archive m-1"></span> Archive
							{/if}
						{/if}
					</button>
				</Element_ae_crud>

				<!-- {#if $ae_loc.trusted_access} -->
				<Element_ae_crud
					trigger_patch={ae_triggers.enable}
					api_cfg={$ae_api}
					object_type={'event_exhibit_tracking'}
					object_id={$event_exhibit_tracking_obj?.event_exhibit_tracking_id_random}
					field_name={'enable'}
					field_type={'button'}
					field_value={$events_slct.exhibit_tracking_obj.enable}
					allow_null={false}
					hide_edit_btn={true}
					outline_element={false}
					show_crud={false}
					display_inline={true}
					class_li={'m-1'}
					on:ae_crud_updated={(e) => {
						console.log(`ae_crud_updated event:`, e.detail);
						events_func.handle_load_ae_obj_id__exhibit_tracking({
							api_cfg: $ae_api,
							exhibit_tracking_id: $events_slct.exhibit_tracking_id
						});

						let load_event_exhibit_tracking_obj_li =
							events_func.handle_load_ae_obj_li__exhibit_tracking({
								api_cfg: $ae_api,
								exhibit_id: $event_exhibit_obj?.event_exhibit_id_random,
								params: { enabled: 'all', qry__limit: 200 }
							});
						console.log(
							`load_event_exhibit_tracking_obj_li = `,
							load_event_exhibit_tracking_obj_li
						);

						if (!$ae_loc.trusted_access) {
							$events_sess.leads.show_form__view_lead = false;
							$events_sess.leads.lead_data_changed = null;
						}
					}}
				>
					{#if $ae_loc.trusted_access}
						{$event_exhibit_tracking_obj?.enable ? 'Enabled' : 'Not Enabled'}:
					{/if}
					<button
						on:click={() => {
							if (confirm('Are you sure you want to remove this lead?')) {
								console.log('Removing lead...');
							} else {
								return false;
							}

							$events_slct.exhibit_tracking_obj.enable = !$event_exhibit_tracking_obj?.enable;
							ae_triggers.enable = true;
						}}
						class="btn btn-sm preset-tonal-success"
					>
						{#if $ae_loc.trusted_access}
							{#if $event_exhibit_tracking_obj?.enable}
								<span class="fas fa-toggle-on m-1"></span> Disable
							{:else}
								<span class="fas fa-toggle-off m-1"></span> Enable
							{/if}
						{:else}
							<!-- Users see this as the "Remove" or trash option button -->
							{#if $event_exhibit_tracking_obj?.enable}
								<span class="fas fa-trash m-1"></span> Remove
							{:else}
								Nope
							{/if}
						{/if}
					</button>
				</Element_ae_crud>
				<!-- {/if} -->
			</div>

			<div class="popover__actions">
				<button
					type="button"
					class="btn preset-tonal-primary"
					on:click={() => {
						$events_sess.leads.show_form__view_lead = false;
						$events_sess.leads.lead_data_changed = null;
					}}
				>
					<span class="fas fa-times mx-1"></span>
					Close
				</button>
			</div>
		</footer>
		<!-- .popover__footer -->
	</section>
	<!-- .ae_quick_popover -->
</div>

<!-- .ae_quick_modal_container -->

<style lang="postcss">
	/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
	div.ae_quick_modal_container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: hsla(0, 0%, 0%, 0.5);
	}

	/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
	section.ae_quick_popover {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
		background-color: hsla(0, 0%, 100%, 0.95);
		padding: 1rem;
		border-radius: 0.5rem;
		box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5);

		min-height: 98%;
		min-width: 98%;
	}

	section.ae_quick_popover_small {
		position: fixed;
		top: 1em;
		left: 50%;
		transform: translate(-50%, 0%);
		z-index: 100;
		background-color: hsla(0, 0%, 100%, 0.95);
		padding: 1rem;
		border-radius: 0.5rem;
		box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5);

		min-hight: 24rem;
		max-height: 95%;
		min-width: 50%;
		max-width: 95%;
	}
</style>
