<script lang="ts">
	interface Props {
		log_lvl?: number;
		// export let lq__event_obj: any;
		lq__event_presenter_obj: any; // This is the currently selected presenter.
		lq__event_session_obj: any;
		// );
		lq__auth__event_presenter_obj: any;
		lq__event_presentation_obj_li: any;
	}

	let {
		log_lvl = 2,
		lq__event_presenter_obj,
		lq__event_session_obj,
		lq__auth__event_presenter_obj,
		lq__event_presentation_obj_li
	}: Props = $props();

	if (log_lvl) {
		console.log(`ae_events_pres_mgmt session_view.svelte`);
	}

	// Imports (external and then internal)
	// import { liveQuery } from "dexie";
	import { Modal } from 'flowbite-svelte';
	// import { Clipboard } from "flowbite-svelte";

	// const dispatch = createEventDispatcher();

	import type { key_val } from '$lib/stores/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';
	// import Element_data_store from '$lib/element_data_store_v2.svelte';
	import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';

	let ae_promises: key_val = $state({});
	let ae_tmp: key_val = $state({});
	let ae_triggers: key_val = {};

	import { core_func } from '$lib/ae_core/ae_core_functions';
	// import { db_events } from "$lib/ae_events/db_events";
	import {
		ae_snip,
		ae_loc,
		ae_sess,
		ae_api,
		ae_trig,
		slct,
		slct_trigger
	} from '$lib/stores/ae_stores';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger,
		events_trig_kv
	} from '$lib/stores/ae_events_stores';
	import { events_func } from '$lib/ae_events_functions';

	// import Comp_event_presenter_form_agree from './ae_comp__event_presenter_form_agree.svelte';
	import Comp_event_presentation_obj_li from './../../../ae_comp__event_presentation_obj_li.svelte';
	import Comp_event_session_poc_profile from '././ae_comp__event_session_poc_profile.svelte';
	import Comp_event_session_poc_form_agree from '././ae_comp__event_session_poc_form_agree.svelte';

	// Exports
	// export let event_session_id: string;
	// export let event_session_obj: key_val;
	// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

	if (!$events_sess.pres_mgmt) {
		$events_sess.pres_mgmt = {};
		$events_sess.pres_mgmt.show_modal__presenter_agree = null;
		$events_sess.pres_mgmt.show_content__presenter_start = null;
	}

	$events_sess.pres_mgmt.show_modal__presenter_agree = false;
	$events_sess.pres_mgmt.show_content__presenter_start = false;

	// let poc_type = $events_loc.pres_mgmt.label__session_poc_type;

	// Local Variables

	$slct.person_obj_kv = {}; // This is intended for the person POC lookup list when generated.

	// *** Functions and Logic
	$events_sess.pres_mgmt.session__updated_on = null;
	$effect(() => {
		//  && !$events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id] === undefined
		if (
			lq__event_session_obj &&
			lq__event_session_obj?.event_session_id &&
			$events_loc.pres_mgmt.show_content__session_qr &&
			!$events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id]
		) {
			if (log_lvl > 1) {
				console.log(`$lq__event_session_obj:`, lq__event_session_obj);
			}

			$events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id] = true;

			// session_qr_url is a key value of session_id and URL string
			// $events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id] = null;

			if (lq__event_session_obj.updated_on == $events_sess.pres_mgmt.session__updated_on) {
				if (log_lvl > 1) {
					console.log('Updated on is the same.');
				}
			} else {
				if (log_lvl) {
					console.log('Updated on is different.');
				}
				// FUTURE USE: Generate a QR code for the object ID.
				// ae_promises.generate_qr_code_obj_id = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'obj', qr_id: lq__event_session_obj?.event_session_id, obj_type: 'event_session', obj_id: lq__event_session_obj?.event_session_id});

				// Generate a QR code for the URL.
				let qr_id_url = `${lq__event_session_obj?.event_session_id}_url`;

				// URL for this page (be sure to URL encode it):
				let url_str = `${$ae_loc.url_origin}/events/${lq__event_session_obj?.event_id}/session/${lq__event_session_obj?.event_session_id}`;
				url_str = encodeURI(url_str);

				ae_promises.generate_qr_code_url = core_func
					.generate_qr_code({
						api_cfg: $ae_api,
						account_id: $slct.account_id,
						qr_type: 'str',
						qr_id: qr_id_url,
						str: url_str,
						return_blob: true
					})
					.then(function (result) {
						if (log_lvl) {
							console.log('QR code URL generated:', result);
						}
						// Store the URL string in the key value for use in the QR code image src.
						$events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id] = result;
						return result;
					});
				// console.log(`ae_promises.generate_qr_code_url = `, ae_promises.generate_qr_code_url);

				$events_sess.pres_mgmt.session__updated_on = lq__event_session_obj?.updated_on;
			}
		} else {
			// if (log_lvl) {
			//     console.log('Clearing the URL.');
			// }
			// ae_promises.generate_qr_code_url = null;
			// // Resetting the updated_on value helps with the QR code come back when switched back on.
			// $events_sess.pres_mgmt.session__updated_on = null;
		}
	});

	let clipboard_success = $state(false);
