<script lang="ts">
console.log(`ae_events_pres_mgmt presenter_view.svelte`);
export let log_lvl = 0;

import { createEventDispatcher, onMount } from 'svelte';
import { clipboard } from '@skeletonlabs/skeleton';
import { liveQuery } from "dexie";
import { browser } from '$app/environment';

const dispatch = createEventDispatcher();

import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store.svelte';

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

// Exports
// export let event_presenter_id: string;
export let lq__event_presenter_obj: any;
// export let event_presentation_id: string;
export let lq__event_presentation_obj: any;
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

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

let ae_triggers: key_val = {};

let lq__event_obj = liveQuery(
    () => db_events.events.get($events_slct.event_id)
);

// let lq__event_session_obj = liveQuery(
//     () => db_events.sessions.get($events_slct.event_session_id)
// );

// let lq__event_presentation_obj = liveQuery(
//     async () => await db_events.presentations.get(event_presentation_id)
// );

console.log(`event_presenter_id:`, $lq__event_presenter_obj?.event_presenter_id_random);
// let lq__event_presenter_obj = liveQuery(
//     async () => await db_events.presenters.get(event_presenter_id)
// );

// let event_presentation_id: null|string = $lq__event_presenter_obj?.event_presentation_id_random ?? '';
// event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random ?? event_presentation_id;
console.log(`event_presentation_id:`, $lq__event_presentation_obj?.event_presentation_id_random);
// $events_slct.event_presentation_id = event_presentation_id;
// event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
// let lq__event_presentation_obj = liveQuery(
//     () => db_events.presentations.get(event_presentation_id)
// );
// export let event_presentation_obj: any = $lq__event_presentation_obj;

let lq__event_file_obj_li = liveQuery(
    async () => await db_events.files.where('event_presenter_id_random').equals($lq__event_presenter_obj?.event_presenter_id_random).toArray()
);

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

// $: if ($lq__event_presenter_obj?.biography && ae_tmp.biography === null) {
//     // WHAT WAS THIS FOR HERE??? // ae_tmp.biography = JSON.parse(JSON.stringify($lq__event_presenter_obj?.biography ?? ''));
//     ae_tmp.biography = $lq__event_presenter_obj?.biography ?? '';
//     console.log(`ae_tmp.biography:`, ae_tmp.biography);
// }

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

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


onMount(() => {
    console.log('Events Pres Mgmt: presenter_view.svelte');
    console.log(`event_presenter_id:`, $lq__event_presenter_obj?.event_presenter_id_random);

    $slct_trigger = 'load__event_file_obj_li';
    // ae_tmp.biography = $lq__event_presenter_obj?.biography;
});


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

    $events_sess.pres_mgmt.disable_submit__event_file_obj = true;
    $events_sess.pres_mgmt.submit_status = 'saving';

    let hosted_file_results;

    if (event.target.presenter_event_file.files.length > 0) {

        hosted_file_results = await handle_input_upload_files(event.target.presenter_event_file.files);


        if (hosted_file_results) {
            console.log(`hosted_file_results:`, hosted_file_results);
        } else {
            console.log(`hosted_file_results:`, hosted_file_results);
        }
    }

    $events_sess.pres_mgmt.disable_submit__event_file_obj = false;
}


