<script lang="ts">
    interface Props {
        log_lvl?: number;
        // export let event_presenter_id: string;
        lq__event_presenter_obj: any;
        // export let event_presentation_id: string;
        lq__event_presentation_obj: any;
    }

    let {
        log_lvl = 0,
        lq__event_presenter_obj,
        lq__event_presentation_obj
    }: Props = $props();

    console.log(`ae_events_pres_mgmt presenter_view.svelte`);

    import { onMount } from 'svelte';
    // import { liveQuery } from "dexie";
    import { browser } from '$app/environment';

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

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

    // Exports

    // export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

    // let ae_placeholder_li: key_val = {};
    let ae_promises: key_val = $state({}); // Promise<any>;
    // let ae_promises_2: key_val = {}; // Promise<any>;
    let ae_tmp: key_val = $state({});
    ae_tmp.show__file_li = true;

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

    // console.log(`event_presenter_id:`, $lq__event_presenter_obj?.event_presenter_id);

    // console.log(`event_presentation_id:`, $lq__event_presentation_obj?.event_presentation_id);

    // ae_tmp.biography = '';
    ae_tmp.biography = null;
    // ae_tmp.biography = $lq__event_presenter_obj?.biography ?? '';
    // console.log(`ae_tmp.biography:`, ae_tmp.biography);

    $effect(() => {
        if (
            browser &&
            ae_tmp.biography === null &&
            $lq__event_presenter_obj?.biography
        ) {
            ae_tmp.biography = $lq__event_presenter_obj?.biography ?? '';
            if (log_lvl) {
                console.log(`ae_tmp.biography:`, ae_tmp.biography);
            }
        }
    });

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

    onMount(() => {
        if (log_lvl) {
            console.log(
                `Events Pres Mgmt: presenter_view.svelte - event_presenter_id: ${$lq__event_presenter_obj?.event_presenter_id}`,
                $lq__event_presenter_obj
            );
        }

        $slct_trigger = 'load__event_file_obj_li';
    });

    ae_promises.generate_qr_code_url = null;
    $events_sess.pres_mgmt.presenter__updated_on = null;
    $effect(() => {
        if ($lq__event_presenter_obj) {
            if (log_lvl > 1) {
                console.log(
                    `$lq__event_presenter_obj:`,
                    $lq__event_presenter_obj
                );
            }

            if ($events_loc.pres_mgmt.show_content__presenter_qr) {
                if (
                    $lq__event_presenter_obj.updated_on ==
                    $events_sess.pres_mgmt.presenter__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_presenter_obj?.event_presenter_id, obj_type: 'event_presenter', obj_id: $lq__event_presenter_obj?.event_presenter_id});

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

                    // URL for this page (be sure to URL encode it):
                    let url_str = `${$ae_loc.url_origin}/events/${$lq__event_presenter_obj?.event_id}/presenter/${$lq__event_presenter_obj?.event_presenter_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
                        });

                    // $events_sess.pres_mgmt.presenter__url_str = url_str;
                    $events_sess.pres_mgmt.presenter__updated_on =
                        $lq__event_presenter_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.presenter__updated_on = null;
            }
        }
    });
</script>

{#if $lq__event_presenter_obj}
    <h3 class="h5 text-center">
        <span class="fas fa-id-card"></span>
        <!-- <span class="fas fa-info"></span> -->
        Presenter Details
    </h3>

    <section class="p-2">
        <h3 class="h6 text-lg/6">
            <span class="text-sm text-surface-800-200"> Session: </span>
            <a
                href="/events/{$lq__event_presenter_obj?.event_id}/session/{$lq__event_presenter_obj?.event_session_id}"
                class="text-blue-500 hover:text-blue-800 hover:underline"
                title="ID: {$lq__event_presenter_obj?.event_session_id}"
                >"{$lq__event_presenter_obj?.event_session_name}"</a
            >
        </h3>
        <h3 class="h6 text-lg/6">
            <Element_ae_crud
                api_cfg={$ae_api}
                object_type={'event_presentation'}
                object_id={$lq__event_presenter_obj?.event_presentation_id}
                field_name={'name'}
                field_type={'text'}
                field_value={$lq__event_presenter_obj?.event_presentation_name}
                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_presentation({
                        api_cfg: $ae_api,
                        event_presentation_id:
                            $lq__event_presenter_obj?.event_presentation_id,
                        log_lvl: 0
                    });
                }}
            >
                <span class="text-sm text-surface-800-200">
                    Presentation:
                </span>
                <span
                    title="ID: {$lq__event_presenter_obj?.event_presentation_id}"
                >
                    "{$lq__event_presenter_obj?.event_presentation_name}"
                </span>
            </Element_ae_crud>
        </h3>

        <h3 class="h6 text-lg/6">
            <span class="text-sm text-surface-800-200"> Presenter: </span>
        </h3>

        {#await ae_promises.generate_qr_code_url}
            Generating...
        {:then result}
            {#if ae_promises.generate_qr_code_url && $ae_loc.trusted_access}
                <div
                    class="float-right m-1 p-1 flex flex-col items-center justify-center outline outline-gray-200 transition-all group"
                >
                    <!-- svelte-ignore a11y_click_events_have_key_events -->
                    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                    <img
                        src={result}
                        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"
                    />
                    <span>
                        <span class="fas fa-link"></span>
                        <span>Presenter URL</span>
                    </span>
                    <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>
                </div>
            {/if}
        {/await}

        <ul class="space-y-1.5 px-4">
            <li
                class:hidden={!$ae_loc.trusted_access ||
                    (!$ae_loc.edit_mode && !$ae_loc.manager_access)}
            >
                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'event_presenter'}
                    object_id={$lq__event_presenter_obj?.event_presenter_id}
                    field_name={'external_id'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.external_id}
                    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);
                        if (
                            !confirm(
                                'Use caution with changing the external ID. This can break links and synchronizations. Are you sure you want to update the external ID?'
                            )
                        ) {
                            return false;
                        }

                        events_func.load_ae_obj_id__event_presenter({
                            api_cfg: $ae_api,
                            event_presenter_id:
                                $lq__event_presenter_obj?.event_presenter_id,
                            log_lvl: 0
                        });
                    }}
                >
                    <span class="fas fa-id-card"></span>
                    {$events_loc.pres_mgmt?.label__presenter_external_id ??
                        'External ID'}:
                    <span class="font-bold">
                        {@html $lq__event_presenter_obj?.external_id ??
                            ae_snip.html__not_set}
                    </span>
                </Element_ae_crud>

                {#if $lq__event_presenter_obj?.person_id && $lq__event_presenter_obj.external_id != $lq__event_presenter_obj.person_external_id}
                    <div>
                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'person'}
                            object_id={$lq__event_presenter_obj.person_id}
                            field_name={'external_id'}
                            field_type={'text'}
                            field_value={$lq__event_presenter_obj.person_external_id}
                            allow_null={true}
                            hide_edit_btn={!$ae_loc.administrator_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_presenter({
                                    api_cfg: $ae_api,
                                    event_presenter_id:
                                        $lq__event_presenter_obj?.event_presenter_id,
                                    log_lvl: 0
                                });
                            }}
                        >
                            <span class="fas fa-star-of-life"></span>
                            <span class="fas fa-id-card"></span>
                            {$events_loc.pres_mgmt?.label__person_external_id ??
                                'Person External ID'}:
                            <span class="font-bold">
                                {@html $lq__event_presenter_obj.person_external_id ??
                                    ae_snip.html__not_set}
                            </span>
                        </Element_ae_crud>

                        <Element_ae_crud
                            trigger_patch={ae_triggers.update_person_external_id}
                            api_cfg={$ae_api}
                            object_type={'person'}
                            object_id={$lq__event_presenter_obj.person_id}
                            field_name={'external_id'}
                            field_type={'text'}
                            field_value={$lq__event_presenter_obj.external_id}
                            allow_null={true}
                            hide_edit_btn={true}
                            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_presenter({
                                    api_cfg: $ae_api,
                                    event_presenter_id:
                                        $lq__event_presenter_obj?.event_presenter_id,
                                    log_lvl: 0
                                });
                            }}
                        >
                            <button
                                type="button"
                                onclick={() => {
                                    console.log(
                                        '*** Sync external ID button clicked ***'
                                    );
                                    if (
                                        !confirm(
                                            'Are you sure you want to sync the external IDs?'
                                        )
                                    ) {
                                        return false;
                                    }

                                    ae_triggers.update_person_external_id = true;
                                }}
                                class="btn btn-sm preset-tonal-warning group"
                                title="Use the external ID from this presenter record to overwrite the person record."
                            >
                                <span class="fas fa-sync-alt m-0.75"></span>
                                <span class="hidden group-hover:inline"
                                    >Sync</span
                                >
                            </button>
                        </Element_ae_crud>
                    </div>
                {/if}
            </li>

            <li
                class="space-y-2"
                class:hidden={!$ae_loc.trusted_access ||
                    (!$ae_loc.edit_mode && !$ae_loc.manager_access)}
            >
                <span class="fas fa-user"></span>

                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'event_presenter'}
                    object_id={$lq__event_presenter_obj?.event_presenter_id}
                    field_name={'given_name'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.given_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={false}
                    class_li={''}
                    on:ae_crud_updated={(e) => {
                        console.log(`ae_crud_updated:`, e.detail);

                        events_func.load_ae_obj_id__event_presenter({
                            api_cfg: $ae_api,
                            event_presenter_id:
                                $lq__event_presenter_obj?.event_presenter_id,
                            log_lvl: 0
                        });
                    }}
                >
                    <span class="font-bold">
                        {$lq__event_presenter_obj.given_name}
                    </span>
                </Element_ae_crud>

                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'event_presenter'}
                    object_id={$lq__event_presenter_obj?.event_presenter_id}
                    field_name={'family_name'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.family_name}
                    allow_null={true}
                    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_presenter({
                            api_cfg: $ae_api,
                            event_presenter_id:
                                $lq__event_presenter_obj?.event_presenter_id,
                            log_lvl: 0
                        });
                    }}
                >
                    <span class="font-bold">
                        {$lq__event_presenter_obj.family_name}
                    </span>
                </Element_ae_crud>

                {#if $lq__event_presenter_obj.person_given_name != $lq__event_presenter_obj.given_name || $lq__event_presenter_obj.person_family_name != $lq__event_presenter_obj.family_name}
                    {#if $lq__event_presenter_obj.person_given_name != $lq__event_presenter_obj.given_name}
                        <div>
                            <span class="fas fa-star-of-life"></span>
                            <span class="fas fa-user-circle"></span>
                            given name:
                            <Element_ae_crud
                                api_cfg={$ae_api}
                                object_type={'person'}
                                object_id={$lq__event_presenter_obj.person_id}
                                field_name={'given_name'}
                                field_type={'text'}
                                field_value={$lq__event_presenter_obj.person_given_name}
                                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_presenter(
                                        {
                                            api_cfg: $ae_api,
                                            event_presenter_id:
                                                $lq__event_presenter_obj?.event_presenter_id,
                                            log_lvl: log_lvl
                                        }
                                    );
                                }}
                            >
                                <span class="font-bold">
                                    {@html $lq__event_presenter_obj.person_given_name ??
                                        ae_snip.html__not_set}
                                </span>
                            </Element_ae_crud>

                            {#if $ae_loc.edit_mode && $ae_loc.trusted_access}
                                <!-- We need a way to let them re-sync the names. The update here should flow back to the person.given_name. -->
                                <Element_ae_crud
                                    trigger_patch={ae_triggers.update_person_given_name}
                                    api_cfg={$ae_api}
                                    object_type={'person'}
                                    object_id={$lq__event_presenter_obj.person_id}
                                    field_name={'given_name'}
                                    field_type={'text'}
                                    field_value={$lq__event_presenter_obj.given_name}
                                    allow_null={false}
                                    hide_edit_btn={true}
                                    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_presenter(
                                            {
                                                api_cfg: $ae_api,
                                                event_presenter_id:
                                                    $lq__event_presenter_obj?.event_presenter_id,
                                                log_lvl: log_lvl
                                            }
                                        );
                                    }}
                                >
                                    <button
                                        type="button"
                                        onclick={() => {
                                            console.log(
                                                '*** Sync name button clicked ***'
                                            );
                                            if (
                                                !confirm(
                                                    'Are you sure you want to sync the names?'
                                                )
                                            ) {
                                                return false;
                                            }

                                            ae_triggers.update_person_given_name = true;
                                        }}
                                        class="btn btn-sm preset-tonal-warning group transition-all"
                                        title="Use the name from this presenter record to overwrite the person record. Presenter ID: {$lq__event_presenter_obj?.event_presenter_id} to Person ID: {$lq__event_presenter_obj?.person_id}"
                                    >
                                        <span class="fas fa-sync-alt m-0.75"
                                        ></span>
                                        <span
                                            class="hidden group-hover:inline-block"
                                            >Sync</span
                                        >
                                    </button>
                                </Element_ae_crud>
                            {/if}
                        </div>
                    {/if}

                    {#if $lq__event_presenter_obj.person_family_name != $lq__event_presenter_obj.family_name}
                        <div>
                            <span class="fas fa-star-of-life"></span>
                            <span class="fas fa-user-circle"></span>
                            family name:
                            <Element_ae_crud
                                api_cfg={$ae_api}
                                object_type={'person'}
                                object_id={$lq__event_presenter_obj.person_id}
                                field_name={'family_name'}
                                field_type={'text'}
                                field_value={$lq__event_presenter_obj.person_family_name}
                                allow_null={true}
                                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_presenter({
                                            api_cfg: $ae_api,
                                            event_presenter_id:
                                                $lq__event_presenter_obj?.event_presenter_id,
                                            log_lvl: 0
                                        })
                                        .then(function (load_results) {
                                            // Maybe reload page?
                                            // window.location.reload();
                                        });
                                }}
                            >
                                <span class="font-bold">
                                    {@html $lq__event_presenter_obj.person_family_name ??
                                        ae_snip.html__not_set}
                                </span>
                            </Element_ae_crud>

                            {#if $ae_loc.edit_mode && $ae_loc.trusted_access}
                                <!-- We need a way to let them re-sync the names. The update here should flow back to the person.family_name. -->
                                <Element_ae_crud
                                    trigger_patch={ae_triggers.update_person_family_name}
                                    api_cfg={$ae_api}
                                    object_type={'person'}
                                    object_id={$lq__event_presenter_obj.person_id}
                                    field_name={'family_name'}
                                    field_type={'text'}
                                    field_value={$lq__event_presenter_obj.family_name}
                                    allow_null={true}
                                    hide_edit_btn={true}
                                    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_presenter({
                                                api_cfg: $ae_api,
                                                event_presenter_id:
                                                    $lq__event_presenter_obj?.event_presenter_id,
                                                log_lvl: 0
                                            })
                                            .then(function (load_results) {
                                                // Maybe reload page?
                                                // window.location.reload();
                                            });
                                    }}
                                >
                                    <button
                                        type="button"
                                        onclick={() => {
                                            console.log(
                                                '*** Sync name button clicked ***'
                                            );
                                            if (
                                                !confirm(
                                                    'Are you sure you want to sync the names?'
                                                )
                                            ) {
                                                return false;
                                            }

                                            ae_triggers.update_person_family_name = true;
                                        }}
                                        class="btn btn-sm preset-tonal-warning group"
                                        title="Use the name from this presenter record to overwrite the person record. Presenter ID: {$lq__event_presenter_obj?.event_presenter_id} to Person ID: {$lq__event_presenter_obj?.person_id}"
                                    >
                                        <span class="fas fa-sync-alt m-0.75"
                                        ></span>
                                        <span class="hidden group-hover:inline"
                                            >Sync</span
                                        >
                                    </button>
                                </Element_ae_crud>
                            {/if}
                        </div>
                    {/if}
                {/if}
                <!-- $lq__event_presenter_obj.person_given_name != $lq__event_presenter_obj.given_name || $lq__event_presenter_obj.person_family_name != $lq__event_presenter_obj.family_name -->
            </li>

            <li
                class:hidden={!$ae_loc.trusted_access &&
                    !$events_loc.auth__kv.presenter[
                        $lq__event_presenter_obj?.event_presenter_id
                    ] &&
                    !$events_loc.auth__kv.session[
                        $lq__event_presenter_obj.event_session_id
                    ]}
            >
                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'event_presenter'}
                    object_id={$lq__event_presenter_obj?.event_presenter_id}
                    field_name={'email'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.email}
                    allow_null={true}
                    hide_edit_btn={!$ae_loc.trusted_access ||
                        !$ae_loc.edit_mode}
                    outline_element={false}
                    show_crud={false}
                    display_inline={false}
                    class_li={''}
                    on:ae_crud_updated={(e) => {
                        console.log(`ae_crud_updated:`, e.detail);

                        events_func
                            .load_ae_obj_id__event_presenter({
                                api_cfg: $ae_api,
                                event_presenter_id:
                                    $lq__event_presenter_obj?.event_presenter_id,
                                log_lvl: 0
                            })
                            .then(function (load_results) {
                                // Maybe reload page?
                                // window.location.reload();
                            });
                    }}
                >
                    <span class="fas fa-envelope"></span>
                    {#if $lq__event_presenter_obj.email}
                        <span class="font-bold">
                            <a
                                href="mailto:{$lq__event_presenter_obj.email}"
                                class="text-blue-500 hover:text-blue-800 hover:underline"
                                title="Presenter's email address"
                                >{$lq__event_presenter_obj.email}</a
                            >
                        </span>
                    {:else}
                        email
                        {@html ae_snip.html__not_set}
                    {/if}
                </Element_ae_crud>

                {#if $lq__event_presenter_obj.person_primary_email && $lq__event_presenter_obj.person_primary_email != $lq__event_presenter_obj.email}
                    <div>
                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'person'}
                            object_id={$lq__event_presenter_obj.person_id}
                            field_name={'primary_email'}
                            field_type={'text'}
                            field_value={$lq__event_presenter_obj.person_primary_email}
                            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_presenter({
                                        api_cfg: $ae_api,
                                        event_presenter_id:
                                            $lq__event_presenter_obj?.event_presenter_id,
                                        log_lvl: 0
                                    })
                                    .then(function (load_results) {
                                        // Maybe reload page?
                                        // window.location.reload();
                                    });
                            }}
                        >
                            <span class="fas fa-star-of-life"></span>
                            <span class="fas fa-envelope"></span>
                            {#if $lq__event_presenter_obj.person_primary_email}
                                <span class="font-bold">
                                    <a
                                        href="mailto:{$lq__event_presenter_obj.person_primary_email}"
                                        class="text-blue-500 hover:text-blue-800 hover:underline"
                                        title="Person's primary email address"
                                        >{$lq__event_presenter_obj.person_primary_email}</a
                                    >
                                </span>
                            {:else}
                                email
                                {@html ae_snip.html__not_set}
                            {/if}

                            <!-- <a
                    href="mailto:{$lq__event_presenter_obj.person_primary_email}"
                    class="text-blue-500 underline hover:text-blue-800"
                    title="Person's primary email address"
                    >{$lq__event_presenter_obj.person_primary_email}</a>
                </span> -->
                        </Element_ae_crud>

                        {#if $ae_loc.trusted_access}
                            <!-- We need a way to let them re-sync the email addresses. The update here should flow back to the person.primary_email. -->
                            <Element_ae_crud
                                trigger_patch={ae_triggers.update_person_primary_email}
                                api_cfg={$ae_api}
                                object_type={'person'}
                                object_id={$lq__event_presenter_obj.person_id}
                                field_name={'primary_email'}
                                field_type={'text'}
                                field_value={$lq__event_presenter_obj.email}
                                allow_null={false}
                                hide_edit_btn={true}
                                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_presenter({
                                            api_cfg: $ae_api,
                                            event_presenter_id:
                                                $lq__event_presenter_obj?.event_presenter_id,
                                            log_lvl: 0
                                        })
                                        .then(function (load_results) {
                                            // Maybe reload page?
                                            // window.location.reload();
                                        });
                                }}
                            >
                                <button
                                    type="button"
                                    onclick={() => {
                                        console.log(
                                            '*** Sync email button clicked ***'
                                        );
                                        if (
                                            !confirm(
                                                'Are you sure you want to sync the email addresses?'
                                            )
                                        ) {
                                            return false;
                                        }

                                        ae_triggers.update_person_primary_email = true;
                                    }}
                                    class="btn btn-sm preset-tonal-warning group"
                                    title="Use the email address from this presenter record to overwrite the person record."
                                >
                                    <span class="fas fa-sync-alt m-0.75"></span>
                                    <span class="hidden group-hover:inline"
                                        >Sync</span
                                    >
                                </button>
                            </Element_ae_crud>
                        {/if}
                    </div>
                {/if}
            </li>

            <li
                class:hidden={!$ae_loc.authenticated_access &&
                    !$lq__event_presenter_obj.affiliations}
            >
                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'event_presenter'}
                    object_id={$lq__event_presenter_obj?.event_presenter_id}
                    field_name={'affiliations'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.affiliations}
                    allow_null={true}
                    hide_edit_btn={!$ae_loc.trusted_access ||
                        !$ae_loc.edit_mode}
                    outline_element={false}
                    show_crud={false}
                    display_inline={false}
                    class_li={''}
                    on:ae_crud_updated={(e) => {
                        console.log(`ae_crud_updated:`, e.detail);

                        events_func
                            .load_ae_obj_id__event_presenter({
                                api_cfg: $ae_api,
                                event_presenter_id:
                                    $lq__event_presenter_obj?.event_presenter_id,
                                log_lvl: 0
                            })
                            .then(function (load_results) {});
                    }}
                >
                    <span class="fas fa-building"></span>
                    {#if $lq__event_presenter_obj.affiliations && $lq__event_presenter_obj.affiliations.length}
                        <span class="font-bold">
                            {$lq__event_presenter_obj.affiliations}
                        </span>
                    {:else}
                        affiliations
                        {@html ae_snip.html__not_set}
                    {/if}
                </Element_ae_crud>

                {#if $lq__event_presenter_obj.person_id && $lq__event_presenter_obj.person_affiliations != $lq__event_presenter_obj.affiliations}
                    <div>
                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'person'}
                            object_id={$lq__event_presenter_obj.person_id}
                            field_name={'affiliations'}
                            field_type={'text'}
                            field_value={$lq__event_presenter_obj.person_affiliations}
                            allow_null={true}
                            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_presenter({
                                    api_cfg: $ae_api,
                                    event_presenter_id:
                                        $lq__event_presenter_obj?.event_presenter_id,
                                    log_lvl: 0
                                });
                            }}
                        >
                            <span class="fas fa-star-of-life"></span>
                            <span class="fas fa-building"></span>
                            <span class="font-bold">
                                {@html $lq__event_presenter_obj.person_affiliations ??
                                    'affiliations' + ae_snip.html__not_set}
                            </span>
                        </Element_ae_crud>

                        {#if $ae_loc.trusted_access}
                            <Element_ae_crud
                                trigger_patch={ae_triggers.update_person_affiliations}
                                api_cfg={$ae_api}
                                object_type={'person'}
                                object_id={$lq__event_presenter_obj.person_id}
                                field_name={'affiliations'}
                                field_type={'text'}
                                field_value={$lq__event_presenter_obj.affiliations}
                                allow_null={true}
                                hide_edit_btn={true}
                                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_presenter({
                                            api_cfg: $ae_api,
                                            event_presenter_id:
                                                $lq__event_presenter_obj?.event_presenter_id,
                                            log_lvl: 0
                                        })
                                        .then(function (load_results) {
                                            // Maybe reload page?
                                            // window.location.reload();
                                        });
                                }}
                            >
                                <button
                                    type="button"
                                    onclick={() => {
                                        console.log(
                                            '*** Sync affiliations button clicked ***'
                                        );
                                        if (
                                            !confirm(
                                                'Are you sure you want to sync the affiliations?'
                                            )
                                        ) {
                                            return false;
                                        }

                                        ae_triggers.update_person_affiliations = true;
                                    }}
                                    class="btn btn-sm preset-tonal-warning group"
                                    title="Use the affiliations from this presenter record to overwrite the person record."
                                >
                                    <span class="fas fa-sync-alt m-0.75"></span>
                                    <span class="hidden group-hover:inline"
                                        >Sync</span
                                    >
                                </button>
                            </Element_ae_crud>
                        {/if}
                    </div>
                {/if}
            </li>

            <li
                class:hidden={!$ae_loc.authenticated_access &&
                    !$lq__event_presenter_obj.professional_title}
            >
                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'event_presenter'}
                    object_id={$lq__event_presenter_obj?.event_presenter_id}
                    field_name={'professional_title'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.professional_title}
                    allow_null={true}
                    hide_edit_btn={!$ae_loc.trusted_access ||
                        !$ae_loc.edit_mode}
                    outline_element={false}
                    show_crud={false}
                    display_inline={false}
                    class_li={''}
                    on:ae_crud_updated={(e) => {
                        console.log(`ae_crud_updated:`, e.detail);

                        events_func
                            .load_ae_obj_id__event_presenter({
                                api_cfg: $ae_api,
                                event_presenter_id:
                                    $lq__event_presenter_obj?.event_presenter_id,
                                log_lvl: 0
                            })
                            .then(function (load_results) {});
                    }}
                >
                    <span class="fas fa-user-tag"></span>
                    {#if $lq__event_presenter_obj.professional_title && $lq__event_presenter_obj.professional_title.length}
                        <span class="font-bold">
                            {$lq__event_presenter_obj.professional_title}
                        </span>
                    {:else}
                        professional title
                        {@html ae_snip.html__not_set}
                    {/if}
                </Element_ae_crud>

                {#if $lq__event_presenter_obj.person_id && $lq__event_presenter_obj.person_professional_title != $lq__event_presenter_obj.professional_title}
                    <div>
                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'person'}
                            object_id={$lq__event_presenter_obj.person_id}
                            field_name={'professional_title'}
                            field_type={'text'}
                            field_value={$lq__event_presenter_obj.person_professional_title}
                            allow_null={true}
                            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_presenter({
                                    api_cfg: $ae_api,
                                    event_presenter_id:
                                        $lq__event_presenter_obj?.event_presenter_id,
                                    log_lvl: 0
                                });
                            }}
                        >
                            <span class="fas fa-star-of-life"></span>
                            <span class="fas fa-user-tag"></span>
                            <span class="font-bold">
                                {@html $lq__event_presenter_obj.person_professional_title &&
                                $lq__event_presenter_obj
                                    .person_professional_title.length
                                    ? $lq__event_presenter_obj.person_professional_title
                                    : 'professional title' +
                                      ae_snip.html__not_set}
                            </span>
                        </Element_ae_crud>

                        {#if $ae_loc.trusted_access}
                            <Element_ae_crud
                                trigger_patch={ae_triggers.update_person_professional_title}
                                api_cfg={$ae_api}
                                object_type={'person'}
                                object_id={$lq__event_presenter_obj.person_id}
                                field_name={'professional_title'}
                                field_type={'text'}
                                field_value={$lq__event_presenter_obj.professional_title}
                                allow_null={true}
                                hide_edit_btn={true}
                                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_presenter({
                                            api_cfg: $ae_api,
                                            event_presenter_id:
                                                $lq__event_presenter_obj?.event_presenter_id,
                                            log_lvl: 0
                                        })
                                        .then(function (load_results) {
                                            // Maybe reload page?
                                            // window.location.reload();
                                        });
                                }}
                            >
                                <button
                                    type="button"
                                    onclick={() => {
                                        console.log(
                                            '*** Sync professional title button clicked ***'
                                        );
                                        if (
                                            !confirm(
                                                'Are you sure you want to sync the professional title?'
                                            )
                                        ) {
                                            return false;
                                        }

                                        ae_triggers.update_person_professional_title = true;
                                    }}
                                    class="btn btn-sm preset-tonal-warning group"
                                    title="Use the professional title from this presenter record to overwrite the person record."
                                >
                                    <span class="fas fa-sync-alt m-0.75"></span>
                                    <span class="hidden group-hover:inline"
                                        >Sync</span
                                    >
                                </button>
                            </Element_ae_crud>
                        {/if}
                    </div>
                {/if}
            </li>

            <li
                class:hidden={!$ae_loc.trusted_access ||
                    (!$ae_loc.edit_mode && !$ae_loc.manager_access)}
            >
                <span class="fas fa-user-check"></span>
                Person link:
                <!-- Allow for linking the presenter to a person record. -->
                {#if $ae_loc.trusted_access}
                    <Element_ae_crud
                        trigger_patch={ae_triggers.update_person}
                        api_cfg={$ae_api}
                        object_type={'event_presenter'}
                        object_id={$lq__event_presenter_obj?.event_presenter_id}
                        field_name={'person_id'}
                        field_type={'select'}
                        field_value={$lq__event_presenter_obj.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_person}
                        display_inline={true}
                        class_li={''}
                        on:ae_crud_updated={(e) => {
                            console.log(`ae_crud_updated:`, e.detail);

                            events_func
                                .load_ae_obj_id__event_presenter({
                                    api_cfg: $ae_api,
                                    event_presenter_id:
                                        $lq__event_presenter_obj?.event_presenter_id,
                                    log_lvl: 0
                                })
                                .then(function (load_results) {
                                    // Maybe reload page?
                                    // window.location.reload();
                                });
                        }}
                    >
                        <!-- <span class="fas fa-user-check"></span> -->
                        <!-- <span class="fas fa-link"></span> -->
                        <!-- Person link -->
                        {#if $lq__event_presenter_obj.person_id}
                            <a
                                href="/core/person/{$lq__event_presenter_obj.person_id}"
                                class="text-blue-500 hover:text-blue-800 hover:underline"
                                title="View Person: {$lq__event_presenter_obj.person_full_name} {$lq__event_presenter_obj.person_id}"
                            >
                                <span class="fas fa-link"></span>
                                {$lq__event_presenter_obj.person_id}
                            </a>
                        {:else}
                            <span class="fas fa-unlink"></span>
                            person
                            {@html ae_snip.html__not_set}
                        {/if}

                        {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
                            {#if ae_tmp?.show__edit_person}
                                {#await $slct.person_obj_li}
                                    <span class="fas fa-spinner fa-spin mx-1"
                                    ></span>
                                {:then person_obj_li}
                                    <!-- loaded -->
                                {/await}

                                <!-- {/if} -->

                                <!-- {#if ae_tmp.show__edit_person} -->
                                <button
                                    type="button"
                                    onclick={() => {
                                        console.log(
                                            'Cancel the person for the presenter.'
                                        );

                                        ae_tmp.person_id = null;
                                        ae_tmp.show__edit_person = false;
                                    }}
                                    class="btn btn-sm preset-tonal-warning group"
                                >
                                    <span class="fas fa-times mx-1"></span>
                                    <span class="hidden group-hover:inline"
                                        >Cancel</span
                                    >
                                </button>
                            {:else if !$lq__event_presenter_obj.person_id || $ae_loc.administrator_access}
                                <button
                                    type="button"
                                    onclick={async () => {
                                        console.log(
                                            'Edit the person for the presenter.'
                                        );

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

                                        $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 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: Record<
                                                        string,
                                                        string
                                                    > = {};
                                                    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
                                                            ] = 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.person_id =
                                            $lq__event_presenter_obj?.person_id;
                                        ae_tmp.show__edit_person = true;
                                    }}
                                    class="btn btn-sm preset-tonal-warning group"
                                    title="Edit the person record linked to this presenter. Presenter ID: {$lq__event_presenter_obj.event_presenter_id}"
                                >
                                    <span class="fas fa-edit mx-0.75"></span>
                                    <span class="hidden group-hover:inline"
                                        >Re-link</span
                                    >
                                </button>
                            {/if}
                        {/if}
                        <!-- $ae_loc.edit_mode -->
                    </Element_ae_crud>
                {/if}

                <!-- A sync button to use the person record fields to update the event_presenter fields -->
                {#if $ae_loc.administrator_access && $lq__event_presenter_obj?.person_id}
                    <button
                        type="button"
                        onclick={() => {
                            console.log('*** Sync person button clicked ***');
                            if (
                                !confirm(
                                    'Are you sure you want to sync from the person record?'
                                )
                            ) {
                                return false;
                            }

                            // NOTE: The external_id should not really be changed once it is set. The person.external_sys_id may need to be updated as well.
                            let event_presenter_data = {
                                external_id:
                                    $lq__event_presenter_obj.person_external_id,
                                given_name:
                                    $lq__event_presenter_obj.person_given_name,
                                family_name:
                                    $lq__event_presenter_obj.person_family_name,
                                professional_title:
                                    $lq__event_presenter_obj.person_professional_title,
                                affiliations:
                                    $lq__event_presenter_obj.person_affiliations,
                                email: $lq__event_presenter_obj.person_primary_email
                                // 'passcode': $lq__event_presenter_obj.person_passcode,
                            };

                            let person_update_result = events_func
                                .update_ae_obj__event_presenter({
                                    api_cfg: $ae_api,
                                    event_presenter_id:
                                        $lq__event_presenter_obj?.event_presenter_id,
                                    data_kv: event_presenter_data,
                                    log_lvl: 0
                                })
                                .then(function (update_result) {
                                    // console.log(update_result);
                                    // return update_result;
                                });

                            return person_update_result;
                        }}
                        class="btn btn-sm preset-tonal-warning group"
                        title="Sync the person record fields to the presenter record. Person ID: {$lq__event_presenter_obj.person_id} to Presenter ID: {$lq__event_presenter_obj?.event_presenter_id}"
                    >
                        <span class="fas fa-sync-alt m-0.75"></span>
                        <span class="hidden group-hover:inline"
                            >Sync Person</span
                        >
                    </button>
                {/if}

                {#if $ae_loc.trusted_access && !$lq__event_presenter_obj?.person_id}
                    <button
                        type="button"
                        onclick={async () => {
                            console.log('Add Person');
                            if ($ae_loc.administrator_access) {
                                if (
                                    !confirm(
                                        `Add a new person (${$lq__event_presenter_obj.person_given_name}) to the account? You will be able to edit their details after the person record is created.\n\n${$ae_loc.account_name}\nID: ${$slct.account_id}`
                                    )
                                ) {
                                    return;
                                }
                            } else {
                                if (
                                    !confirm(
                                        `Add a new person (${$lq__event_presenter_obj.person_given_name}) to the account based on this presenter? Be sure to check if there is an existing person record first.\n\n${$ae_loc.account_name}\nID: ${$slct.account_id}`
                                    )
                                ) {
                                    return;
                                }
                            }
                            let person_data = {
                                account_id: $slct.account_id,
                                source_code: 'manual:SK:presenter',
                                external_id:
                                    $lq__event_presenter_obj?.external_id ??
                                    null,
                                external_sys_id:
                                    $lq__event_presenter_obj?.external_id ??
                                    null,
                                // user_id: user_obj.user_id,
                                given_name:
                                    $lq__event_presenter_obj.given_name ??
                                    'New',
                                family_name:
                                    $lq__event_presenter_obj?.family_name ??
                                    null,
                                primary_email:
                                    $lq__event_presenter_obj?.email ?? null,
                                // code: $lq__event_presenter_obj?.code?? null,
                                // Random number between 100000 and 999999
                                passcode:
                                    Math.floor(Math.random() * 900000) + 100000,
                                professional_title:
                                    $lq__event_presenter_obj?.professional_title ??
                                    null,
                                affiliations:
                                    $lq__event_presenter_obj?.affiliations ??
                                    null,
                                enable: true
                            };

                            let new_person_obj =
                                await core_func.create_ae_obj__person({
                                    api_cfg: $ae_api,
                                    // user_id: $ae_loc.user_id,
                                    data_kv: person_data,
                                    log_lvl: 0
                                });

                            console.log('new_person_obj:', new_person_obj);

                            // We then need to update the event_presenter with the new person_id.
                            if (new_person_obj) {
                                events_func.update_ae_obj__event_presenter({
                                    api_cfg: $ae_api,
                                    event_presenter_id:
                                        $lq__event_presenter_obj?.event_presenter_id,
                                    data_kv: {
                                        person_id: new_person_obj.person_id
                                    },
                                    log_lvl: 0
                                });
                            }
                        }}
                        class:hidden={!$ae_loc.edit_mode}
                        class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
                        title="Add a new person based on this presenter. Presenter ID: {$lq__event_presenter_obj?.event_presenter_id}"
                    >
                        <span class="fas fa-plus m-.75"></span>
                        Add Person
                    </button>
                {/if}
            </li>

            <li
                class:hidden={!$lq__event_presenter_obj.person_id ||
                    (!$ae_loc.trusted_access &&
                        !$events_loc.auth__kv.presenter[
                            $lq__event_presenter_obj?.event_presenter_id
                        ])}
            >
                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'person'}
                    object_id={$lq__event_presenter_obj.person_id}
                    field_name={'passcode'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.person_passcode}
                    allow_null={true}
                    hide_edit_btn={!$ae_loc.trusted_access ||
                        !$ae_loc.edit_mode}
                    outline_element={false}
                    show_crud={false}
                    display_inline={false}
                    class_li={''}
                    on:ae_crud_updated={(e) => {
                        console.log(`ae_crud_updated:`, e.detail);

                        events_func
                            .load_ae_obj_id__event_presenter({
                                api_cfg: $ae_api,
                                event_presenter_id:
                                    $lq__event_presenter_obj?.event_presenter_id,
                                log_lvl: 0
                            })
                            .then(function (load_results) {
                                // Maybe reload page?
                                // window.location.reload();
                            });
                    }}
                >
                    <span class="fas fa-star-of-life"></span>
                    <span class="fas fa-user-secret"></span>
                    Passcode:
                    <span class="font-bold">
                        {@html $lq__event_presenter_obj.person_passcode ??
                            ae_snip.html__not_set}
                    </span>
                </Element_ae_crud>

                <!-- <span class="fas fa-user-secret"></span>
        {$lq__event_presenter_obj.person_passcode} (your passcode)

        <button type="button"
            title="Edit your passcode"
            class="btn btn-sm variant-soft-warning"
            class:hidden={!$ae_loc.trusted_access}
            >
            <span class="fas fa-edit">
            </span>
            Edit
        </button> -->
            </li>

            <li
                class:hidden={!$lq__event_presenter_obj.person_id ||
                    !$ae_loc.trusted_access ||
                    !$ae_loc.edit_mode}
            >
                <Element_ae_crud
                    api_cfg={$ae_api}
                    object_type={'person'}
                    object_id={$lq__event_presenter_obj.person_id}
                    field_name={'external_sys_id'}
                    field_type={'text'}
                    field_value={$lq__event_presenter_obj.person_external_sys_id}
                    allow_null={true}
                    hide_edit_btn={!$ae_loc.administrator_access ||
                        !$ae_loc.edit_mode}
                    outline_element={false}
                    show_crud={false}
                    display_inline={false}
                    class_li={''}
                    on:ae_crud_updated={(e) => {
                        console.log(`ae_crud_updated:`, e.detail);

                        events_func
                            .load_ae_obj_id__event_presenter({
                                api_cfg: $ae_api,
                                event_presenter_id:
                                    $lq__event_presenter_obj?.event_presenter_id,
                                log_lvl: 0
                            })
                            .then(function (load_results) {
                                // Maybe reload page?
                                // window.location.reload();
                            });
                    }}
                >
                    <span class="fas fa-star-of-life"></span>
                    <span class="fas fa-fingerprint"></span>
                    External System ID:
                    <span class="font-bold">
                        {@html $lq__event_presenter_obj.person_external_sys_id ??
                            ae_snip.html__not_set}
                    </span>
                </Element_ae_crud>
            </li>

            <!-- The presenters biography. There should be a character counter. -->
            <li
                class:hidden={$events_loc.pres_mgmt
                    ?.hide__presenter_biography ||
                    (!$ae_loc.authenticated_access &&
                        !$lq__event_presenter_obj.biography)}
            >
                <div
                    class="label event_presenter__biography required space-y-4"
                >
                    <!-- {#if clipboard_success}Copied!{:else}Copy Access Link{/if} -->
                    <!-- <span class="fas fa-copy mx-1"></span> -->
                    <MyClipboard
                        value={ae_tmp.biography?.trim()}
                        btn_text="Copy Biography Text"
                        btn_title="Copy the presenter biography text to the clipboard."
                        btn_class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 float-right m-1"
                    ></MyClipboard>

                    <label for="presenter__biography" class="label">
                        <span class="fas fa-book"></span>
                        Presenter Biography
                        <span class="text-sm text-gray-500">
                            (75 to 100 words or 600 character limit)
                        </span>
                    </label>

                    <textarea
                        name="biography"
                        id="presenter__biography"
                        disabled={!$ae_loc.trusted_access &&
                            !$events_loc.auth__kv.presenter[
                                $lq__event_presenter_obj?.event_presenter_id
                            ]}
                        class="textarea ae_value event_presenter__biography font-mono"
                        class:preset-tonal-error={ae_tmp.biography &&
                        ae_tmp.biography.length > 600
                            ? true
                            : false}
                        required
                        rows={!ae_tmp.biography ? 1 : 8}
                        cols="70"
                        bind:value={ae_tmp.biography}
                        placeholder="Enter brief biography here"
                    ></textarea>
                </div>

                {#if ae_tmp.biography}
                    <p>
                        Biography length: {ae_tmp.biography
                            ? ae_util.number_w_commas(ae_tmp.biography.length)
                            : 0} characters; {ae_tmp.biography
                            ? ae_util.number_w_commas(
                                  ae_util.count_words(ae_tmp.biography)
                              )
                            : 0} estimated words
                    </p>
                    <!-- <p>Biography length: </p> -->
                    <p>
                        The biography should be plain text only and be at most
                        100 words.
                    </p>
                    <!-- <p>1,250 characters is roughly 250 words</p> -->
                    <!-- <p>1,375 characters is roughly 250 to 300 words</p> -->
                {/if}

                <div class="flex flex-wrap gap-2 p-1 items-center">
                    <button
                        type="button"
                        class="btn btn-md preset-tonal-primary hover:preset-filled-primary-500"
                        disabled={ae_tmp.biography ==
                            $lq__event_presenter_obj.biography}
                        onclick={() => {
                            console.log('*** Save button clicked ***');

                            let event_presenter_data = {
                                biography: ae_tmp.biography,
                                data_json: {
                                    ...$lq__event_presenter_obj.data_json,
                                    biography_updated_on:
                                        new Date().toISOString()
                                }
                            };

                            ae_promises.update__event_presenter_obj =
                                events_func
                                    .update_ae_obj__event_presenter({
                                        api_cfg: $ae_api,
                                        event_presenter_id:
                                            $lq__event_presenter_obj?.event_presenter_id,
                                        data_kv: event_presenter_data,
                                        log_lvl: 0
                                    })
                                    .then(function (update_result) {
                                        // console.log(update_result);
                                        // return update_result;
                                    });
                        }}
                        class:hidden={!ae_tmp.biography ||
                            ae_tmp.biography?.length < 20}
                    >
                        {#await ae_promises.update__event_presenter_obj}
                            <span class="fas fa-spinner fa-spin mx-1"></span>
                        {:then}
                            {#if ae_tmp.biography == $lq__event_presenter_obj.biography}
                                <span class="fas fa-check mx-1"></span>
                            {:else}
                                <span class="fas fa-save mx-1"></span>
                            {/if}
                        {/await}
                        Save Biography
                    </button>

                    {#if $lq__event_presenter_obj.data_json?.biography_updated_on}
                        <span class="text-sm text-gray-500">
                            Last saved: {ae_util.iso_datetime_formatter(
                                $lq__event_presenter_obj.data_json
                                    ?.biography_updated_on,
                                'datetime_12_long'
                            )}
                        </span>
                    {/if}
                </div>
            </li>
        </ul>
    </section>
{/if}