</script>

{#if $lq__event_session_obj}
	<section class="p-2">
		<!-- {#if $events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id] && $events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id].length > 10}
<img
    class="qr_code qr_type_url h-32 w-32 hover:h-48 hover:w-48 outline"
    style=""
    src={$events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id]}
    alt="URL QR code"
    />
{:else}
    No QR URL yet
{/if} -->

		{#if $events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id]}
			<div
				class="
            float-right m-1 p-1
            flex flex-col items-center justify-center
            outline outline-gray-200
            transition-all
            group
            "
			>
				{#if $events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id]}
					<!-- svelte-ignore a11y_click_events_have_key_events -->
					<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
					<img
						src={$events_sess.pres_mgmt.session_qr_url[lq__event_session_obj?.event_session_id]}
						onclick={() => {
							$events_sess.pres_mgmt.qr_bigger = !$events_sess.pres_mgmt.qr_bigger;
						}}
						class:h-48={$events_sess.pres_mgmt.qr_bigger}
						class:w-48={$events_sess.pres_mgmt.qr_bigger}
						class:hover:h-96={$events_sess.pres_mgmt.qr_bigger}
						class:hover:w-96={$events_sess.pres_mgmt.qr_bigger}
						class="qr_code qr_type_url
                h-32 w-32
                hover:h-54 hover:w-54
                transition-all ease-in-out duration-500
                "
						alt="URL QR code"
					/>
				{:else}
					No QR URL yet
				{/if}
				<MyClipboard
					value={encodeURI(
						`${$ae_loc.url_origin}/events/${lq__event_session_obj?.event_id}/session/${lq__event_session_obj?.event_session_id}`
					)}
					btn_text="Copy URL"
					btn_title="Copy the session URL to your clipboard"
					btn_class="m-1 btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 border border-warning-500 hover:preset-filled-warning-500"
					hide_icon={true}
					hide_text={true}
				>
					<span class="fas fa-link"></span>
					<span>Session URL</span>
				</MyClipboard>
				<div class="hidden group-hover:block text-xs italic text-center text-gray-500 p-1">
					This QR is a link back to this page.
				</div>
				<!-- {JSON.stringify($events_sess.pres_mgmt.session_qr_url, null, 2)} -->
			</div>
		{/if}

		<ul class="space-y-2 px-4">
			<li>
				{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
					<Element_ae_crud
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={lq__event_session_obj?.event_session_id}
						field_name={'name'}
						field_type={'text'}
						field_value={lq__event_session_obj?.name}
						allow_null={false}
						hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
						outline_element={false}
						show_crud={false}
						display_inline={true}
						display_block_edit={true}
						class_li={''}
						on:ae_crud_updated={(e) => {
							console.log(`ae_crud_updated:`, e.detail);

							events_func
								.load_ae_obj_id__event_session({
									api_cfg: $ae_api,
									event_session_id: lq__event_session_obj?.event_session_id,
									log_lvl: 1
								})
								.then(function (load_results) {});
						}}
					>
						<span class="text-sm text-semibold text-surface-600-400">Name/title:</span>
						<span class="font-semibold">
							{lq__event_session_obj.name}
						</span>
					</Element_ae_crud>
				{/if}

				{#if $ae_loc.edit_mode}
					<Element_ae_crud
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={lq__event_session_obj?.event_session_id}
						field_name={'code'}
						field_type={'text'}
						field_value={lq__event_session_obj?.code}
						allow_null={false}
						hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
						outline_element={false}
						show_crud={false}
						display_inline={true}
						display_block_edit={false}
						class_li={''}
						on:ae_crud_updated={(e) => {
							console.log(`ae_crud_updated:`, e.detail);

							events_func
								.load_ae_obj_id__event_session({
									api_cfg: $ae_api,
									event_session_id: lq__event_session_obj?.event_session_id,
									log_lvl: 1
								})
								.then(function (load_results) {});
						}}
					>
						<span
							class="
                    text-sm
                    bg-yellow-100 dark:bg-yellow-900
                    border border-yellow-200 dark:border-yellow-800
                    p-1 rounded-md
                    "
							title="Session code {lq__event_session_obj.code}"
						>
							<span class="text-sm text-semibold text-surface-600-400">code:</span>
							<span class="fas fa-barcode text-surface-600-400"></span>
							{lq__event_session_obj.code}
						</span>
					</Element_ae_crud>
				{/if}
			</li>
			<li>
				<span class="text-sm text-semibold text-surface-600-400">
					Date &
					<button
						type="button"
						onclick={() => {
							if ($events_loc.pres_mgmt.time_hours == 12) {
								$events_loc.pres_mgmt.time_hours = 24;
								$events_loc.pres_mgmt.datetime_format = 'datetime_long';
								$events_loc.pres_mgmt.time_format = 'time_short';
							} else {
								$events_loc.pres_mgmt.time_hours = 12;
								$events_loc.pres_mgmt.datetime_format = 'datetime_12_long';
								$events_loc.pres_mgmt.time_format = 'time_12_short';
							}
						}}
					>
						time
					</button>
					:</span
				>
				<span class="fas fa-calendar-alt text-surface-600-400"></span>
				<Element_ae_crud
					api_cfg={$ae_api}
					object_type={'event_session'}
					object_id={lq__event_session_obj?.event_session_id}
					field_name={'start_datetime'}
					field_type={'datetime'}
					field_value={lq__event_session_obj.start_datetime}
					allow_null={false}
					hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
					outline_element={false}
					show_crud={false}
					display_inline={true}
					class_li={'font-semibold'}
					on:ae_crud_updated={(e) => {
						console.log(`ae_crud_updated:`, e.detail);

						events_func.load_ae_obj_id__event_session({
							api_cfg: $ae_api,
							event_session_id: lq__event_session_obj?.event_session_id
						});
						// $events_trigger = 'load__event_session_obj_id';
						// $events_trig_kv['event_session_id'] = lq__event_session_obj?.event_session_id;
					}}
				>
					{ae_util.iso_datetime_formatter(lq__event_session_obj.start_datetime, 'dddd')},
					{ae_util.iso_datetime_formatter(
						lq__event_session_obj.start_datetime,
						$events_loc.pres_mgmt.datetime_format
					)}
				</Element_ae_crud>
				-
				<Element_ae_crud
					api_cfg={$ae_api}
					object_type={'event_session'}
					object_id={lq__event_session_obj?.event_session_id}
					field_name={'end_datetime'}
					field_type={'datetime'}
					field_value={lq__event_session_obj.end_datetime}
					allow_null={false}
					hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
					outline_element={false}
					show_crud={false}
					display_inline={true}
					class_li={''}
					on:ae_crud_updated={(e) => {
						console.log(`ae_crud_updated:`, e.detail);

						events_func.load_ae_obj_id__event_session({
							api_cfg: $ae_api,
							event_session_id: lq__event_session_obj?.event_session_id
						});
						// $events_trigger = 'load__event_session_obj_id';
						// $events_trig_kv['event_session_id'] = lq__event_session_obj?.event_session_id;
					}}
				>
					{ae_util.iso_datetime_formatter(
						lq__event_session_obj.end_datetime,
						$events_loc.pres_mgmt.time_format
					)}
				</Element_ae_crud>
			</li>
			<li>
				<span class="text-sm text-semibold text-surface-600-400"> Location/room: </span>
				<!-- Minimum level access to see the link here is trusted. Administrators can see even if the show launcher link is disabled. -->

				{#if $events_loc.pres_mgmt?.hide__launcher_link_legacy && $events_loc.pres_mgmt?.hide__launcher_link && !$ae_loc.edit_mode}
					<span>
						{lq__event_session_obj?.event_location_name ?? '-- not set --'}
					</span>
				{/if}

				<!-- Legacy link (Flask) -->
				<a
					data-sveltekit-preload-data="false"
					href="/event/{lq__event_session_obj?.event_id}/launcher/{lq__event_session_obj?.event_location_id}"
					class:hidden={$events_loc.pres_mgmt?.hide__launcher_link_legacy &&
						!($ae_loc.trusted_access && $ae_loc.edit_mode)}
					class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all"
					title={`Legacy Launcher (Flask): ${lq__event_session_obj?.event_location_name}\n${lq__event_session_obj?.event_location_id}`}
				>
					<span class="fas fa-paper-plane m-1"></span>
					{@html lq__event_session_obj?.event_location_name
						? lq__event_session_obj?.event_location_name
						: ae_snip.html__not_set}
				</a>

				<!-- New link (Svelte) -->
				<a
					data-sveltekit-preload-data="false"
					data-sveltekit-reload="true"
					href="/events/{lq__event_session_obj?.event_id}/launcher/{lq__event_session_obj?.event_location_id}?session_id={lq__event_session_obj?.event_session_id}"
					class:hidden={$events_loc.pres_mgmt?.hide__launcher_link &&
						!($ae_loc.trusted_access && $ae_loc.edit_mode)}
					class="btn btn-sm preset-tonal-tertiary hover:preset-filled-secondary-500 group transition-all"
					title={`Launcher (Svelte): ${lq__event_session_obj?.event_location_name}\n${lq__event_session_obj?.event_location_id}`}
				>
					<span class="fas fa-plane"></span>
					<span class="hidden group-hover:inline">
						{@html lq__event_session_obj.event_location_name
							? lq__event_session_obj.event_location_name
							: ae_snip.html__not_set}
					</span>
				</a>

				<!-- Location details link -->
				<a
					href="/events/{lq__event_session_obj?.event_id}/location/{lq__event_session_obj?.event_location_id}"
					class:hidden={$events_loc.pres_mgmt?.hide__location_link &&
						!($ae_loc.trusted_access && $ae_loc.edit_mode)}
					class="btn btn-sm preset-tonal-surface hover:preset-filled-tertiary-500 group transition-all"
					title={`Location Details: ${lq__event_session_obj?.event_location_name}\n${lq__event_session_obj?.event_location_id}`}
				>
					<span class="fas fa-map-marker-alt m-1"></span>
					<span class="hidden group-hover:inline">
						{@html lq__event_session_obj?.event_location_name
							? lq__event_session_obj?.event_location_name
							: ae_snip.html__not_set}
					</span>
				</a>

				{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
					<Element_ae_crud
						trigger_patch={ae_triggers.update_event_location}
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={lq__event_session_obj?.event_session_id}
						field_name={'event_location_id_random'}
						field_type={'select'}
						field_value={ae_tmp.event_location_id_random}
						select_option_li={$slct.event_location_obj_kv}
						val_empty_is_null={true}
						allow_null={$ae_loc.administrator_access}
						hide_edit_btn={true}
						outline_element={false}
						show_crud={ae_tmp.show__edit_event_location}
						display_inline={true}
						class_li={'m-1'}
						on:ae_crud_updated={(e) => {
							console.log(`ae_crud_updated:`, e.detail);

							events_func
								.load_ae_obj_id__event_session({
									api_cfg: $ae_api,
									event_session_id: lq__event_session_obj?.event_session_id,
									log_lvl: 1
								})
								.then(function (load_results) {
									ae_tmp.event_location_id = null;
									ae_tmp.show__edit_event_location = false;
								});
						}}
					>
						{#if ae_tmp?.show__edit_location}
							{#await $slct.event_location_obj_li}
								<span class="fas fa-spinner fa-spin mx-1"></span>
							{:then event_location_obj_li}
								<!-- {#if  event_location_obj_li && event_location_obj_li.length > 0}

                {/if} -->
							{/await}

							<button
								type="button"
								onclick={() => {
									console.log('Cancel editing the location for the session.');

									ae_tmp.event_location_id = null;
									ae_tmp.show__edit_event_location = false;
								}}
								class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
							>
								<span class="fas fa-times mx-1"></span>
								Cancel
							</button>
						{:else}
							<button
								type="button"
								onclick={() => {
									console.log('Edit the location for the session.');

									let params = {
										qry__limit: 50
									};

									// $slct.event_location_obj_li = await core_func.load_ae_obj_li__event_location({api_cfg: $ae_api, account_id: $slct.account_id, params: params});

									$slct.event_location_obj_li = events_func
										.load_ae_obj_li__event_location({
											api_cfg: $ae_api,
											for_obj_type: 'event',
											for_obj_id: lq__event_session_obj?.event_id,
											params: params,
											log_lvl: log_lvl
										})
										.then(function (load_results) {
											console.log(`Loaded event_location_obj_li:`, load_results);

											// We need to make this ready for the select option list. Convert the list to a key value pair with the event_location_id_random as the key. We also need to set the option text value to: name (room)
											if (load_results) {
												let event_location_obj_li = load_results;
												let event_location_obj_kv = {}; //: key_val = {};
												event_location_obj_kv[''] = '-- Select a location --';
												event_location_obj_li.forEach((event_location_obj) => {
													let option_text = `${event_location_obj.name} (${event_location_obj.code})`;
													event_location_obj_kv[event_location_obj.event_location_id_random] =
														option_text;
												});
												$slct.event_location_obj_kv = event_location_obj_kv;
											}
											// $slct.event_location_obj_kv = $slct.event_location_obj_kv;
											console.log(`$slct.event_location_obj_kv = `, $slct.event_location_obj_kv);

											return load_results;
										})
										.finally(function () {
											console.log(`Finally...`);
											ae_tmp.event_location_id = lq__event_session_obj?.event_location_id;
											ae_tmp.show__edit_event_location = true;
										});
								}}
								class="btn btn-sm preset-tonal-warning group"
							>
								<span class="fas fa-edit m-0.75"></span>
								<span class="hidden group-hover:inline">Edit</span>
							</button>
						{/if}
					</Element_ae_crud>
				{/if}
			</li>
			<li class:hidden={$events_loc.pres_mgmt?.hide__session_poc}>
				<span class="text-sm text-semibold text-surface-600-400">
					{$events_loc.pres_mgmt?.label__session_poc_name}:
				</span>
				{#if lq__event_session_obj?.poc_person_id}
					{#if $ae_loc.manager_access}
						<a
							href="/core/person/{lq__event_session_obj.poc_person_id}"
							class="text-blue-500 hover:text-blue-800 hover:underline"
							title="View Person: {lq__event_session_obj?.poc_person_full_name} {lq__event_session_obj?.poc_person_id}"
						>
							{@html lq__event_session_obj?.poc_person_full_name
								? lq__event_session_obj.poc_person_full_name
								: ae_snip.html__not_set}
						</a>
					{/if}

					{#if $ae_loc.trusted_access || $events_loc.auth__kv.session[lq__event_session_obj?.event_session_id] === true}
						<!-- Modal toggle -->
						<button
							class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
							onclick={() => ($events_sess.pres_mgmt.show__session_poc_profile = true)}
						>
							<span class="fas fa-id-card m-1"></span>
							<!-- {$events_loc.pres_mgmt?.label__session_poc_name}'s -->
							{lq__event_session_obj?.poc_person_full_name}'s Profile
						</button>

						<!-- Main modal -->
						<Modal
							title="{$events_loc.pres_mgmt?.label__session_poc_name}'s Profile"
							bind:open={$events_sess.pres_mgmt.show__session_poc_profile}
							autoclose={false}
							placement="top-center"
							class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
						>
							<Comp_event_session_poc_profile
								class_li={$events_sess.pres_mgmt.show__session_poc_profile ? '' : ''}
								{lq__event_session_obj}
							/>

							{#snippet footer()}
								<div class="text-center w-full">
									<button
										type="button"
										onclick={() => {
											console.log('Close modal session poc profile.');
											$events_sess.pres_mgmt.show__session_poc_profile =
												!$events_sess.pres_mgmt.show__session_poc_profile;
										}}
										class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
									>
										<span class="fas fa-times mx-1"></span>
										Close
									</button>
								</div>
							{/snippet}
						</Modal>

						{#if $events_loc.pres_mgmt?.require__session_agree}
							<!-- Modal toggle -->
							<button
								type="button"
								disabled={!$ae_loc.trusted_access &&
									!$events_loc.auth__kv.session[lq__event_session_obj?.event_session_id] === true}
								class="btn btn-sm hover:preset-filled-success-500"
								class:preset-tonal-success={lq__event_session_obj?.poc_agree}
								class:preset-tonal-warning={!lq__event_session_obj?.poc_agree}
								onclick={() => ($events_sess.pres_mgmt.show_modal__session_poc_agree = true)}
							>
								{#if !lq__event_session_obj?.poc_agree}
									<span
										class="fas fa-times bg-red-500 text-white px-1 mx-1"
										title="Not agreed to terms and conditions"
									></span>
									Not yet agreed
								{:else}
									<span
										class="fas fa-check text-green-500 px-1"
										title="Agreed to terms and conditions"
									></span>
									Agreed
								{/if}
							</button>

							<!-- Main modal -->
							<Modal
								title="{$events_loc.pres_mgmt
									?.label__session_poc_name}'s Consent and Release and Terms and Conditions"
								bind:open={$events_sess.pres_mgmt.show_modal__session_poc_agree}
								autoclose={false}
								placement="top-center"
								class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
							>
								<Comp_event_session_poc_form_agree {lq__event_session_obj} />

								{#snippet footer()}
									<div class="text-center w-full">
										<button
											onclick={() => {
												$events_sess.pres_mgmt.show_modal__session_poc_agree = false;
											}}
											class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
										>
											<span class="fas fa-times m-1"></span>
											Close
										</button>
									</div>
								{/snippet}
							</Modal>
						{/if}

						<!-- </div> -->
					{:else}
						<span title={lq__event_session_obj?.poc_person_id}>
							{@html lq__event_session_obj.poc_person_full_name
								? lq__event_session_obj.poc_person_full_name
								: ae_snip.html__not_set}
						</span>
					{/if}
				{:else}
					{@html ae_snip.html__not_set}
				{/if}

				<!-- {#if $ae_loc.trusted_access && $ae_loc.edit_mode} -->

				<!-- <span title={lq__event_session_obj?.poc_person_id}>
            {@html lq__event_session_obj.poc_person_full_name ? lq__event_session_obj.poc_person_full_name : ae_snip.html__not_set}
        </span> -->

				{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
					<Element_ae_crud
						trigger_patch={ae_triggers.update_person_poc}
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={lq__event_session_obj?.event_session_id}
						field_name={'poc_person_id_random'}
						field_type={'select'}
						field_value={lq__event_session_obj?.poc_person_id}
						select_option_li={$slct.person_obj_kv}
						allow_null={$ae_loc.administrator_access}
						hide_edit_btn={true}
						outline_element={false}
						show_crud={ae_tmp.show__edit_poc_person}
						display_inline={true}
						class_li={'m-1'}
						on:ae_crud_updated={(e) => {
							console.log(`ae_crud_updated:`, e.detail);

							events_func
								.load_ae_obj_id__event_session({
									api_cfg: $ae_api,
									event_session_id: lq__event_session_obj?.event_session_id,
									log_lvl: 0
								})
								.then(function (load_results) {
									ae_tmp.poc_person_id = null;
									ae_tmp.show__edit_poc_person = false;

									// Maybe reload page?
									// window.location.reload();
								});
						}}
					>
						{#if ae_tmp?.show__edit_poc_person}
							{#await $slct.person_obj_li}
								<span class="fas fa-spinner fa-spin mx-1"></span>
							{:then person_obj_li}
								<!-- Nothing here -->
							{/await}
						{/if}

						{#if ae_tmp.show__edit_poc_person}
							<button
								type="button"
								onclick={() => {
									console.log('Cancel the POC person for the session.');

									ae_tmp.poc_person_id = null;
									ae_tmp.show__edit_poc_person = false;
								}}
								class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
							>
								<span class="fas fa-times mx-1"></span>
								Cancel
							</button>
						{:else}
							<button
								type="button"
								onclick={async () => {
									console.log('Edit the POC person for the session.');

									// let params = {
									//     qry__limit: 300,
									// }

									// $slct.person_obj_li = await core_func.load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params});

									$slct.person_obj_li = core_func
										.load_ae_obj_li__person({
											api_cfg: $ae_api,
											for_obj_type: 'account',
											for_obj_id: $slct.account_id,
											limit: $ae_loc.person.qry_limit__people,
											order_by_li: {
												family_name: 'ASC',
												given_name: 'ASC',
												updated_on: 'DESC',
												created_on: 'DESC'
											}
											// params: params
										})
										.then(function (load_results) {
											console.log(`Loaded person_obj_li:`, load_results);

											// We need to make this ready for the select option list. Convert the list to a key value pair with the person_id_random as the key. We also need to set the option text value to: full_name (primary_email)
											if (load_results) {
												let person_obj_li = load_results;
												let person_obj_kv = {};
												person_obj_kv[''] = '-- Select a person --';
												person_obj_li.forEach((person_obj) => {
													let option_text = `${person_obj?.last_first_name ?? person_obj?.given_name} (${person_obj?.primary_email?.length ? person_obj?.primary_email : '-- not set --'})`;
													person_obj_kv[person_obj.person_id_random] = option_text;
												});
												$slct.person_obj_kv = person_obj_kv;
											}
											$slct.person_obj_kv = $slct.person_obj_kv;
											console.log(`$slct.person_obj_kv = `, $slct.person_obj_kv);

											return load_results;
										});

									ae_tmp.poc_person_id = lq__event_session_obj?.poc_person_id;
									ae_tmp.show__edit_poc_person = true;
								}}
								class="btn btn-sm preset-tonal-warning group"
							>
								<span class="fas fa-edit mx-0.75"></span>
								<span class="hidden group-hover:inline">Edit</span>
							</button>
						{/if}
					</Element_ae_crud>
				{/if}

				<span class="float-right flex flex-row gap-1 items-center justify-center">
					{#if $events_loc.auth__kv.session[$events_slct.event_session_id] === true}
						<span class="text-green-500">Signed In</span>
					{/if}
					{#if $events_loc.pres_mgmt?.require__session_agree && $events_loc?.pres_mgmt?.show__email_access_link && lq__event_session_obj?.poc_person_primary_email && ($ae_loc.trusted_access || !$events_loc.auth__kv.session[lq__event_session_obj?.event_session_id])}
						<button
							type="button"
							onclick={() => {
								console.log('Email the access link');
								if (!lq__event_session_obj.poc_person_primary_email) {
									alert('No email address found for this point of contact (moderator/champion).');
									return;
								}
								if (
									confirm(
										`This will send the sign in email to ${lq__event_session_obj.poc_person_primary_email}`
									)
								) {
									console.log('Send the email to the point of contact (moderator/champion).');
								} else {
									console.log('Cancelled sending the email.');
									return false;
								}

								events_func.email_sign_in__event_session({
									api_cfg: $ae_api,
									to_email: lq__event_session_obj.poc_person_primary_email,
									to_name: lq__event_session_obj?.poc_person_full_name ?? '-- not set --',
									base_url: $ae_loc.url_origin,
									person_id: lq__event_session_obj?.poc_person_id,
									person_passcode: lq__event_session_obj?.poc_person_passcode ?? '-- not set --',
									event_id: lq__event_session_obj?.event_id,
									event_session_id: lq__event_session_obj?.event_session_id,
									session_name: lq__event_session_obj?.name ?? '-- not set --'
								});
							}}
							class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
							title="Email the access link to the POC (moderator/champion)"
						>
							<span class="fas fa-envelope mx-1"></span>
							Email Access Link
						</button>
					{/if}

					{#if $events_loc.pres_mgmt?.show__copy_access_link && $ae_loc.trusted_access && lq__event_session_obj.poc_person_id}
						<!-- A button to copy the access link to the clipboard. -->
						<!-- Example: /events/CHs3F44Xq76/session/Wh8UnJlbIA0?person_id=fV1dl_IJ0yY&person_pass=abc123 -->

						<MyClipboard
							value={encodeURI(
								`${$ae_loc.url_origin}/events/${lq__event_session_obj.event_id}/session/${$events_slct.event_session_id}?person_id=${lq__event_session_obj.poc_person_id}&person_pass=${lq__event_session_obj.poc_person_passcode}&session_id=${lq__event_session_obj.event_session_id}`
							)}
							btn_text="Copy Access Link"
							btn_title="Copy the POC (moderator/champion) access link to the clipboard."
							btn_class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 border border-warning-500 hover:preset-filled-warning-500"
						></MyClipboard>
					{/if}
				</span>
			</li>

			{#if $ae_loc.administrator_access}
				<li>
					<span class="text-sm text-semibold text-surface-600-400"> Session passcode: </span>
					<span class="fas fa-key text-surface-600-400"></span>
					{@html lq__event_session_obj.passcode
						? lq__event_session_obj.passcode
						: ae_snip.html__not_set}
					<Element_ae_crud
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={lq__event_session_obj?.event_session_id}
						field_name={'passcode'}
						field_type={'text'}
						field_value={lq__event_session_obj?.passcode}
						allow_null={true}
						hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
						outline_element={false}
						show_crud={false}
						display_inline={true}
						display_block_edit={false}
						class_li={''}
						on:ae_crud_updated={(e) => {
							console.log(`ae_crud_updated:`, e.detail);

							events_func
								.load_ae_obj_id__event_session({
									api_cfg: $ae_api,
									event_session_id: lq__event_session_obj?.event_session_id,
									log_lvl: 1
								})
								.then(function (load_results) {});
						}}
					></Element_ae_crud>
				</li>
			{/if}

			<li>
				<div>
					<Element_ae_crud
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={lq__event_session_obj?.event_session_id}
						field_name={'description'}
						field_type={'textarea'}
						field_value={lq__event_session_obj.description}
						allow_null={false}
						hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
						outline_element={false}
						show_crud={false}
						display_inline={true}
						display_block_edit={true}
						textarea_rows={15}
						class_li={''}
						on:ae_crud_updated={(e) => {
							console.log(`ae_crud_updated:`, e.detail);

							events_func.load_ae_obj_id__event_session({
								api_cfg: $ae_api,
								event_session_id: lq__event_session_obj?.event_session_id,
								log_lvl: 1
							});
						}}
					>
						<span class="text-sm text-semibold text-surface-600-400"> Session description: </span>

						{#if lq__event_session_obj.description}
							<button
								type="button"
								onclick={() => {
									console.log('Show/Hide Description');
									$events_loc.pres_mgmt.show_content__session_description =
										!$events_loc.pres_mgmt.show_content__session_description;
								}}
								class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
							>
								{#if $events_loc.pres_mgmt.show_content__session_description}
									<span class="fas fa-eye-slash mx-1"></span>
									<span>Hide Description</span>
								{:else}
									<span class="fas fa-eye mx-1"></span>
									<span>Show</span>
								{/if}
							</button>

							<pre
								class="whitespace-pre-wrap p-2 bg-gray-100 dark:bg-gray-700 rounded-md"
								class:hidden={!$events_loc.pres_mgmt
									.show_content__session_description}>{lq__event_session_obj.description}</pre>
						{:else}
							{@html ae_snip.html__not_set}
						{/if}
					</Element_ae_crud>
				</div>
			</li>
		</ul>

		<!-- <label
    class="text-sm"
    >Session description:
<textarea
    class="textarea my-1 p-2"
    cols="30"
    rows="4"
    disabled
    >{$lq__event_session_obj.description}</textarea>
</label> -->
	</section>

	<!-- Presentations in the session -->
	<section class="w-full">
		{#if $lq__event_presentation_obj_li && $lq__event_presentation_obj_li?.length > 0}
			<Comp_event_presentation_obj_li {lq__event_presentation_obj_li} {log_lvl}
			></Comp_event_presentation_obj_li>
		{/if}
	</section>
{/if}

<style lang="postcss">
</style>