async function handle_input_upload_files(input_upload_files) {
    console.log('*** handle_input_upload_files() ***');

    let link_to_type = 'event_presenter';
    let link_to_id = $lq__event_presenter_obj?.event_presenter_id_random;

    const form_data = new FormData();

    form_data.append('account_id', $ae_loc.account_id);
    form_data.append('link_to_type', link_to_type);
    form_data.append('link_to_id', link_to_id);

    for (let i = 0; i < input_upload_files.length; i++) {
        form_data.append(`file_list`, input_upload_files[i]);
    }

    let params = null;

    let endpoint = '/hosted_file/upload_files';

    console.log(form_data);

    params = null;

    // Uncomment and the post_promise is not seen by the "await" below
    // post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
    // Uncomment so that the post_promise is not seen by the "await" below
    ae_promises.upload__hosted_file_obj = api.post_object({
        api_cfg: $ae_api,
        endpoint: endpoint,
        params: params,
        form_data: form_data,
        task_id: link_to_id,
        log_lvl: 0
    })
    .then(async function (result) {
        // NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
        let x = 0;
        console.log(result[x]);
        let hosted_file_obj = result[x];

        let hosted_file_id = hosted_file_obj.hosted_file_id_random;

        let event_file_data: key_val = {};
        event_file_data['hosted_file_id_random'] = hosted_file_id;
        event_file_data['for_type'] = link_to_type;
        event_file_data['for_id_random'] = link_to_id;
        event_file_data['filename'] = hosted_file_obj.filename;
        event_file_data['extension'] = hosted_file_obj.extension;
        event_file_data['enable'] = true;
        console.log(event_file_data);

        // $events_sess.pres_mgmt.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...

        let event_file_id = await events_func.create_event_file_obj_from_hosted_file_async({
            api_cfg: $ae_api,
            hosted_file_id: hosted_file_id,
            data: event_file_data,
            log_lvl: 1
            })
        .then(function (create_result) {
            console.log(create_result); // NOTE: This should be the event_file_id string
            // let event_file_id = create_result;
            return create_result;
        });

        return event_file_id;
    })
    .then(function (event_file_id) {
        // NOTE: Need to make sure the event file records are created first. The update won't see the changes if too fast.
        // dispatch(
        //     'event_file_obj_li_updated',
        //     {
        //         link_to_type: link_to_type,
        //         link_to_id: link_to_id,
        //     }
        // );

        // $ae_events.pres_mgmt.new_upload_list[i].uploaded = true;
        // $ae_events.pres_mgmt.new_upload_list[i].uploaded_bytes = event.target.event_file_upload_file_list.files[i].size;

        return event_file_id;
    })
    .catch(function (error) {
        console.log('Something went wrong.');
        console.log(error);
        return false;
    })
    .finally(function (event_file_id) {
        // $events_sess.pres_mgmt.files_uploading_count--;
        $slct_trigger = 'load__event_file_obj_li';

        return event_file_id;
    });

    console.log(ae_promises.upload__hosted_file_obj);
    let hosted_file_result = ae_promises.upload__hosted_file_obj;

    return hosted_file_result;
}

async function handle_delete__event_file({event_file_id}) {
    console.log(`*** handle_delete__event_file() *** event_file_id:`, event_file_id);

    let link_to_type = 'event_presenter';
    let link_to_id = $lq__event_presenter_obj?.event_presenter_id_random;

    ae_promises.delete__event_file_obj = await events_func.handle_delete_ae_obj_id__event_file({
        api_cfg: $ae_api,
        event_file_id: event_file_id,
        log_lvl: 2
    })
    .then(function (event_file_obj_result) {
        console.log(event_file_obj_result);
        if (!event_file_obj_result) {
            console.log('The result was null or false.');
            return false;
        } else {
            console.log(`event_file_obj_result = `, event_file_obj_result);
        }

        dispatch(
            'event_file_obj_deleted',
            {
                event_file_id: event_file_id,
                link_to_type: link_to_type,
                link_to_id: link_to_id,
            }

        );
        return event_file_obj_result;
    }).catch(function (error) {
        console.log('Something went wrong deleting the event file.');
        console.log(error);
        return false;
    });

    return ae_promises.delete__event_file_obj;
}

ae_promises.generate_qr_code_url = null;
$events_sess.pres_mgmt.presenter__updated_on = null;
$: 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_random, obj_type: 'event_presenter', obj_id: $lq__event_presenter_obj?.event_presenter_id_random});

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

            // URL for this page (be sure to URL encode it):
            let url_str = `${$ae_loc.url_origin}/events_pres_mgmt/presenter/${$lq__event_presenter_obj?.event_presenter_id_random}`;
            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}
<h2 class="h3">
    Presenter Details for:<br>
    <strong>
        {$lq__event_presenter_obj.full_name}
    </strong>
    <span class="text-sm">
        {#if (!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random] && !$events_loc.auth__kv.session[$lq__event_presenter_obj.event_session_id_random])}
            <!-- Only show the domain name of the email address. -->
            <!-- ( -->
            <!-- {$lq__event_presenter_obj.email.replace(/@.*$/, '@...')} -->
            <!-- {$lq__event_presenter_obj.person_primary_email.substring(0, 1) + '...@example.com'} -->
            {#if $lq__event_presenter_obj?.email}
                ({$lq__event_presenter_obj.email.replace(/^(.{3}).*@/, '$1...@')})
            {:else}
                <!-- email
                {ae_snip.html__not_set} -->
            {/if}
            <!-- ) -->
            <!-- {@html $lq__event_presenter_obj?.email ? $lq__event_presenter_obj?.email.replace(/^(.{3}).*@/, '$1...@') : 'email'+ae_snip.html__not_set} -->
            <!-- ) -->
            (Not signed in as presenter)
        {:else}
            ({@html ($lq__event_presenter_obj?.email && $lq__event_presenter_obj?.email.length) ? $lq__event_presenter_obj?.email : 'email '+ae_snip.html__not_set})
        {/if}
    </span>

    {#if $lq__event_presenter_obj.person_id_random && $ae_loc.trusted_access}
        <!-- A button to copy the access link to the clipboard. -->
        <!-- Example: /events_pres_mgmt/session/Wh8UnJlbIA0?person_id=fV1dl_IJ0yY&person_pass=abc123 -->
        <button
            type="button"
            use:clipboard={encodeURI(`${$ae_loc.url_origin}/events_pres_mgmt/session/${$lq__event_presenter_obj.event_session_id_random}?person_id=${$lq__event_presenter_obj.person_id_random}&person_pass=${$lq__event_presenter_obj.person_passcode}&presentation_id=${$lq__event_presenter_obj?.event_presentation_id_random}&presenter_id=${$lq__event_presenter_obj?.event_presenter_id_random}`)}
            class="btn btn-sm variant-ghost-warning float-right m-1"
            title="Copy the presenter access link to the clipboard."
            >
            <span class="fas fa-copy mx-1"></span>
            Copy Access Link
        </button>
    {/if}
    {#if $lq__event_presenter_obj.email && ($ae_loc.administrator_access || !$events_loc.auth__person?.id && $events_loc.pres_mgmt?.show__email_access_link)}
        <button
            type="button"
            on:click={() => {
                console.log('Email the access link');
                if (!$lq__event_presenter_obj.email) {
                    alert('No email address found for this presenter.');
                    return;
                }
                if (confirm(`This will send the sign in email to ${$lq__event_presenter_obj.email}`)) {
                    console.log('Send the email to the presenter.');
                } else {
                    console.log('Cancelled sending the email.');
                    return false;
                }

                events_func.email_sign_in__event_presenter(
                    {
                        api_cfg: $ae_api,
                        to_email: $lq__event_presenter_obj.email,
                        to_name: $lq__event_presenter_obj?.full_name?? '-- not set --',
                        base_url: $ae_loc.url_origin,
                        person_id: $lq__event_presenter_obj?.person_id_random?? '-- not set --',
                        person_passcode: $lq__event_presenter_obj.person_passcode?? '-- not set --',
                        event_session_id: $lq__event_presenter_obj.event_session_id_random,
                        event_presentation_id: $lq__event_presenter_obj?.event_presentation_id_random,
                        event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
                        session_name: $lq__event_presenter_obj?.event_session_name?? '-- not set --',
                        presentation_name: $lq__event_presenter_obj?.event_presentation_name?? '-- not set --',
                    }
                );
            }}
            class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary my-0.5 float-right"
            title="Email the access link to the presenter"
            >
            <span class="fas fa-envelope mx-1"></span>
            Email Access Link
        </button>
    {/if}
</h2>

<section class="p-2">
<h3 class="h4">
    <span class="text-md font-normal">
        Session:
    </span>
    <a
        href="/events_pres_mgmt/session/{$lq__event_presenter_obj.event_session_id_random}"
        class="text-blue-500 hover:text-blue-800 hover:underline"
        title="ID: {$lq__event_presentation_obj?.event_session_id_random}"
        >{$lq__event_presenter_obj.event_session_name}</a>
</h3>
<h3 class="h4">
    <Element_ae_crud
        api_cfg={$ae_api}
        object_type={'event_presentation'}
        object_id={$lq__event_presenter_obj?.event_presentation_id_random}
        field_name={'name'}
        field_type={'text'}
        field_value={$lq__event_presentation_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}
        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_presentation_obj?.event_presentation_id_random, log_lvl: 0});
        }}
        >
        <span class="text-md font-normal">
        Presentation Title:
        </span>
        <span
            title="ID: {$lq__event_presentation_obj?.event_presentation_id_random}"
            >
            "{$lq__event_presenter_obj?.event_presentation_name}"
        </span>
    </Element_ae_crud>

    <!-- Title: "{$lq__event_presentation_obj?.name}" -->
</h3>

<h3 class="h4">
    <span class="text-md font-normal">
    Presenter:
    <span class="text-md font-normal">
</h3>


<!-- {#await ae_promises.generate_qr_code_obj_id}
    Generating...
{:then result}
    {#if ae_promises.generate_qr_code_obj_id}
        <span class="float-right flex flex-col items-center justify-center">
            <img
                class="qr_code qr_type_obj_id h-32 w-32 hover:h-48 hover:w-48"
                class:hidden={!$ae_loc.manager_access}
                style=""
                src={result}
                alt="Object ID QR code"

                />
            <span>
            <span class="fas fa-qrcode"></span>
            Presenter ID
            </span>
        </span>
    {/if}
{/await} -->

{#await ae_promises.generate_qr_code_url}
    Generating...
{:then result}
    {#if ae_promises.generate_qr_code_url && $ae_loc.trusted_access}
        <span class="float-right m-1 p-1 flex flex-col items-center justify-center outline outline-gray-200 *:hover:inline">
            <img
                class="qr_code qr_type_url h-32 w-32 hover:h-48 hover:w-48"
                style=""
                src={result}
                alt="URL QR code"
                />
            <span>
                <span class="fas fa-link"></span>
                <span>Presenter URL</span>
            </span>
            <!-- URL: <a href="{$ae_loc.url_origin}/events_pres_mgmt/presenter/{$lq__event_presenter_obj?.event_presenter_id_random}" target="_blank">{$ae_loc.url_origin}/events_pres_mgmt/presenter/{$lq__event_presenter_obj?.event_presenter_id_random}</a> -->
            <div class="hidden">
                This QR is a link back to this page.
            </div>
        </span>
    {/if}
{/await}

<ul
    class="space-y-2 px-4"
    >
    <li
        class:hidden={!$ae_loc.trusted_access && !$ae_loc.edit_mode}
        >
        <Element_ae_crud
            api_cfg={$ae_api}
            object_type={'event_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_id_random}
            field_name={'external_id'}
            field_type={'text'}
            field_value={$lq__event_presenter_obj.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}
            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_random, log_lvl: 0
                })
                .then(function (load_results) {
                    // Maybe reload page?
                    // window.location.reload();
                });
            }}
            >
            <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_random && $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_random}
                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_random, log_lvl: 0
                    })
                    .then(function (load_results) {
                        // Maybe reload page?
                        // window.location.reload();
                    });
                }}
                >
                <span class="fas fa-star-of-life"></span>
                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_random}
                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_random, log_lvl: 0
                    })
                    .then(function (load_results) {
                        // Maybe reload page?
                        // window.location.reload();
                    });
                }}
                >
                <button
                    type="button"
                    on:click={() => {
                        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 variant-soft-warning hover:variant-ghost-warning"
                    title="Use the external ID from this presenter record to overwrite the person record."
                    >
                    <span class="fas fa-sync-alt mx-1"></span>
                    Sync
                </button>
            </Element_ae_crud>
            </div>
        {/if}
    </li>

    <li>
        <span class="fas fa-user"></span>
        <!-- {#if !$events_sess.pres_mgmt.show_edit__event_presenter_name}
            {$events_slct.presenter_obj.full_name}
        {:else} -->
        <!-- <div
            hidden={!$events_sess.pres_mgmt.show_edit__event_presenter_name}
            > -->

        <!-- </div> -->
        <!-- {/if} -->

        <Element_ae_crud
            api_cfg={$ae_api}
            object_type={'event_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_id_random}
            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_random, log_lvl: 0
                })
                .then(function (load_results) {
                    // Maybe reload page?
                    // window.location.reload();
                });
            }}
            >
            <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_random}
            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_random, log_lvl: 0
                })
                .then(function (load_results) {
                    // Maybe reload page?
                    // window.location.reload();
                });
            }}
            >
            <span class="font-bold">
            {$lq__event_presenter_obj.family_name}
            </span>
        </Element_ae_crud>
    </li>

    <li
        class:hidden={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random] && !$events_loc.auth__kv.session[$lq__event_presenter_obj.event_session_id_random]}
        >
        <Element_ae_crud
            api_cfg={$ae_api}
            object_type={'event_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_id_random}
            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_random, 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_random}
                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_random, 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_random}
                    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_random, log_lvl: 0
                        })
                        .then(function (load_results) {
                            // Maybe reload page?
                            // window.location.reload();
                        });
                    }}
                    >
                    <button
                        type="button"
                        on:click={() => {
                            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 variant-soft-warning hover:variant-ghost-warning"
                        title="Use the email address from this presenter record to overwrite the person record."
                        >
                        <span class="fas fa-sync-alt mx-1"></span>
                        Sync
                    </button>
                </Element_ae_crud>
            {/if}
            </div>
        {/if}

    </li>

    <li>

        <Element_ae_crud
            api_cfg={$ae_api}
            object_type={'event_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_id_random}
            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_random, 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_random && $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_random}
                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_random, 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_random}
                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_random, log_lvl: 0
                    })
                    .then(function (load_results) {
                        // Maybe reload page?
                        // window.location.reload();
                    });
                }}
                >
                <button
                    type="button"
                    on:click={() => {
                        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 variant-soft-warning hover:variant-ghost-warning"
                    title="Use the affiliations from this presenter record to overwrite the person record."
                    >
                    <span class="fas fa-sync-alt mx-1"></span>
                    Sync
                </button>
            </Element_ae_crud>
            {/if}
            </div>
        {/if}

    </li>

    <li>

        <Element_ae_crud
            api_cfg={$ae_api}
            object_type={'event_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_id_random}
            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_random, 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_random && $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_random}
                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_random, 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_random}
                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_random, log_lvl: 0
                    })
                    .then(function (load_results) {
                        // Maybe reload page?
                        // window.location.reload();
                    });
                }}
                >
                <button
                    type="button"
                    on:click={() => {
                        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 variant-soft-warning hover:variant-ghost-warning"
                    title="Use the professional title from this presenter record to overwrite the person record."
                    >
                    <span class="fas fa-sync-alt mx-1"></span>
                    Sync
                </button>
            </Element_ae_crud>
            {/if}
            </div>
        {/if}

    </li>

    <li
        class:hidden={!$ae_loc.trusted_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_random}
            field_name={'person_id_random'}
            field_type={'select'}
            field_value={$lq__event_presenter_obj.person_id_random}
            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_random, 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_random}
                <a
                    href="/core/person/{$lq__event_presenter_obj.person_id_random}"
                    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_random}"
                    >
                <span class="fas fa-link"></span>
                {$lq__event_presenter_obj.person_id_random}
                </a>
            {:else}
                <span class="fas fa-unlink"></span>
                person
                {@html ae_snip.html__not_set}
            {/if}

            {#if $ae_loc.administrator_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"
                    on:click={() => {
                        console.log('Cancel the person for the presenter.');

                        ae_tmp.person_id = null;
                        ae_tmp.show__edit_person = false;
                    }}
                    class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
                    >
                    <span class="fas fa-times mx-1"></span>
                    Cancel
                </button>

                {:else}

                <button
                type="button"
                on:click={async () => {
                    console.log('Edit the person for the presenter.');

                    let params = {
                            qry__limit: 300,
                        }

                        $slct.person_obj_li = core_func.handle_load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, 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.full_name} (${person_obj.primary_email})`;
                                    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.person_id = $lq__event_presenter_obj?.person_id_random;
                        ae_tmp.show__edit_person = true;
                    }}
                    class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
                    >
                    <span class="fas fa-edit mx-1"></span>
                    Re-link
                </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_random}
        <button
            type="button"
            on:click={() => {
                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_random,
                    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 variant-soft-warning hover:variant-ghost-warning"
            title="Sync the person record fields to the presenter record. person_id: {$lq__event_presenter_obj.person_id_random}; presenter_id: {$lq__event_presenter_obj?.event_presenter_id_random}"
            >
            <span class="fas fa-sync-alt mx-1"></span>
            Sync Person
        </button>
        {/if}

        {#if $ae_loc.administrator_access && !$lq__event_presenter_obj?.person_id_random}
            <button
                type="button"
                on:click={async () => {
                    console.log('Add Person');

                    let person_data = {
                        account_id_random: $slct.account_id,
                        source_code: 'manual:SK',
                        external_id: $lq__event_presenter_obj?.external_id?? 'AE-temp-ID',
                        // user_id_random: user_obj.user_id_random,
                        given_name: $lq__event_presenter_obj.given_name?? 'New',
                        family_name: $lq__event_presenter_obj?.family_name?? 'Presenter',
                        primary_email: $lq__event_presenter_obj?.email?? 'test+newpres@oneskyit.com',
                        code: $lq__event_presenter_obj?.code?? 'new_presenter',
                        // Random number between 100000 and 999999
                        passcode: Math.floor(Math.random() * 900000) + 100000,
                        professional_title: $lq__event_presenter_obj?.professional_title?? 'Presenter',
                        affiliations: $lq__event_presenter_obj?.affiliations?? '',
                        enable: true,
                    }

                    let new_person_obj = await core_func.handle_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.
                    events_func.update_ae_obj__event_presenter({
                        api_cfg: $ae_api,
                        event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
                        data_kv: {person_id_random: new_person_obj.person_id_random},
                        log_lvl: 0,
                    })
                }}
                class:hidden={!$ae_loc.edit_mode}
                class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
                >
                <span class="fas fa-plus mx-1"></span>
                Add Person
            </button>
        {/if}

    </li>

    <li
        class:hidden={!$lq__event_presenter_obj.person_id_random || !$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random]}
        >
        <Element_ae_crud
            api_cfg={$ae_api}
            object_type={'person'}
            object_id={$lq__event_presenter_obj.person_id_random}
            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_random, 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
            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_random || !$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_random}
            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_random, 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}
        >
        <div class="label event_presenter__biography required space-y-4">
            <button
                type="button"
                use:clipboard={ae_tmp.biography?.trim()}
                class="btn btn-sm variant-ghost-warning float-right m-1"
                class:hidden={!ae_tmp?.biography || ae_tmp.biography.length < 100}
                title="Copy the presenter biography text to the clipboard."
                >
                <span class="fas fa-copy mx-1"></span>
                Copy Biography Text
            </button>

            <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_random]}
                class="textarea ae_value event_presenter__biography font-mono"
                class:variant-glass-error={(ae_tmp.biography && ae_tmp.biography.length >600 ? true : false)}
                required
                rows="8" cols="70"
                bind:value={ae_tmp.biography}
                placeholder="Enter brief biography here"></textarea>

        </div>
        <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> -->

        <div class="flex flex-wrap gap-2 p-1">
        <button
            type="button"
            class="btn btn-md variant-glass-primary hover:variant-filled-primary"
            disabled={(ae_tmp.biography == $lq__event_presenter_obj.biography)}
            on:click={() => {
                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_random,
                    data_kv: event_presenter_data,
                    log_lvl: 0,
                })
                .then(function (update_result) {
                    // console.log(update_result);
                    // return update_result;
                });

            }}
            >
            {#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>

        </div>

    </li>
</ul>

</section>

{/if}
