<script lang="ts">
    interface Props {
        log_lvl?: number;
        lq__event_obj: any;
        obj_changed: boolean;
    }

    let {
        log_lvl = $bindable(0),
        lq__event_obj,
        obj_changed = $bindable(false)
    }: Props = $props();

    // *** Import Svelte specific
    // import { prevent_default } from 'svelte/legacy';
    // import { onDestroy, onMount } from 'svelte';
    import { fade } from 'svelte/transition';
    import { browser } from '$app/environment';
    import { goto } from '$app/navigation';

    // *** Import other supporting libraries

    // *** Import Aether specific variables and functions
    import type { key_val } from '$lib/stores/ae_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { core_func } from '$lib/ae_core/ae_core_functions';
    import { api } from '$lib/api/api';
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import {
        idaa_loc,
        idaa_sess,
        idaa_slct,
        idaa_trig
    } from '$lib/stores/ae_idaa_stores';
    import { events_func } from '$lib/ae_events_functions';
    import AE_Comp_Editor_TipTap from '$lib/elements/AE_Comp_Editor_TipTap.svelte';

    // export let container_class_li = [];

    if (!$idaa_slct.event_obj) {
        $idaa_slct.event_obj = {};
    }
    // Create a copy of the event object
    let orig_event_obj: any = { ...$idaa_slct.event_obj };
    if (browser) {
        // console.log(`$lq__event_obj = `, $lq__event_obj);
        console.log(`$idaa_slct.event_obj = `, $idaa_slct.event_obj);
        // orig_event_obj = { ...$idaa_slct.event_obj }; // Create a copy of the event object
        console.log(`orig_event_obj = `, orig_event_obj);

        // JSON.stringify($idaa_slct.event_obj) !== JSON.stringify(orig_event_obj)
    }

    if ($idaa_loc.recovery_meetings.edit__event_obj) {
        $idaa_sess.recovery_meetings.edit__event_obj =
            $idaa_loc.recovery_meetings.edit__event_obj;
        $idaa_loc.recovery_meetings.edit__event_obj = false;
    }

    let prom_api__event_obj: any = $state();

    let description_new_html = $state($idaa_slct.event_obj?.description ?? '');
    let description_changed = $state(false);
    let location_text_new_html = $state(
        $idaa_slct.event_obj?.location_text ?? ''
    );
    let location_text_changed = $state(false);
    let attend_text_new_html = $state($idaa_slct.event_obj?.attend_text ?? '');
    let attend_text_changed = $state(false);
    let recurring_text_new_html = $state(
        $idaa_slct.event_obj?.recurring_text ?? ''
    );
    let recurring_text_changed = $state(false);
    let notes_new_html = $state($idaa_slct.event_obj?.notes ?? '');
    let notes_changed = $state(false);

    let disable_submit_btn = $state(true);

    if ($idaa_slct.event_id) {
        $slct_trigger = 'load__event_obj';
        disable_submit_btn = false;
    } else {
        $idaa_slct.event_id = null;
        $idaa_slct.event_obj = {
            account_id: $ae_loc.account_id,

            name: null,
            description: null,
            type: null,
            physical: false,
            virtual: false,

            address_name: null,
            address_line_1: null,
            address_line_2: null,
            address_line_3: null,
            address_city: null,
            address_country_subdivision_code: null,
            address_country_subdivision_name: null,
            address_postal_code: null,
            address_country_alpha_2_code: null,
            address_country_name: null,

            location_text: null,

            attend_platform: null,
            attend_url: null,
            attend_url_code: null,
            attend_url_passcode: null,
            attend_phone: null,
            attend_phone_passcode: null,

            attend_text: null,

            attend_json: {},

            timezone: null,

            recurring_text: null,

            contact_li_json: [
                {
                    full_name: $idaa_loc.novi_full_name,
                    email: $idaa_loc.novi_email,
                    phone_mobile: null,
                    phone_home: null,
                    phone_office: null
                },
                {
                    full_name: null,
                    email: null,
                    phone_mobile: null,
                    phone_home: null,
                    phone_office: null
                }
            ],

            sort: null,
            notes: null,

            external_person_id: $idaa_loc.novi_uuid,
            external_person_full_name: $idaa_loc.novi_full_name,
            external_person_email: $idaa_loc.novi_email
        };
        console.log(`Event Object started: ${$idaa_slct.event_obj}`);
    }

    let lu_time_zone_list = localStorage.getItem('lu_time_zone_list')
        ? JSON.parse(localStorage.getItem('lu_time_zone_list') ?? '')
        : [];
    // $ae_loc.lu_time_zone_list = []; // Reset the list
    // Refresh the list at least 20% of the time.
    if (
        $ae_loc.lu_time_zone_list &&
        $ae_loc.lu_time_zone_list.length > 0 &&
        Math.random() < 0.8
    ) {
        console.log('Already have time zone list!', $ae_loc.lu_time_zone_list);
    } else {
        console.log('No time zone list');

        let lu_time_zone_li_get_promise = core_func
            .load_ae_obj_li__time_zone({
                api_cfg: $ae_api,
                only_priority: true,
                log_lvl: log_lvl
            })
            .then(function (lu_time_zone_li_get_result) {
                if (lu_time_zone_li_get_result) {
                    $ae_loc.lu_time_zone_list = lu_time_zone_li_get_result;
                    console.log(`Time zone list:`, $ae_loc.lu_time_zone_list);
                    console.log($ae_loc.lu_time_zone_list[0]);
                    console.log($ae_loc.lu_time_zone_list[10]);
                } else {
                    console.log(`No time zones returned!`);
                    $ae_loc.lu_time_zone_list = [];
                }
            })
            .catch(function (error: any) {
                console.log('No results returned or failed.', error);
            });

        // let lu_time_zone_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
        //     api_cfg: $ae_api,
        //     obj_type: 'lu', // "lu" = a lookup table
        //     for_obj_type: 'time_zone',
        //     enabled: null,
        //     hidden: null,
        //     // order_by_li: {'name': 'ASC'},
        //     log_lvl: 1
        //     })

        // .then(function (lu_time_zone_li_get_result) {
        //     if (lu_time_zone_li_get_result) {
        //         $ae_loc.lu_time_zone_list = lu_time_zone_li_get_result;
        //         console.log(`Time zone list:`, $ae_loc.lu_time_zone_list);
        //         console.log($ae_loc.lu_time_zone_list[0]);
        //         console.log($ae_loc.lu_time_zone_list[10]);
        //     } else {
        //         console.log(`No time zones returned!`);
        //         $ae_loc.lu_time_zone_list = [];
        //     }
        // })
        // .catch(function (error: any) {
        //     console.log('No results returned or failed.', error);
        // });
    }

    let lu_country_list = $state(
        localStorage.getItem('lu_country_list')
            ? JSON.parse(localStorage.getItem('lu_country_list') ?? '')
            : []
    );
    // $ae_loc.lu_country_list = []; // Reset the list
    // Refresh the list at least 20% of the time.
    if (lu_country_list && lu_country_list.length > 50 && Math.random() < 0.8) {
        console.log(
            `Already have country list! ${lu_country_list.length}`,
            lu_country_list
        );
    } else {
        console.log('No country list');

        let lu_country_li_get_promise = core_func
            .load_ae_obj_li__country({
                api_cfg: $ae_api,
                log_lvl: log_lvl
            })
            .then(function (lu_country_li_get_result) {
                if (lu_country_li_get_result) {
                    lu_country_list = lu_country_li_get_result;
                    localStorage.setItem(
                        'lu_country_list',
                        JSON.stringify(lu_country_li_get_result)
                    );
                    if (log_lvl) {
                        console.log(`Country list:`, lu_country_list);
                    }
                } else {
                    console.log(`No countries returned!`);
                    // $ae_loc.lu_country_list = [];
                }
            })
            .catch(function (error: any) {
                console.log('No results returned or failed.', error);
            });
    }

    let lu_country_subdivision_list = $state(
        localStorage.getItem('lu_country_subdivision_list')
            ? JSON.parse(
                  localStorage.getItem('lu_country_subdivision_list') ?? ''
              )
            : []
    );
    // $ae_loc.lu_country_subdivision_list = []; // Reset the list
    // Refresh the list at least 20% of the time.
    if (
        lu_country_subdivision_list &&
        lu_country_subdivision_list.length > 50 &&
        Math.random() < 0.8
    ) {
        console.log(
            `Already have country subdivision list! ${lu_country_subdivision_list.length}`,
            lu_country_subdivision_list
        );
    } else {
        console.log('No country subdivision list. Requesting new list.');

        let lu_country_subdivision_li_get_promise = core_func
            .load_ae_obj_li__country_subdivision({
                api_cfg: $ae_api,
                log_lvl: log_lvl
            })
            .then(function (lu_country_subdivision_li_get_result) {
                /* We need to save the country subdivision list to localStore */
                if (lu_country_subdivision_li_get_result) {
                    lu_country_subdivision_list =
                        lu_country_subdivision_li_get_result;
                    localStorage.setItem(
                        'lu_country_subdivision_list',
                        JSON.stringify(lu_country_subdivision_li_get_result)
                    );
                    if (log_lvl) {
                        console.log(
                            `Country subdivision list:`,
                            lu_country_subdivision_list
                        );
                    }
                } else {
                    console.log(`No country subdivisions returned!`);
                    // $ae_loc.lu_country_subdivision_list = [];
                }
            })
            .catch(function (error: any) {
                console.log('No results returned or failed.', error);
            });
    }

    $effect(() => {
        if ($idaa_slct.event_obj) {
            if (log_lvl) {
                console.log(
                    'Selected Event object changed?',
                    $idaa_slct.event_obj
                );
            }

            if ($idaa_slct.event_obj == null) {
                $idaa_slct.event_obj = { contact_li_json: [] };
            } else {
                disable_submit_btn = false;
            }
        }
    });

    function prevent_default<T extends Event>(fn: (event: T) => void) {
        return function (event: T) {
            event.preventDefault();
            fn(event);
        };
    }

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

        log_lvl = 1;

        disable_submit_btn = true;

        let form_data = new FormData(event.target);
        if (log_lvl) {
            console.log(form_data);
        }

        // Form Event object data incoming
        let event_meeting_fd = ae_util.extract_prefixed_form_data({
            prefix: null,
            form_data: form_data,
            trim_values: true,
            bool_tf_str: true,
            log_lvl: log_lvl
        });
        // console.log(event_meeting_fd);

        // Form Event object data outgoing
        let event_do: key_val = {};

        if (!$idaa_slct.event_id) {
            event_do['account_id'] = $ae_loc.account_id;
            event_do['enable'] = true;
        }

        event_do['name'] = event_meeting_fd.name;

        // Check if the description_new_html exists and is a string
        if (typeof description_new_html === 'string') {
            console.log('New description is a string');
            event_do['description'] = description_new_html;
        } else {
            console.log('New description is not a string. Do nothing.');
            // event_do['description'] = event_meeting_fd.description;
        }

        event_do['type'] = event_meeting_fd.type;
        event_do['physical'] = !!event_meeting_fd.physical;
        event_do['virtual'] = !!event_meeting_fd.virtual;

        let address: key_val = {};
        address['name'] = event_meeting_fd.address_name;
        address['line_1'] = event_meeting_fd.address_line_1;
        address['line_2'] = event_meeting_fd.address_line_2;
        address['line_3'] = event_meeting_fd.address_line_3;
        address['city'] = event_meeting_fd.address_city;
        address['country_subdivision_code'] =
            event_meeting_fd.address_country_subdivision_code;
        if (event_meeting_fd.address_country_subdivision_code) {
            address['country_subdivision_code'] =
                event_meeting_fd.address_country_subdivision_code;

            let country_subdivision_data = ae_util.get_obj_li_w_match_prop({
                obj_li: lu_country_subdivision_list,
                property: 'code',
                value: event_meeting_fd.address_country_subdivision_code
            });
            address['state_province'] = country_subdivision_data[0].name; // Assume there is only one match
            // address['country_subdivision_name'] = country_subdivision_data[0].name;
        }
        address['postal_code'] = event_meeting_fd.address_postal_code;
        if (event_meeting_fd.address_country_alpha_2_code) {
            address['country_alpha_2_code'] =
                event_meeting_fd.address_country_alpha_2_code;

            let country_data = ae_util.get_obj_li_w_match_prop({
                obj_li: lu_country_list,
                property: 'alpha_2_code',
                value: event_meeting_fd.address_country_alpha_2_code
            });
            console.log(country_data);
            address['country'] = country_data[0].english_short_name; // Assume there is only one match
            // address['country_name'] = country_data[0].english_short_name; // DO NOT USE - Scott 2026-01-09
        }
        event_do['location_address_json'] = address;

        // Check if the location_text_new_html exists and is a string
        if (typeof location_text_new_html === 'string') {
            event_do['location_text'] = location_text_new_html;
        } else {
            console.log('New location text is not a string. Do nothing.');
        }

        event_do['attend_url'] = event_meeting_fd.attend_url;
        event_do['attend_url_code'] = event_meeting_fd.attend_url_code;
        event_do['attend_url_passcode'] = event_meeting_fd.attend_url_passcode;

        event_do['attend_phone'] = event_meeting_fd.attend_phone;
        event_do['attend_phone_passcode'] =
            event_meeting_fd.attend_phone_passcode;

        // Check if the attend_text_new_html exists and is a string
        if (typeof attend_text_new_html === 'string') {
            event_do['attend_text'] = attend_text_new_html;
        } else {
            console.log('New attend text is not a string. Do nothing.');
        }

        if ($idaa_sess.recovery_meetings?.attend_platform === 'Zoom') {
            // event_do['attend_url_passcode_enc'] = event_meeting_fd.attend_url_passcode_enc;

            let zoom_attend_domain =
                event_meeting_fd.attend_domain ?? 'zoom.us';
            let zoom_meeting_id = event_do['attend_url_code']
                ? event_do['attend_url_code'].replace(/[^0-9]/g, '').trim()
                : null; // Strip out any non-numeric characters
            let zoom_passcode = event_do['attend_url_passcode']
                ? event_do['attend_url_passcode'].trim()
                : null; // Strip out any non-alphanumeric characters
            let zoom_passcode_enc = event_meeting_fd.attend_url_passcode_enc
                ? event_meeting_fd.attend_url_passcode_enc
                      .replace(/[^a-zA-Z0-9]/g, '')
                      .trim()
                : null; // Strip out any non-alphanumeric characters

            let zoom_url = event_meeting_fd.zoom_attend_url
                ? event_meeting_fd.zoom_attend_url.trim()
                : null;

            // Example JSON structure:
            // "zoom": {
            //     domain = attend_url_base; Zoom domain; Vanity URL
            //     meeting_id = append as /j/attend_url_code;
            //     passcode = attend_url_passcode
            //     url = ''; // generated below
            //     phone = ''; // ignored; Just use the standard list?
            // }
            // domain: only contain letters, numbers and dashes (-)
            // let domain = event_do['attend_url'] ? event_do['attend_url'].replace(/[^a-zA-Z0-9-]/g, '') : null; // Strip out any non-alphanumeric characters except dashes
            event_do['attend_json'] = {
                zoom: {
                    domain: zoom_attend_domain,
                    meeting_id: zoom_meeting_id,
                    passcode: zoom_passcode,
                    passcode_enc: zoom_passcode_enc,
                    full_url: zoom_url
                }
            };
            console.log(event_do['attend_json']);

            event_do['attend_url'] = zoom_url;
            event_do['attend_url_text'] =
                `Join Zoom Meeting: ${zoom_meeting_id ? zoom_url : ''}`;
            event_do['attend_url_passcode'] = zoom_passcode;
            event_do['attend_url_code'] = zoom_meeting_id;
        } else if ($idaa_sess.recovery_meetings?.attend_platform === 'Jitsi') {
            let jitsi_full_url = event_meeting_fd.attend_url
                ? event_meeting_fd.attend_url.trim()
                : null;
            let jitsi_name = event_meeting_fd.attend_url_code
                ? event_meeting_fd.attend_url_code.trim()
                : null;
            let jitsi_passcode = event_meeting_fd.attend_url_passcode
                ? event_meeting_fd.attend_url_passcode.trim()
                : null;

            event_do['attend_json'] = {
                jitsi: {
                    full_url: jitsi_full_url,
                    name: jitsi_name,
                    passcode: jitsi_passcode
                }
            };
            console.log(event_do['attend_json']);

            event_do['attend_url'] = jitsi_full_url;
            event_do['attend_url_text'] =
                `Join Jitsi Meeting: ${jitsi_name ? jitsi_full_url : ''}`;
            event_do['attend_url_passcode'] = jitsi_passcode;
            event_do['attend_url_code'] = jitsi_name;
        } else {
            event_do['attend_json'] = {};
        }

        event_do['timezone'] = event_meeting_fd.timezone;

        event_do['recurring'] = true; // Assume always true 2024-10 !!event_meeting_fd.recurring;
        event_do['recurring_pattern'] = event_meeting_fd.recurring_pattern;

        // NOTE: !! converts to boolean based on truthiness
        event_do['weekday_sunday'] = !!event_meeting_fd.weekday_sunday;
        event_do['weekday_monday'] = !!event_meeting_fd.weekday_monday;
        event_do['weekday_tuesday'] = !!event_meeting_fd.weekday_tuesday;
        event_do['weekday_wednesday'] = !!event_meeting_fd.weekday_wednesday;
        event_do['weekday_thursday'] = !!event_meeting_fd.weekday_thursday;
        event_do['weekday_friday'] = !!event_meeting_fd.weekday_friday;
        event_do['weekday_saturday'] = !!event_meeting_fd.weekday_saturday;

        if (event_meeting_fd['recurring_start_time']) {
            event_do['recurring_start_time'] =
                event_meeting_fd.recurring_start_time;
        }
        if (event_meeting_fd['recurring_end_time']) {
            event_do['recurring_end_time'] =
                event_meeting_fd.recurring_end_time;
        }

        // Check if the recurring_text_new_html exists and is a string
        if (typeof recurring_text_new_html === 'string') {
            if (log_lvl) {
                console.log(
                    `New recurring text is a string: ${recurring_text_new_html}`
                );
            }
            event_do['recurring_text'] = recurring_text_new_html;
        } else {
            if (log_lvl) {
                console.log('New recurring text is not a string. Do nothing.');
            }
        }

        console.log(event_do['recurring_text']);
        if (
            !event_do['recurring_text'] ||
            event_do['recurring_text'].includes('*gen*')
        ) {
            let days_of_week = [];
            if (event_do['weekday_sunday']) {
                days_of_week.push('Sunday');
            }
            if (event_do['weekday_monday']) {
                days_of_week.push('Monday');
            }
            if (event_do['weekday_tuesday']) {
                days_of_week.push('Tuesday');
            }
            if (event_do['weekday_wednesday']) {
                days_of_week.push('Wednesday');
            }
            if (event_do['weekday_thursday']) {
                days_of_week.push('Thursday');
            }
            if (event_do['weekday_friday']) {
                days_of_week.push('Friday');
            }
            if (event_do['weekday_saturday']) {
                days_of_week.push('Saturday');
            }

            let current_date_iso = ae_util.iso_datetime_formatter(
                new Date(),
                'YYYY-MM-DD'
            );
            if (log_lvl) {
                console.log(`Current date: ${current_date_iso}`);
            }

            // event_do['recurring_text'] = `This meeting occurs every ${days_of_week.join(', ')} at ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_do['recurring_start_time']}`, 'time_12_short_no_leading')} to ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_do['recurring_end_time']}`, 'time_12_short_no_leading')}.`;

            // event_do['recurring_text'] = `This meeting occurs every ${days_of_week.join(', ')} at ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_do['recurring_start_time']}`, 'time_12_short_no_leading')}.`;

            event_do['recurring_text'] =
                `*gen* ${event_do['recurring_pattern'] ?? ''}: ${days_of_week.join(', ')} at ${ae_util.iso_datetime_formatter(`${current_date_iso} ${event_do['recurring_start_time']}`, 'time_12_short_no_leading')} ${event_do['timezone'] ?? ''}`;
        }

        event_do['external_person_id'] = event_meeting_fd.external_person_id; // NOTE: Defaults to the Novi user that created/owns this event

        event_do['contact_li_json'] = [];
        let contact_1: key_val = {};
        // contact_1['external_person_id'] = event_meeting_fd.external_person_id; // NOTE: From the Novi user that created/owns this event
        contact_1['full_name'] = event_meeting_fd.contact_1_full_name; // NOTE: From the Novi user that created/owns this event
        contact_1['email'] = event_meeting_fd.contact_1_email; // NOTE: From the Novi user that created/owns this event
        if (event_meeting_fd.contact_1_phone_mobile) {
            contact_1['phone_mobile'] = event_meeting_fd.contact_1_phone_mobile; // NOTE: From the Novi user that created/owns this event, but allow them to change or hide it
        }
        if (event_meeting_fd.contact_1_phone_home) {
            contact_1['phone_home'] = event_meeting_fd.contact_1_phone_home;
        }
        if (event_meeting_fd.contact_1_phone_office) {
            contact_1['phone_office'] = event_meeting_fd.contact_1_phone_office;
        }
        event_do['contact_li_json'].push(contact_1);

        let contact_2: key_val = {};
        contact_2['full_name'] = event_meeting_fd.contact_2_full_name;
        contact_2['email'] = event_meeting_fd.contact_2_email;
        if (event_meeting_fd.contact_2_phone_mobile) {
            contact_2['phone_mobile'] = event_meeting_fd.contact_2_phone_mobile;
        }
        if (event_meeting_fd.contact_2_phone_home) {
            contact_2['phone_home'] = event_meeting_fd.contact_2_phone_home;
        }
        if (event_meeting_fd.contact_2_phone_office) {
            contact_2['phone_office'] = event_meeting_fd.contact_2_phone_office;
        }
        event_do['contact_li_json'].push(contact_2);

        event_do['status'] = event_meeting_fd.status ?? null;

        event_do['hide'] = !!event_meeting_fd.hide;
        event_do['priority'] = !!event_meeting_fd.priority;
        if (event_meeting_fd['sort']) {
            event_do['sort'] = Number(event_meeting_fd.sort);
        }
        if (event_meeting_fd['group']) {
            event_do['group'] = event_meeting_fd.group;
        } else {
            event_do['group'] = null;
        }

        // NOTE: We only want to set enable value if the input is defined.
        if (typeof event_meeting_fd.enable !== 'undefined') {
            event_do.enable = event_meeting_fd.enable;
        }

        // Check if the notes_new_html exists and is a string
        if (typeof notes_new_html === 'string') {
            event_do['notes'] = notes_new_html;
        } else {
            console.log('New notes is not a string. Do nothing.');
        }

        if (log_lvl) {
            console.log('Event object data:', event_do);
        }

        if (!$idaa_slct.event_id) {
            prom_api__event_obj = events_func
                .create_ae_obj__event({
                    api_cfg: $ae_api,
                    account_id: $ae_loc.account_id,
                    data_kv: event_do,
                    log_lvl: log_lvl
                })
                .then(function (event_obj_create_result) {
                    if (!event_obj_create_result) {
                        console.log('The result was null or false.');
                        return false;
                    } else {

                        if (log_lvl) {
                            console.log(
                                'event_obj_create_result:',
                                event_obj_create_result
                            );
                        }
                        $idaa_slct.event_id =
                            event_obj_create_result.event_id;
                        $idaa_slct.event_obj = event_obj_create_result;

                        if ($ae_loc.site_cfg_json?.recovery_mtg_send_staff_new_email) {
                            send_staff_notification_email(event_obj_create_result);
                        }
                    }

                    return event_obj_create_result;
                })
                .catch(function (error: any) {
                    console.log('Something went wrong.');
                    console.log(error);
                    return false;
                })
                .finally(() => {
                    disable_submit_btn = false;
                    $idaa_sess.recovery_meetings.show__modal_edit = false;
                    $idaa_sess.recovery_meetings.show__modal_view = true;

                    // log_lvl = 1;
                    // if (log_lvl) {
                    //     console.log(
                    //         `Check if we should send staff update email...`, $ae_loc.site_cfg_json?.recovery_mtg_send_staff_new_email
                    //     );
                    // }
                });

            return prom_api__event_obj;
        } else {
            prom_api__event_obj = events_func
                .update_ae_obj__event({
                    api_cfg: $ae_api,
                    event_id: $idaa_slct.event_id,
                    data_kv: event_do,
                    log_lvl: log_lvl
                })
                .then(function (event_obj_update_result) {
                    if (!event_obj_update_result) {
                        console.log('The result was null or false.');
                        return false;
                    } else {
                        if (log_lvl) {
                            console.log('event_obj_update_result:', event_obj_update_result);
                        }

                        $idaa_slct.event_obj = event_obj_update_result;

                        if ($ae_loc.site_cfg_json?.recovery_mtg_send_staff_update_email) {
                            send_staff_notification_email(event_obj_update_result);
                        }
                    }

                    return event_obj_update_result;
                })
                .catch(function (error: any) {
                    console.log('Something went wrong.');
                    console.log(error);
                    return false;
                })
                .finally(() => {
                    disable_submit_btn = false;
                    $idaa_sess.recovery_meetings.show__modal_edit = false;
                    $idaa_sess.recovery_meetings.show__modal_view = true;

                    // log_lvl = 1;
                    // if (log_lvl) {
                    //     console.log(
                    //         `Check if we should send staff update email...`, $ae_loc.site_cfg_json?.recovery_mtg_send_staff_update_email
                    //     );
                    // }

                    // if (
                    //     // !$ae_loc.administrator_access &&
                    //     $ae_loc.site_cfg_json
                    //         ?.recovery_mtg_send_staff_update_email
                    // ) {
                    //     send_staff_notification_email();
                    // }

                    // send_staff_notification_email(event_do);
                });

            // log_lvl = 0;

            return prom_api__event_obj;
        }
    }

    // Updated 2024-11-15
    async function handle_delete_event_obj({
        event_id,
        method = 'disable'
    }: {
        event_id: string;
        method?: string;
    }) {
        if (log_lvl) {
            console.log('*** handle_delete_event_obj() ***');
        }

        prom_api__event_obj = events_func
            .delete_ae_obj_id__event({
                api_cfg: $ae_api,
                event_id: event_id,
                method: method as any,
                log_lvl: log_lvl
            })
            .then(function (event_obj_delete_result) {
                // $idaa_sess.recovery_meetings.show__modal_edit = false;
                // $idaa_sess.recovery_meetings.show__modal_view = false;
                $idaa_sess.recovery_meetings.edit__event_obj = false;
            })
            .catch(function (error: any) {
                console.log(
                    'The result was null or false when trying to delete.',
                    error
                );
            })
            .finally(() => {
                // $idaa_sess.recovery_meetings.show__modal_edit = false;
                $idaa_slct.event_id = null;
                $idaa_slct.event_obj = null;
                goto('/idaa/recovery_meetings', { replaceState: true });
            });

        return prom_api__event_obj;
    }

    // Updated 2026-02-16
    // The event_do (Event (Recovery Meeting) Data Out) should be the new form data
    function send_staff_notification_email(event_do: key_val) {
        if (log_lvl) {
            console.log(
                `*** send_staff_notification_email() *** To: ${$ae_loc.site_cfg_json?.admin_email} From: ${$ae_loc.site_cfg_json?.noreply_email} Subject: IDAA Recovery Meeting: ${event_do.name} (ID: ${event_do.event_id})`
            );
        }

        let link_base_url =
            $ae_loc.site_cfg_json.novi_meetings_base_url ??
            `${$ae_loc.url_origin}/idaa/recovery_meetings`;

        let subject = `IDAA Recovery Meeting: ${event_do.name} (ID: ${event_do.event_id})`;

        let body_html = `
    <div>
    <p>A recovery meeting has been created or updated named "${event_do.name}".</p>
    </div>

    <br>

    <div>
    IDAA Recovery Meeting ID: ${event_do.event_id}<br>
    <p>Use this link to view the meeting.<br>
    Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${link_base_url}?event_id=${event_do.event_id}</a></p>
    </div>`;

        api.send_email({
            api_cfg: $ae_api,
            from_email:
                $ae_loc.site_cfg_json?.noreply_email ??
                'noreply+recmtg@oneskyit.com',
            // from_email: 'noreply+recmtg@oneskyit.com',
            // from_email: 'noreply+recmtg@idaa.org',
            from_name:
                $ae_loc.site_cfg_json?.noreply_name ?? 'IDAA Rec Mtg NoReply',
            to_email:
                $ae_loc.site_cfg_json?.admin_email ??
                'admin+recmtg@oneskyit.com',
            // to_email: 'test+recmtg@oneskyit.com', // 'scott+recmtg@oneskyit.com'
            // to_email: 'stidem+test@gmail.com',
            to_name:
                $ae_loc.site_cfg_json?.admin_name ??
                'IDAA Recovery Meeting Admin',
            subject: subject,
            body_html: body_html,
            log_lvl: log_lvl
            // test: true,
        });
    }

    $effect(() => {
        if (
            orig_event_obj === null ||
            orig_event_obj === undefined ||
            orig_event_obj === 'undefined'
        ) {
            obj_changed = false;
        } else if (
            !obj_changed &&
            orig_event_obj?.id &&
            (JSON.stringify($idaa_slct.event_obj) !==
                JSON.stringify(orig_event_obj) ||
                description_changed ||
                notes_changed)
        ) {
            // console.log('Event object has changed from original.', $inspect(orig_event_obj));
            console.log(
                'Event object has changed from original.',
                orig_event_obj
            );
            console.log('Event object has changed.', $idaa_slct.event_obj);
            obj_changed = true;
        } else if (
            obj_changed &&
            orig_event_obj?.id &&
            JSON.stringify($idaa_slct.event_obj) ===
                JSON.stringify(orig_event_obj) &&
            !description_changed &&
            !notes_changed
        ) {
            obj_changed = false;
            // console.log(orig_event_obj?.attend_json);
            // if (orig_event_obj?.attend_json?.zoom) {
            //     $idaa_sess.recovery_meetings.attend_platform = 'Zoom';
            // } else {
            //     $idaa_sess.recovery_meetings.attend_platform = null;
            // }
        }
    });

    // $effect(() => {
    //     if ($idaa_slct.event_obj?.attend_json?.zoom) {
    //         $idaa_sess.recovery_meetings.attend_platform = 'Zoom';
    //     } else {
    //         $idaa_sess.recovery_meetings.attend_platform = null;
    //     }
    // });
    if (browser && $idaa_slct.event_obj?.attend_json) {
        if ($idaa_slct.event_obj?.attend_json?.zoom) {
            $idaa_sess.recovery_meetings.attend_platform = 'Zoom';
        } else if ($idaa_slct.event_obj?.attend_json?.jitsi) {
            $idaa_sess.recovery_meetings.attend_platform = 'Jitsi';
        } else {
            $idaa_sess.recovery_meetings.attend_platform = null;
        }
    }

    $effect(() => {
        if (
            $idaa_trig == 'update_zoom_full_url' &&
            $idaa_slct.event_obj.attend_url_code &&
            $idaa_slct.event_obj.attend_url_passcode &&
            $idaa_sess.recovery_meetings.attend_platform === 'Zoom'
        ) {
            $idaa_trig = null;
            // $idaa_slct.event_obj.attend_json.zoom.full_url = `https://${$idaa_slct.event_obj.attend_url.replace(/[^a-zA-Z0-9-]/g, '')}/j/${$idaa_slct.event_obj.attend_url_code.replace(/[^0-9]/g, '')}?pwd=${$idaa_slct.event_obj.attend_url_passcode.replace(/[^a-zA-Z0-9]/g, '')}`;

            // $idaa_slct.event_obj.attend_url_code = String($idaa_slct.event_obj.attend_url_code).replace(/\D/g, '').trim();
            $idaa_slct.event_obj.attend_url_code =
                String($idaa_slct.event_obj.attend_url_code)
                    .replace(/[^0-9]/g, '')
                    .trim() ?? '';

            $idaa_slct.event_obj.attend_url_passcode =
                String($idaa_slct.event_obj.attend_url_passcode).trim() ?? '';

            // $idaa_slct.event_obj.attend_json.zoom.passcode_enc = String($idaa_slct.event_obj.attend_json.zoom.passcode_enc).replace(/[^a-zA-Z0-9]/g, '').trim();
            $idaa_slct.event_obj.attend_json.zoom.passcode_enc =
                String($idaa_slct.event_obj.attend_json.zoom.passcode_enc) ??
                '';

            // $idaa_slct.event_obj.attend_json.zoom.domain = $idaa_slct.event_obj.attend_json.zoom.domain ? String($idaa_slct.event_obj.attend_json.zoom.domain).replace(/[^a-zA-Z0-9.-]/g, '').trim() : 'zoom.us';
            $idaa_slct.event_obj.attend_json.zoom.domain = $idaa_slct.event_obj
                .attend_json.zoom.domain
                ? String($idaa_slct.event_obj.attend_json.zoom.domain)
                      .toLowerCase()
                      .trim()
                : 'zoom.us';
            $idaa_slct.event_obj.attend_json.zoom.domain =
                $idaa_slct.event_obj.attend_json.zoom.domain
                    .replace(/^https?:\/\//, '')
                    .replace(/\/.*$/, ''); // Remove any leading http(s):// and anything after the first /

            if (
                $idaa_slct.event_obj.attend_json.zoom.passcode_enc &&
                $idaa_slct.event_obj.attend_json.zoom.passcode_enc.length >= 8
            ) {
                $idaa_slct.event_obj.attend_json.zoom.full_url = `https://${$idaa_slct.event_obj.attend_json.zoom.domain}/j/${$idaa_slct.event_obj.attend_url_code}?pwd=${$idaa_slct.event_obj.attend_json.zoom.passcode_enc}`;
            } else {
                $idaa_slct.event_obj.attend_json.zoom.full_url = `https://${$idaa_slct.event_obj.attend_json.zoom.domain}/j/${$idaa_slct.event_obj.attend_url_code}?pwd=${$idaa_slct.event_obj.attend_url_passcode}`;
            }
        } else {
            // $idaa_slct.event_obj.attend_json = {};
            // $idaa_slct.event_obj.attend_json.zoom = null;
        }
    });
</script>

<section
    class="
        svelte_component ae_section ae_edit event_obj edit__event_obj
        space-y-2 p-2
        rounded-md
        preset-filled-surface-50-950 preset-outlined-warning-400-600
        "
    class:ae_create={!$idaa_slct.event_id}
    bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
    <form
        onsubmit={prevent_default(handle_submit_form)}
        class="relative space-y-1"
    >
        {#await prom_api__event_obj}
            <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>
                Saving...
            </div>
        {:then}
            {#if prom_api__event_obj}
                <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div> -->
            {:else}
                <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
            {/if}
        {/await}

        <section class="text-center">
            <!-- BEGIN: section event__options -->
            {#if $idaa_slct.event_id}
                <button
                    type="submit"
                    disabled={disable_submit_btn}
                    class="novi_btn btn btn-primary preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition absolute top-0.5 right-0.5"
                >
                    {#await prom_api__event_obj}
                        <span class="fas fa-spinner fa-spin m-1"></span> Saving
                    {:then}
                        <span class="fas fa-save m-1"></span> Save
                    {/await}
                </button>
            {/if}
        </section>
        <!-- END: section event__options -->

        <!-- <h3>Recovery Meeting</h3> -->

        <input type="hidden" value={$idaa_slct.event_id} />

        <div
            class="ae_section event__general_information p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"
        >
            <!-- BEGIN: section event__general_information -->

            <div>
                <label for="name" class="w-full">
                    <span class="text-lg text-neutral-500 font-semibold">
                        Name of Recovery Meeting
                    </span>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        required
                        max="200"
                        value={$lq__event_obj?.name ?? ''}
                        placeholder="Name of Recovery Meeting"
                        autocomplete="off"
                        class="
                    input w-full
                    preset-tonal-surface hover:preset-filled-surface-100-900
                    form-control
                    "
                    />
                </label>
            </div>

            <label for="description" class="ae_label event__description w-full">
                <span class="text-lg text-neutral-500 font-semibold">
                    Short description
                </span>
                <!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} ></textarea> -->

                <AE_Comp_Editor_TipTap
                    bind:content={description_new_html}
                    class_li="preset-tonal-surface hover:preset-filled-surface-100-900 font-mono font-normal"
                    placeholder="A short description or overview of this recovery meeting"
                />

                <!-- {@html $idaa_slct.event_obj?.description_new_html ?? 'not sure?'} -->

                <!-- If changed then show Save button -->
                <!-- {#if
                $idaa_slct.event_obj.description_new_html &&
                $idaa_slct.event_obj?.description_new_html != '<p></p>' &&
                $idaa_slct.event_obj.description != $idaa_slct.event_obj.description_new_html}
                <button type="button"
                    class="btn btn-md btn-primary variant-ghost-secondary"
                    on:click={() => $idaa_slct.event_obj.description = $idaa_slct.event_obj.description_new_html}
                    >
                    <span class="fas fa-save m-1"></span>
                    Save?
                </button>
            {/if} -->
            </label>

            <div>
                <label class="form-group w-100">
                    <span class="text-lg text-neutral-500 font-semibold">
                        Type of Recovery Meeting
                    </span>
                    <select
                        name="type"
                        value={$lq__event_obj?.type}
                        class="
                        form-control col-sm-12
                        select w-48 p-1
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                    >
                        <option value="IDAA">IDAA</option>
                        <option value="Caduceus">Caduceus</option>
                        <option value="Family Recovery">Family Recovery</option>
                    </select>
                </label>
                <ul class="text-sm text-neutral-500 list-disc list-inside">
                    <li><strong>IDAA</strong> - Open to IDAA members only</li>
                    <li>
                        <strong>Caduceus</strong> - Open to all healthcare workers
                        including those who do not qualify for IDAA
                    </li>
                    <li>
                        <strong>Family Recovery</strong> - Open to spouses, parents,
                        and adult children of medical professionals who have substance
                        use disorder.
                    </li>
                </ul>
            </div>
        </div>
        <!-- END: section event__general_information -->

        <div
            class="ae_section event__how_to_attend p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"
        >
            <!-- BEGIN: section event__how_to_attend -->
            <h3 class="h2">How to Attended</h3>

            <fieldset class="event__physical_virtual">
                <legend class="legend text-lg text-neutral-500 font-semibold"
                    >Face-to-Face or Virtual</legend
                >
                <p>
                    Is this a face-to-face/in person meeting, a virtual/online
                    meeting, or both?
                </p>
                <div
                    class="ae_group border border-gray-200 rounded-md p-2 space-y-1"
                >
                    <label
                        for="physical"
                        class="form-check-label preset-tonal-tertiary preset-outlined-tertiary-100-900 hover:preset-filled-success-100-900 px-2 py-1 rounded-lg"
                        class:preset-filled-success-200-800={$idaa_slct
                            .event_obj.physical}
                        class:preset-tonal-tertiary={!$idaa_slct.event_obj
                            .physical}
                    >
                        <span
                            class="
                            text-base font-semibold text-neutral-600-400
                            "
                        >
                            <!-- <span class="fas fa-map-marker-alt"></span> -->
                            <span class="fas fa-home"></span>
                            Face-to-Face/In person
                        </span>
                        <input
                            type="checkbox"
                            name="physical"
                            id="physical"
                            bind:checked={$idaa_slct.event_obj.physical}
                            class="checkbox form-check-input d-inline-block"
                        />
                    </label>
                    <label
                        for="virtual"
                        class="form-check-label preset-outlined-tertiary-100-900 hover:preset-filled-success-100-900 px-2 py-1 rounded-lg"
                        class:preset-filled-success-200-800={$idaa_slct
                            .event_obj.virtual}
                        class:preset-tonal-tertiary={!$idaa_slct.event_obj
                            .virtual}
                    >
                        <span
                            class="
                            text-base font-semibold text-neutral-600-400
                            "
                        >
                            <span class="fas fa-laptop"></span>
                            Virtual/Online
                        </span>
                        <input
                            type="checkbox"
                            name="virtual"
                            id="virtual"
                            bind:checked={$idaa_slct.event_obj.virtual}
                            class="checkbox form-check-input d-inline-block"
                        />
                    </label>
                </div>
            </fieldset>

            {#if !$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
                <button
                    type="button"
                    class="
                novi_btn btn-secondary
                btn btn-sm
                preset-filled-tertiary-200-800
                transition
                "
                    onclick={() =>
                        ($idaa_slct.event_obj.more__location_fields = true)}
                >
                    <span class="fas fa-plus"></span>
                    Show Extra Location Fields
                </button>
            {:else if !$idaa_slct.event_obj?.physical && $idaa_slct.event_obj?.more__location_fields}
                <button
                    type="button"
                    class="
                novi_btn btn-secondary
                btn btn-sm
                preset-filled-tertiary-200-800
                transition
                "
                    onclick={() =>
                        ($idaa_slct.event_obj.more__location_fields = false)}
                >
                    <span class="fas fa-minus"></span>
                    Hide Extra Location Fields
                </button>
            {/if}

            <fieldset
                id="physical_address"
                class="
                physical_address
                fieldset space-y-1
                flex flex-row flex-wrap gap-1
                "
                class:hidden={!$idaa_slct.event_obj?.physical &&
                    !$idaa_slct.event_obj?.more__location_fields}
            >
                <legend class="legend text-lg text-neutral-500 font-semibold"
                    >Address</legend
                >

                <input
                    id=""
                    name="address_location_id"
                    type="hidden"
                    value={$lq__event_obj?.address_location_id}
                />

                <label for="address_name form-group">
                    <span class="text-sm font-semibold"> Location name </span>
                    <input
                        type="text"
                        class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                        id="address_name"
                        name="address_name"
                        placeholder="The name of the place or location"
                        value={$lq__event_obj?.location_address_json &&
                        $lq__event_obj?.location_address_json?.name
                            ? $lq__event_obj?.location_address_json?.name
                            : ($lq__event_obj?.address_name ?? '')}
                        autocomplete="off"
                    />
                </label>

                <label for="address_line_1 form-group">
                    <span class="text-sm font-semibold"> Line 1 </span>
                    <input
                        type="text"
                        class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                        id="address_line_1"
                        name="address_line_1"
                        placeholder="Address line 1"
                        value={$lq__event_obj?.location_address_json &&
                        $lq__event_obj?.location_address_json.line_1
                            ? $lq__event_obj?.location_address_json.line_1
                            : ($lq__event_obj?.address_line_1 ?? '')}
                        autocomplete="address-line1"
                    />
                </label>

                <label for="address_line_2 form-group">
                    <span class="text-sm font-semibold"> Line 2 </span>
                    <input
                        type="text"
                        class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                        id="address_line_2"
                        name="address_line_2"
                        placeholder="Address line 2"
                        value={$lq__event_obj?.location_address_json &&
                        $lq__event_obj?.location_address_json.line_2
                            ? $lq__event_obj?.location_address_json.line_2
                            : ($lq__event_obj?.address_line_2 ?? '')}
                        autocomplete="address-line2"
                    />
                </label>

                <label for="address_line_3 form-group">
                    <span class="text-sm font-semibold"> Line 3 </span>
                    <input
                        type="text"
                        class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                        id="address_line_3"
                        name="address_line_3"
                        placeholder="Address line 3"
                        value={$lq__event_obj?.location_address_json &&
                        $lq__event_obj?.location_address_json.line_3
                            ? $lq__event_obj?.location_address_json.line_3
                            : ($lq__event_obj?.address_line_3 ?? '')}
                        autocomplete="address-line3"
                    />
                </label>
            </fieldset>

            <fieldset
                id="physical_city_state_province_postal_code_country"
                class="
                physical_city_state_province_postal_code_country
                fieldset space-y-1
                flex flex-row flex-wrap gap-1
                "
                class:hidden={!$idaa_slct.event_obj?.physical &&
                    !$idaa_slct.event_obj?.more__location_fields}
            >
                <label for="address_city form-group w-56">
                    <span class="text-sm font-semibold"> City </span>
                    <input
                        type="text"
                        class="
                        form-control col-sm-4
                        input w-40
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                        id="address_city"
                        name="address_city"
                        placeholder="Name of the city"
                        value={$lq__event_obj?.location_address_json &&
                        $lq__event_obj?.location_address_json.city
                            ? $lq__event_obj?.location_address_json.city
                            : ($lq__event_obj?.address_city ?? '')}
                        autocomplete="address-level2"
                    />
                </label>

                {#if lu_country_subdivision_list}
                    <label
                        for="address_country_subdivision_code"
                        class="form-group w-56"
                    >
                        <span class="text-sm font-semibold">
                            State or province
                        </span>
                        <select
                            id="address_country_subdivision_code"
                            name="address_country_subdivision_code"
                            value={$lq__event_obj?.location_address_json &&
                            $lq__event_obj?.location_address_json
                                .country_subdivision_code
                                ? $lq__event_obj?.location_address_json
                                      .country_subdivision_code
                                : ($lq__event_obj?.address_country_subdivision_code ??
                                  '')}
                            class="
                        form-control col-sm-4
                        select w-56 p-1
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                            title="Select the state or province for the meeting"
                        >
                            <option value="">-- None --</option>
                            {#each lu_country_subdivision_list as lu_country_subdivision}
                                <option value={lu_country_subdivision.code}
                                    >{lu_country_subdivision.country_alpha_2_code}
                                    - {lu_country_subdivision.name}</option
                                >
                            {/each}
                        </select>
                    </label>
                {:else}
                    <label
                        for="address_country_subdivision_code"
                        class="form-group col-sm-2"
                    >
                        <span class="text-sm font-semibold">
                            State or province code
                        </span>
                        <input
                            type="text"
                            class="
                        form-control col-sm-4
                        input w-40
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                            id="address_country_subdivision_code"
                            name="address_country_subdivision_code"
                            placeholder="State or province code"
                            value={$lq__event_obj?.location_address_json &&
                            $lq__event_obj?.location_address_json
                                .country_subdivision_code
                                ? $lq__event_obj?.location_address_json
                                      .country_subdivision_code
                                : $lq__event_obj?.address_country_subdivision_code}
                            autocomplete="address-level1"
                        />
                    </label>
                {/if}
                <label for="address_postal_code" class="form-group col-sm-2">
                    <span class="text-sm font-semibold">
                        Postal or zip code
                    </span>
                    <input
                        type="text"
                        class="
                        form-control col-sm-4
                        input w-40
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                        id="address_postal_code"
                        name="address_postal_code"
                        placeholder="Postal code or zip code"
                        value={$lq__event_obj?.location_address_json &&
                        $lq__event_obj?.location_address_json.postal_code
                            ? $lq__event_obj?.location_address_json.postal_code
                            : ($lq__event_obj?.address_postal_code ?? '')}
                        autocomplete="postal-code"
                    />
                </label>

                {#if lu_country_list}
                    <label
                        for="address_country_alpha_2_code"
                        class="form-group col-sm-3"
                    >
                        <span class="text-sm font-semibold"> Country </span>
                        <select
                            id="address_country_alpha_2_code"
                            name="address_country_alpha_2_code"
                            value={$lq__event_obj?.location_address_json &&
                            $lq__event_obj?.location_address_json
                                .country_alpha_2_code
                                ? $lq__event_obj?.location_address_json
                                      .country_alpha_2_code
                                : ($lq__event_obj?.address_country_alpha_2_code ??
                                  '')}
                            class="
                        form-control
                        select w-64 p-1
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                            title="Select the country for the meeting"
                        >
                            <option value="">-- None --</option>
                            {#each lu_country_list as lu_country}
                                <option value={lu_country.alpha_2_code}
                                    >{lu_country.english_short_name}</option
                                >
                            {/each}
                        </select>
                    </label>
                {:else}
                    <label for="address_country_alpha_2_code">
                        <span class="text-sm font-semibold">
                            Country alpha 2 code
                        </span>
                        <input
                            type="text"
                            class="input preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                            id="address_country_alpha_2_code"
                            name="address_country_alpha_2_code"
                            placeholder="Country alpha 2 code"
                            value={$lq__event_obj?.location_address_json &&
                            $lq__event_obj?.location_address_json
                                .country_alpha_2_code
                                ? $lq__event_obj?.location_address_json
                                      .country_alpha_2_code
                                : $lq__event_obj?.address_country_alpha_2_code}
                            autocomplete="country"
                        />
                    </label>
                {/if}
            </fieldset>

            <label
                for="location_text"
                class="w-full"
                class:hidden={!$idaa_slct.event_obj?.physical &&
                    !$idaa_slct.event_obj?.more__location_fields}
            >
                <span class="text-lg text-neutral-500 font-semibold">
                    Additional information about the meeting location
                </span>
                <!-- <textarea class="ae_value event__location_text tinymce_editor editor_less_100 textarea" id="location_text" name="location_text" placeholder="Additional information about the meeting location" rows="2" cols="70" bind:value={$idaa_slct.event_obj.location_text}></textarea> -->
                <AE_Comp_Editor_TipTap
                    bind:content={location_text_new_html}
                    class_li="preset-tonal-surface hover:preset-filled-surface-100-900"
                    placeholder="Additional information about the meeting location"
                />

                <!-- If changed then show Save button -->
                <!-- {#if
                $idaa_slct.event_obj?.location_text_new_html &&
                $idaa_slct.event_obj?.location_text_new_html != '<p></p>' &&
                $idaa_slct.event_obj.location_text != $idaa_slct.event_obj.location_text_new_html}
                <button type="button"
                    class="btn btn-md btn-primary variant-ghost-secondary"
                    on:click={() => $idaa_slct.event_obj.location_text = $idaa_slct.event_obj.location_text_new_html}
                    >
                    <span class="fas fa-save m-1"></span>
                    Save?
                </button>
            {/if} -->
            </label>

            {#if !$idaa_slct.event_obj?.virtual && !$idaa_slct.event_obj?.more__virtual_fields}
                <button
                    type="button"
                    class="
                novi_btn btn-secondary
                btn btn-sm
                transition
                "
                    class:preset-filled-success-200-800={$idaa_loc.bb
                        .more__virtual_fields}
                    class:preset-filled-tertiary-200-800={!$idaa_loc.bb
                        .more__virtual_fields}
                    onclick={() =>
                        ($idaa_slct.event_obj.more__virtual_fields = true)}
                >
                    <span class="fas fa-plus"></span>
                    Show Extra Virtual Fields
                </button>
            {:else if !$idaa_slct.event_obj?.virtual && $idaa_slct.event_obj?.more__virtual_fields}
                <button
                    type="button"
                    class="btn btn-secondary preset-tonal-surface hover:preset-filled-surface-100-900"
                    onclick={() =>
                        ($idaa_slct.event_obj.more__virtual_fields = false)}
                >
                    <span class="fas fa-minus"></span>
                    Hide Extra Virtual Fields
                </button>
            {/if}

            <fieldset
                id="virtual"
                class="
                virtual
                fieldset space-y-1
                flex flex-row flex-wrap gap-1
                "
                class:hidden={!$idaa_slct.event_obj.virtual &&
                    !$idaa_slct.event_obj?.more__virtual_fields}
            >
                <legend class="legend text-lg font-semibold">
                    Virtual/Online
                    {#if $idaa_sess.recovery_meetings.attend_platform == 'Zoom'}
                        <span class="text-sm italic text-gray-600">
                            (Zoom Meeting)</span
                        >
                    {:else if $idaa_sess.recovery_meetings.attend_platform == 'Google Meet'}
                        <span class="text-sm italic text-gray-600">
                            (Google Meet)</span
                        >
                    {:else if $idaa_sess.recovery_meetings.attend_platform == 'Microsoft Teams'}
                        <span class="text-sm italic text-gray-600">
                            (Microsoft Teams)</span
                        >
                    {:else if $idaa_sess.recovery_meetings.attend_platform == 'other'}
                        <span class="text-sm italic text-gray-600">
                            (Other Platform/ Service)</span
                        >
                    {/if}
                </legend>

                <!-- Toggle if this is a Zoom meeting, Google Meet, Microsoft Teams, or "other" as a catch all type of virtual meeting. For now just toggle between "Zoom" and "other" -->
                <div
                    class="w-full flex flex-col flex-wrap gap-1 items-center justify-center"
                >
                    <p class="text-sm italic text-gray-600">
                        Click button to toggle if this is a Zoom meeting or
                        other platform/service.
                        <!-- {$idaa_slct.event_obj?.attend_json?.zoom} -->
                        {$idaa_sess.recovery_meetings.attend_platform}
                    </p>
                    {#if $idaa_sess.recovery_meetings?.attend_platform === 'Zoom'}
                        <button
                            type="button"
                            class="
                        novi_btn
                        btn btn-lg
                        preset-filled-tertiary-200-800
                        transition-all
                        "
                            onclick={() => {
                                $idaa_sess.recovery_meetings.attend_platform =
                                    'other';
                            }}
                        >
                            <span class="fas fa-minus"></span>
                            Not Zoom - Other Platform/Service
                        </button>
                    {:else if $idaa_sess.recovery_meetings?.attend_platform === 'Jitsi'}
                        <button
                            type="button"
                            class="
                        novi_btn
                        btn btn-lg
                        preset-filled-tertiary-200-800
                        transition-all
                        "
                            onclick={() => {
                                $idaa_sess.recovery_meetings.attend_platform =
                                    'other';
                            }}
                        >
                            <span class="fas fa-minus"></span>
                            Not Jitsi - Other Platform/Service
                        </button>
                    {:else if !$idaa_sess.recovery_meetings?.attend_platform || $idaa_sess.recovery_meetings?.attend_platform === 'other'}
                        <button
                            type="button"
                            class="
                        novi_btn
                        btn btn-lg
                        preset-filled-tertiary-200-800
                        transition-all
                        "
                            onclick={() => {
                                if (
                                    !$idaa_slct.event_obj.attend_json ||
                                    JSON.stringify(
                                        $idaa_slct.event_obj.attend_json
                                    ) === '{}'
                                ) {
                                    $idaa_slct.event_obj.attend_json = {
                                        zoom: {
                                            domain: 'zoom.us',
                                            meeting_id: '',
                                            passcode: '',
                                            passcode_enc: '',
                                            full_url: ''
                                        }
                                    };
                                } else if (
                                    $idaa_slct.event_obj.attend_json &&
                                    !$idaa_slct.event_obj.attend_json.zoom
                                ) {
                                    $idaa_slct.event_obj.attend_json.zoom = {
                                        domain: 'zoom.us',
                                        meeting_id: '',
                                        passcode: '',
                                        passcode_enc: '',
                                        full_url: ''
                                    };
                                }

                                $idaa_sess.recovery_meetings.attend_platform =
                                    'Zoom';
                                $idaa_trig = 'update_zoom_full_url';
                            }}
                        >
                            <!-- <span class="fas fa-plus"></span> -->
                            <span class="fas fa-video m-1"></span>
                            Zoom Meeting
                        </button>

                        <button
                            type="button"
                            class="
                        novi_btn
                        btn btn-lg
                        preset-filled-tertiary-200-800
                        transition-all
                        "
                            onclick={() => {
                                if (
                                    !$idaa_slct.event_obj.attend_json ||
                                    JSON.stringify(
                                        $idaa_slct.event_obj.attend_json
                                    ) === '{}'
                                ) {
                                    $idaa_slct.event_obj.attend_json = {
                                        jitsi: {
                                            full_url:
                                                $lq__event_obj?.attend_url ??
                                                '',
                                            name:
                                                $lq__event_obj?.attend_url_code ??
                                                '',
                                            passcode:
                                                $lq__event_obj?.attend_url_passcode ??
                                                ''
                                        }
                                    };
                                } else if (
                                    $idaa_slct.event_obj.attend_json &&
                                    !$idaa_slct.event_obj.attend_json.jitsi
                                ) {
                                    $idaa_slct.event_obj.attend_json.jitsi = {
                                        full_url:
                                            $lq__event_obj?.attend_url ?? '',
                                        name:
                                            $lq__event_obj?.attend_url_code ??
                                            '',
                                        passcode:
                                            $lq__event_obj?.attend_url_passcode ??
                                            ''
                                    };
                                }
                                $idaa_sess.recovery_meetings.attend_platform =
                                    'Jitsi';
                                // $idaa_trig = 'update_zoom_full_url';
                            }}
                        >
                            <!-- <span class="fas fa-plus"></span> -->
                            <span class="fas fa-video m-1"></span>
                            IDAA Jitsi Meeting
                        </button>
                    {/if}
                    <!-- <label for="attend_platform" class="form-group w-100 col-12">
                <span class="text-lg font-semibold">
                    Platform/Service
                </span>
                <select
                    class="
                        form-control col-6
                        select w-48 p-1
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                    id="attend_platform"
                    name="attend_platform"
                    value={$idaa_slct.event_obj?.tmp__attend_platform ?? 'other'}
                    >
                    <option value="Zoom">Zoom</option>
                    <option value="Google Meet">Google Meet</option>
                    <option value="Microsoft Teams">Microsoft Teams</option>
                    <option value="other">Other / Not specified</option>
                </select>
            </label> -->
                </div>
                {#if $idaa_sess.recovery_meetings?.attend_platform === 'Zoom'}
                    <div
                        class="flex flex-row flex-wrap gap-2 items-center justify-start"
                    >
                        <label for="attend_url_code">
                            Zoom Meeting ID
                            <input
                                type="number"
                                id="attend_url_code"
                                name="attend_url_code"
                                max="99999999999"
                                autocomplete="off"
                                required
                                bind:value={
                                    $idaa_slct.event_obj.attend_url_code
                                }
                                onchange={() => {
                                    console.log(
                                        'Changed Zoom Meeting ID to:',
                                        $idaa_slct.event_obj.attend_url_code
                                    );
                                    if (
                                        $idaa_slct.event_obj.attend_url_code &&
                                        $idaa_slct.event_obj.attend_url_code
                                            .length > 8
                                    ) {
                                        // $idaa_slct.event_obj.attend_url_code = String($idaa_slct.event_obj.attend_url_code).replace(/\D/g, '').trim();

                                        $idaa_trig = 'update_zoom_full_url';
                                    } else {
                                        // $idaa_slct.event_obj.attend_url_code = '';
                                    }
                                }}
                                class="
                            form-control
                            input w-72 preset-tonal-surface hover:preset-filled-surface-100-900
                            invalid:[&:not(:placeholder-shown):not(:focus)]:border-red-500
                            required:preset-filled-warning
                            invalid:preset-filled-error
                            "
                                placeholder="Zoom Meeting ID"
                            />
                        </label>
                        <label for="attend_url_passcode">
                            Zoom Passcode
                            <input
                                type="text"
                                id="attend_url_passcode"
                                name="attend_url_passcode"
                                autocomplete="off"
                                bind:value={
                                    $idaa_slct.event_obj.attend_url_passcode
                                }
                                onchange={() => {
                                    console.log(
                                        'Changed Zoom Passcode to:',
                                        $idaa_slct.event_obj.attend_url_passcode
                                    );
                                    if (
                                        $idaa_slct.event_obj
                                            .attend_url_passcode &&
                                        $idaa_slct.event_obj.attend_url_passcode
                                            .length > 3
                                    ) {
                                        // $idaa_slct.event_obj.attend_url_passcode = String($idaa_slct.event_obj.attend_url_passcode).trim();

                                        $idaa_trig = 'update_zoom_full_url';
                                    } else {
                                        $idaa_slct.event_obj.attend_url_passcode =
                                            '';
                                    }
                                }}
                                class="
                            form-control
                            input w-72 preset-tonal-surface hover:preset-filled-surface-100-900
                            "
                                placeholder="Zoom Passcode"
                            />
                        </label>
                        <label for="attend_url_passcode_enc">
                            Zoom Encrypted Passcode
                            <input
                                type="text"
                                id="attend_url_passcode_enc"
                                name="attend_url_passcode_enc"
                                autocomplete="off"
                                bind:value={
                                    $idaa_slct.event_obj.attend_json.zoom
                                        .passcode_enc
                                }
                                onchange={() => {
                                    console.log(
                                        'Changed Zoom Encrypted Passcode to:',
                                        $idaa_slct.event_obj.attend_json.zoom
                                            .passcode_enc
                                    );
                                    if (
                                        $idaa_slct.event_obj.attend_json.zoom
                                            .passcode_enc &&
                                        $idaa_slct.event_obj.attend_json.zoom
                                            .passcode_enc.length >= 8
                                    ) {
                                        // $idaa_slct.event_obj.attend_json.zoom.passcode_enc = String($idaa_slct.event_obj.attend_json.zoom.passcode_enc).replace(/[^a-zA-Z0-9]/g, '').trim();

                                        $idaa_trig = 'update_zoom_full_url';
                                    } else {
                                        // $idaa_slct.event_obj.attend_json.zoom.passcode_enc = '';
                                    }
                                }}
                                class="
                            form-control
                            input w-72 preset-tonal-surface hover:preset-filled-surface-100-900
                            "
                                placeholder="Zoom Encrypted Passcode"
                            />
                        </label>
                        <label for="attend_domain">
                            Zoom domain / Vanity URL
                            <input
                                type="text"
                                id="attend_domain"
                                name="attend_domain"
                                autocomplete="url"
                                bind:value={
                                    $idaa_slct.event_obj.attend_json.zoom.domain
                                }
                                onchange={() => {
                                    console.log(
                                        'Changed Zoom domain to:',
                                        $idaa_slct.event_obj.attend_json.zoom
                                            .domain
                                    );
                                    if (
                                        $idaa_slct.event_obj.attend_json.zoom
                                            .domain
                                    ) {
                                        // Remove any protocol (http:// or https://) and any trailing slashes
                                        // $idaa_slct.event_obj.attend_json.zoom.domain = String($idaa_slct.event_obj.attend_json.zoom.domain).replace(/(^\w+:|^)\/\//, '').replace(/\/+$/, '').toLowerCase();
                                        // $idaa_slct.event_obj.attend_json.zoom.domain = String($idaa_slct.event_obj.attend_json.zoom.domain).toLowerCase();

                                        $idaa_trig = 'update_zoom_full_url';
                                    } else {
                                        $idaa_slct.event_obj.attend_json.zoom.domain =
                                            'zoom.us';
                                    }
                                }}
                                class="
                            form-control
                            input w-72 preset-tonal-surface hover:preset-filled-surface-100-900
                            "
                                placeholder="Zoom domain"
                            />
                            <!-- Example: example.zoom.us -->
                        </label>
                    </div>
                    <label for="zoom_attend_url">
                        Zoom Meeting URL
                        <input
                            type="url"
                            id="zoom_attend_url"
                            name="zoom_attend_url"
                            autocomplete="url"
                            readonly
                            bind:value={
                                $idaa_slct.event_obj.attend_json.zoom.full_url
                            }
                            class="
                            input w-100 preset-tonal-surface hover:preset-filled-surface-100-900 form-control
                            "
                            placeholder="Zoom Meeting URL"
                        />
                        <!-- Example: https://zoom.us/j/1234567890?pwd=abcdefg -->
                    </label>
                    <!-- https://{$idaa_slct.event_obj?.attend_json?.zoom?.domain?? 'zoom.us'}/j/{$idaa_slct.event_obj?.attend_url_code ?? 'INVALID' }?pwd={$idaa_slct.event_obj?.attend_url_passcode ?? 'REQUIRED'} -->

                    <!-- {$idaa_slct.event_obj.attend_json.zoom.full_url} -->
                {:else if $idaa_sess.recovery_meetings?.attend_platform === 'Jitsi'}
                    <div
                        class="flex flex-row flex-wrap gap-2 items-center justify-start"
                    >
                        <label for="attend_url">
                            Jitsi Meeting Name (code)
                            <input
                                type="text"
                                id="attend_url_code"
                                name="attend_url_code"
                                autocomplete="off"
                                bind:value={
                                    $idaa_slct.event_obj.attend_json.jitsi.name
                                }
                                class="
                            form-control
                            input w-72 preset-tonal-surface hover:preset-filled-surface-100-900
                            "
                                placeholder="Jitsi Meeting Name"
                            />
                        </label>
                        <label for="attend_url_passcode">
                            Jitsi Passcode
                            <input
                                type="text"
                                id="attend_url_passcode"
                                name="attend_url_passcode"
                                autocomplete="off"
                                bind:value={
                                    $idaa_slct.event_obj.attend_json.jitsi
                                        .passcode
                                }
                                class="
                            form-control
                            input w-72 preset-tonal-surface hover:preset-filled-surface-100-900
                            "
                                placeholder="Jitsi Passcode"
                            />
                        </label>
                    </div>
                    <label for="jitsi_attend_url">
                        Jitsi Meeting URL
                        <input
                            type="url"
                            id="attend_url"
                            name="attend_url"
                            autocomplete="url"
                            readonly={(1 as any) == 3}
                            bind:value={
                                $idaa_slct.event_obj.attend_json.jitsi.full_url
                            }
                            class="
                            input w-100 preset-tonal-surface hover:preset-filled-surface-100-900 form-control
                            "
                            placeholder="Jitsi Meeting URL"
                        />
                        <!-- Example: https://meet.jit.si/YourMeetingName -->
                    </label>
                {:else if !$idaa_sess.recovery_meetings?.attend_platform || $idaa_sess.recovery_meetings?.attend_platform === 'other'}
                    <label for="attend_url"
                        >URL to access the virtual meeting
                        <input
                            type="url"
                            class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                            id="attend_url"
                            name="attend_url"
                            placeholder="URL to access the virtual meeting"
                            value={$lq__event_obj?.attend_url ?? ''}
                            autocomplete="url"
                        />
                    </label>
                    <label for="attend_url_passcode"
                        >Passcode to join at URL
                        <input
                            type="text"
                            class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                            id="attend_url_passcode"
                            name="attend_url_passcode"
                            placeholder="Passcode to join at URL"
                            value={$lq__event_obj?.attend_url_passcode ?? ''}
                            autocomplete="off"
                        />
                    </label>

                    <label for="attend_phone"
                        >Phone number for meeting conference call
                        <input
                            type="tel"
                            class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                            id="attend_phone"
                            name="attend_phone"
                            placeholder="Phone number for meeting conference call"
                            value={$lq__event_obj?.attend_phone ?? ''}
                            autocomplete="tel"
                        />
                    </label>
                    <label for="attend_phone_passcode"
                        >Passcode to join conference call
                        <input
                            type="text"
                            class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                            id="attend_phone_passcode"
                            name="attend_phone_passcode"
                            placeholder="Passcode to join conference call"
                            value={$lq__event_obj?.attend_phone_passcode ?? ''}
                            autocomplete="off"
                        />
                    </label>
                {/if}
            </fieldset>

            <label for="attend_text" class="w-full">
                <span class="text-lg text-neutral-500 font-semibold">
                    Additional information on how to attend
                </span>
                <!-- <textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text ?? ''}></textarea> -->
                <AE_Comp_Editor_TipTap
                    bind:content={attend_text_new_html}
                    class_li="preset-tonal-surface hover:preset-filled-surface-100-900"
                    placeholder="Additional information on how to attend or join the meeting"
                />

                <!-- If changed then show Save button -->
                <!-- {#if
                $idaa_slct.event_obj?.attend_text_new_html &&
                $idaa_slct.event_obj?.attend_text_new_html != '<p></p>' &&
                $idaa_slct.event_obj.attend_text != $idaa_slct.event_obj.attend_text_new_html}
                <button type="button"
                    class="btn btn-md btn-primary variant-ghost-secondary"
                    on:click={() => $idaa_slct.event_obj.attend_text = $idaa_slct.event_obj.attend_text_new_html}
                    >
                    <span class="fas fa-save m-1"></span>
                    Save?
                </button>
            {/if} -->
            </label>
        </div>
        <!-- END: section event__how_to_attend -->

        <div
            class="ae_section event__timing p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"
        >
            <!-- BEGIN: section event__timing -->

            <h3 class="h3">Recurring and When</h3>

            <!-- <fieldset class="event__recurring">
            <legend class="legend">Recurring</legend>
            <div class="ae_group">
            <label for="recurring_no" class="">No, only once
                <input
                    type="radio"
                    class="radio"
                    id="recurring_no"
                    name="recurring"
                    value={false}
                    bind:group={$idaa_slct.event_obj.recurring}
                    required
                    >
            </label>
            <label for="recurring_yes" class="">Yes, repeats
                <input
                    type="radio"
                    class="radio"
                    id="recurring_yes"
                    name="recurring"
                    value={true}
                    bind:group={$idaa_slct.event_obj.recurring}
                    required
                    >
            </label>
            </div>
        </fieldset> -->

            <!-- class:hidden={!$idaa_slct.event_obj.recurring} -->
            <fieldset id="recurring_details" class="recurring_details">
                <!-- <legend class="legend">Recurring</legend> -->
                <label for="recurring_pattern" class="form-group w-100 col-12">
                    <span class="text-lg text-neutral-500 font-semibold">
                        Recurring Repeats
                    </span>
                    <select
                        class="
                        form-control col-6
                        select w-48 p-1
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        "
                        name="recurring_pattern"
                        id="recurring_pattern"
                        value={$lq__event_obj?.recurring_pattern}
                    >
                        <option value={'weekly'}>Weekly</option>
                        <option value={'every other week'}
                            >Every Other Week</option
                        >
                        <option value={'monthly'}>Monthly</option>
                        <option value={'other'}>Other</option>
                    </select>
                </label>
            </fieldset>

            <fieldset
                class="flex flex-col sm:flex-row flex-wrap gap-1 items-start justify-start"
            >
                <label
                    class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900"
                >
                    <input
                        type="checkbox"
                        name="weekday_sunday"
                        value="Sunday"
                        bind:checked={$idaa_slct.event_obj.weekday_sunday}
                        class="checkbox form-check-input d-inline-block"
                    />
                    <span class="text-sm font-semibold"> Sunday </span>
                </label>
                <label
                    class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900"
                >
                    <input
                        type="checkbox"
                        name="weekday_monday"
                        value="Monday"
                        bind:checked={$idaa_slct.event_obj.weekday_monday}
                        class="checkbox form-check-input d-inline-block"
                    />
                    <span class="text-sm font-semibold"> Monday </span>
                </label>
                <label
                    class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900"
                >
                    <input
                        type="checkbox"
                        name="weekday_tuesday"
                        value="Tuesday"
                        bind:checked={$idaa_slct.event_obj.weekday_tuesday}
                        class="checkbox form-check-input d-inline-block"
                    />
                    <span class="text-sm font-semibold"> Tuesday </span>
                </label>
                <label
                    class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900"
                >
                    <input
                        type="checkbox"
                        name="weekday_wednesday"
                        value="Wednesday"
                        bind:checked={$idaa_slct.event_obj.weekday_wednesday}
                        class="checkbox form-check-input d-inline-block"
                    />
                    <span class="text-sm font-semibold"> Wednesday </span>
                </label>
                <label
                    class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900"
                >
                    <input
                        type="checkbox"
                        name="weekday_thursday"
                        value="Thursday"
                        bind:checked={$idaa_slct.event_obj.weekday_thursday}
                        class="checkbox form-check-input d-inline-block"
                    />
                    <span class="text-sm font-semibold"> Thursday </span>
                </label>
                <label
                    class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900"
                >
                    <input
                        type="checkbox"
                        name="weekday_friday"
                        value="Friday"
                        bind:checked={$idaa_slct.event_obj.weekday_friday}
                        class="checkbox form-check-input d-inline-block"
                    />
                    <span class="text-sm font-semibold"> Friday </span>
                </label>
                <label
                    class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900"
                >
                    <input
                        type="checkbox"
                        name="weekday_saturday"
                        value="Saturday"
                        bind:checked={$idaa_slct.event_obj.weekday_saturday}
                        class="checkbox form-check-input d-inline-block"
                    />
                    <span class="text-sm font-semibold"> Saturday </span>
                </label>
            </fieldset>

            <fieldset
                class="flex flex-row flex-wrap gap-1 items-center justify-start flex_row flex_gap_md flex_justify_around space-y-1"
            >
                <label class="form-group w-56">
                    <span class="text-lg text-neutral-500 font-semibold">
                        Timezone
                    </span>
                    {#if $ae_loc?.lu_time_zone_list && $ae_loc?.lu_time_zone_list.length > 0}
                        <select
                            name="timezone"
                            required
                            value={$lq__event_obj?.timezone ??
                                $ae_loc?.current_timezone}
                            class="
                            select w-56 max-w-fit px-1
                            preset-tonal-surface hover:preset-filled-surface-100-900
                            form-control col-6
                            "
                            class:required={!$lq__event_obj?.timezone &&
                                !$ae_loc?.current_timezone}
                        >
                            <option
                                value=""
                                class:hidden={!$ae_loc.trusted_access}
                                >-- None --</option
                            >
                            {#each $ae_loc?.lu_time_zone_list as lu_timezone}
                                <option value={lu_timezone.name}
                                    >{lu_timezone.name}</option
                                >
                            {/each}
                        </select>
                    {:else}
                        <input
                            type="text"
                            name="timezone"
                            value={$lq__event_obj?.timezone
                                ? $lq__event_obj?.timezone
                                : $ae_loc?.current_timezone}
                            class="input w-40"
                        />
                    {/if}
                    <!-- client TZ: {$ae_loc?.current_timezone} -->
                </label>
                <label class="form-group">
                    <span class="text-lg text-neutral-500 font-semibold">
                        Start Time
                    </span>
                    <input
                        name="recurring_start_time"
                        type="time"
                        value={$lq__event_obj?.recurring_start_time}
                        max="8"
                        class="
                    input w-40
                    preset-tonal-surface hover:preset-filled-surface-100-900
                    form-control
                    "
                    />
                </label>
                <label class="form-group">
                    <span class="text-lg text-neutral-500 font-semibold">
                        End Time
                    </span>
                    <input
                        name="recurring_end_time"
                        type="time"
                        value={$lq__event_obj?.recurring_end_time}
                        max="8"
                        class="
                        input w-40
                        preset-tonal-surface hover:preset-filled-surface-100-900
                        form-control
                        "
                    />
                </label>
            </fieldset>

            {#if $ae_loc.administrator_access || ($lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))))}
                <p>
                    Please only use the text box for additional information if
                    the options above do not cover your needs. This may affect
                    how this meeting shows up in search results.
                </p>
                <label for="recurring_text" class="w-full">
                    <span class="text-lg text-neutral-500 font-semibold">
                        Additional information on when and how often
                    </span>
                    <!-- <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> -->
                    <AE_Comp_Editor_TipTap
                        bind:content={recurring_text_new_html}
                        class_li="preset-tonal-surface hover:preset-filled-surface-100-900"
                        placeholder="Additional information on when and how often"
                    />

                    <!-- If changed then show Save button -->
                    <!-- {#if
                    $idaa_slct.event_obj?.recurring_text_new_html &&
                    $idaa_slct.event_obj?.recurring_text_new_html != '<p></p>' &&
                    $idaa_slct.event_obj.recurring_text != $idaa_slct.event_obj.recurring_text_new_html}
                    <button type="button"
                        class="btn btn-md btn-primary variant-ghost-secondary"
                        on:click={() => $idaa_slct.event_obj.recurring_text = $idaa_slct.event_obj.recurring_text_new_html}
                        >
                        <span class="fas fa-save m-1"></span>
                        Save?
                    </button>
                {/if} -->
                </label>
            {/if}
            {#if $ae_loc.administrator_access || ($lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))))}
                <button
                    type="button"
                    class="
                    novi_btn
                    btn btn-sm
                    preset-filled-tertiary-200-800
                    transition
                    "
                    onclick={() => {
                        if (
                            confirm(
                                'Are you sure you want to remove the text for the additional details?'
                            )
                        ) {
                            $idaa_slct.event_obj.recurring_text = '';
                            $idaa_slct.event_obj.recurring_text_new_html = '';
                            // $idaa_slct.event_obj.show_recurring_text = false;
                            console.log($idaa_slct.event_obj.recurring_text);
                        } else {
                            return false;
                        }
                    }}
                >
                    <span class="fas fa-minus m-1"></span> Remove Details?
                </button>
            {:else}
                <button
                    type="button"
                    class="
                    novi_btn
                    btn btn-sm
                    preset-filled-success-200-800
                    transition
                    "
                    onclick={prevent_default(() => {
                        // Remove *gen* prefix from recurring_text
                        if (
                            $lq__event_obj.recurring_text &&
                            $lq__event_obj.recurring_text.includes('*gen*')
                        ) {
                            $idaa_slct.event_obj.recurring_text =
                                $lq__event_obj.recurring_text.replace(
                                    '*gen* ',
                                    ''
                                );
                        }
                        $idaa_slct.event_obj.show_recurring_text = true;
                    })}
                >
                    <span class="fas fa-plus m-1"></span> Add More Details?
                </button>
            {/if}

            <!-- {#if ($lq__event_obj && $lq__event_obj.recurring_text && !$lq__event_obj.recurring_text.includes('*gen*') || $ae_loc.administrator_access)}
        <label for="recurring_text">Additional information on when and how often
            <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj.recurring_text}></textarea>
        </label>
        {/if} -->
        </div>
        <!-- END: section event__timing -->

        <div
            class="ae_section event__contacts p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"
        >
            <h3 class="h3">Contacts</h3>

            <!-- {#if $ae_loc.trusted_access} -->
            <div>
                <label
                    for="external_person_id"
                    class="block form-group d-block w-100"
                >
                    <span class="text-sm font-semibold text-surface-600-400">
                        <span class="fas fa-link"></span> Linked with Novi ID
                    </span>
                    {#if !$ae_loc.trusted_access}
                        <span class="fas fa-lock" title="Field is locked"
                        ></span>
                        <input
                            type="text"
                            id="external_person_id"
                            name="external_person_id"
                            value={$lq__event_obj?.external_person_id
                                ? $lq__event_obj?.external_person_id
                                : $idaa_loc.novi_uuid}
                            readonly={true}
                            class="
                        input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control
                        "
                        />
                    {:else}
                        <div class="ae_highlight">
                            Primary link using the Novi API UUID. This must be
                            empty, a staff person, or an active member of IDAA
                            and should be the primary contact for this meeting.
                        </div>
                        <span class="fas fa-unlock" title="Field is unlocked"
                        ></span>
                        <input
                            type="text"
                            id="external_person_id"
                            name="external_person_id"
                            value={$lq__event_obj?.external_person_id
                                ? $lq__event_obj?.external_person_id
                                : ''}
                            readonly={false}
                            class="
                        input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control
                        "
                        />
                    {/if}
                </label>
            </div>
            <!-- {/if} -->

            <div
                class="flex flex-col md:flex-row flex-wrap gap-1 justify-between items-start basis-1/2"
            >
                <fieldset class="event__contact_1 flex flex-col gap-1">
                    <legend class="legend">Contact 1</legend>
                    <div class="ae_highlight">
                        Contact 1 is the primary contact for this meeting.
                    </div>

                    <span class="ae_group">
                        {#if !($ae_loc.administrator_access || ($idaa_slct.event_obj?.contact_li_json?.length && $idaa_slct.event_obj?.contact_li_json[0]?.unlock))}
                            <button
                                type="button"
                                onclick={prevent_default(() => {
                                    if (
                                        confirm(
                                            'Are you sure you want to lock these fields? The primary contact name and email address are required.'
                                        )
                                    ) {
                                        if (
                                            !$idaa_slct.event_obj
                                                ?.contact_li_json[0]
                                        ) {
                                            $idaa_slct.event_obj.contact_li_json[0] =
                                                {};
                                        }
                                        $idaa_slct.event_obj.contact_li_json[0].unlock = true;
                                    } else {
                                        $idaa_slct.event_obj.contact_li_json[0].unlock = false;
                                        return false;
                                    }
                                })}
                                class="
                        novi_btn novi_smaller ae_btn_info
                        btn btn-sm
                        preset-filled-tertiary-200-800
                        "
                            >
                                <span
                                    class="fas fa-lock"
                                    title="Field is locked"
                                ></span> Name and email locked
                            </button>
                        {:else}
                            <button
                                type="button"
                                onclick={prevent_default(() => {
                                    $idaa_slct.event_obj.contact_li_json[0].unlock = false;
                                })}
                                class="
                        novi_btn novi_smaller ae_btn_info
                        btn btn-sm
                        preset-filled-tertiary-200-800
                        "
                            >
                                <span
                                    class="fas fa-unlock"
                                    title="Field is unlocked"
                                ></span>
                                Unlocked
                            </button>
                        {/if}

                        <label for="contact_1_full_name">
                            Full name
                            {#if !($ae_loc.administrator_access || ($idaa_slct.event_obj?.contact_li_json?.length && $idaa_slct.event_obj?.contact_li_json[0]?.unlock))}
                                <span
                                    class="fas fa-lock"
                                    title="Field is locked"
                                ></span>
                            {:else}
                                <span
                                    class="fas fa-unlock"
                                    title="Field is unlocked"
                                ></span>
                            {/if}
                            <input
                                type="text"
                                class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_1_full_name"
                                name="contact_1_full_name"
                                placeholder="Full name"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[0] &&
                                $lq__event_obj?.contact_li_json[0].full_name
                                    ? $lq__event_obj?.contact_li_json[0]
                                          .full_name
                                    : $idaa_loc.novi_full_name}
                                autocomplete="name"
                                readonly={!(
                                    $ae_loc.trusted_access ||
                                    ($idaa_slct.event_obj?.contact_li_json
                                        ?.length &&
                                        $idaa_slct.event_obj?.contact_li_json[0]
                                            ?.unlock)
                                )}
                                required={!$ae_loc.trusted_access}
                            />
                        </label>
                        <label for="contact_1_email"
                            >Email
                            {#if !($ae_loc.administrator_access || ($idaa_slct.event_obj?.contact_li_json?.length && $idaa_slct.event_obj?.contact_li_json[0]?.unlock))}
                                <span
                                    class="fas fa-lock"
                                    title="Field is locked"
                                ></span>
                            {:else}
                                <span
                                    class="fas fa-unlock"
                                    title="Field is unlocked"
                                ></span>
                            {/if}
                            <input
                                type="email"
                                class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_1_email"
                                name="contact_1_email"
                                placeholder="Email"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[0] &&
                                $lq__event_obj?.contact_li_json[0].email
                                    ? $lq__event_obj?.contact_li_json[0].email
                                    : $idaa_loc.novi_email}
                                autocomplete="email"
                                readonly={!(
                                    $ae_loc.trusted_access ||
                                    ($idaa_slct.event_obj?.contact_li_json
                                        ?.length &&
                                        $idaa_slct.event_obj?.contact_li_json[0]
                                            .unlock)
                                )}
                                required={!$ae_loc.trusted_access}
                            />
                        </label>
                    </span>
                    <span class="ae_group">
                        <label for="contact_1_phone_mobile"
                            >Mobile phone
                            <input
                                type="tel"
                                class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_1_phone_mobile"
                                name="contact_1_phone_mobile"
                                placeholder="Mobile phone"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[0] &&
                                $lq__event_obj?.contact_li_json[0].phone_mobile
                                    ? $lq__event_obj?.contact_li_json[0]
                                          .phone_mobile
                                    : ''}
                                autocomplete="tel"
                            />
                        </label>
                        <label for="contact_1_phone_home"
                            >Home phone
                            <input
                                type="tel"
                                class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_1_phone_home"
                                name="contact_1_phone_home"
                                placeholder="Home phone"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[0] &&
                                $lq__event_obj?.contact_li_json[0].phone_home
                                    ? $lq__event_obj?.contact_li_json[0]
                                          .phone_home
                                    : ''}
                                autocomplete="tel"
                            />
                        </label>
                        <label for="contact_1_phone_office"
                            >Office phone
                            <input
                                type="tel"
                                class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_1_phone_office"
                                name="contact_1_phone_office"
                                placeholder="Office phone"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[0] &&
                                $lq__event_obj?.contact_li_json[0].phone_office
                                    ? $lq__event_obj?.contact_li_json[0]
                                          .phone_office
                                    : ''}
                                autocomplete="tel"
                            />
                        </label>
                    </span>
                </fieldset>

                <fieldset class="event__contact_2 flex flex-col gap-1">
                    <legend class="legend">Contact 2</legend>
                    <span class="ae_group">
                        <label for="contact_2_full_name"
                            >Full name
                            <input
                                type="text"
                                class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_2_full_name"
                                name="contact_2_full_name"
                                placeholder="Full name"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[1] &&
                                $lq__event_obj?.contact_li_json[1].full_name
                                    ? $lq__event_obj?.contact_li_json[1]
                                          .full_name
                                    : ''}
                                autocomplete="name"
                            />
                        </label>
                        <label for="contact_2_email"
                            >Email
                            <input
                                type="email"
                                class="input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_2_email"
                                name="contact_2_email"
                                placeholder="Email"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[1] &&
                                $lq__event_obj?.contact_li_json[1].email
                                    ? $lq__event_obj?.contact_li_json[1].email
                                    : ''}
                                autocomplete="email"
                            />
                        </label>
                    </span>
                    <span class="ae_group">
                        <label for="contact_2_phone_mobile"
                            >Mobile phone
                            <input
                                type="tel"
                                class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_2_phone_mobile"
                                name="contact_2_phone_mobile"
                                placeholder="Mobile phone"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[1] &&
                                $lq__event_obj?.contact_li_json[1].phone_mobile
                                    ? $lq__event_obj?.contact_li_json[1]
                                          .phone_mobile
                                    : ''}
                                autocomplete="tel"
                            />
                        </label>
                        <label for="contact_2_phone_home"
                            >Home phone
                            <input
                                type="tel"
                                class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_2_phone_home"
                                name="contact_2_phone_home"
                                placeholder="Home phone"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[1] &&
                                $lq__event_obj?.contact_li_json[1].phone_home
                                    ? $lq__event_obj?.contact_li_json[1]
                                          .phone_home
                                    : ''}
                                autocomplete="tel"
                            />
                        </label>
                        <label for="contact_2_phone_office"
                            >Office phone
                            <input
                                type="tel"
                                class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                                id="contact_2_phone_office"
                                name="contact_2_phone_office"
                                placeholder="Office phone"
                                value={$lq__event_obj?.contact_li_json &&
                                $lq__event_obj?.contact_li_json[1] &&
                                $lq__event_obj?.contact_li_json[1].phone_office
                                    ? $lq__event_obj?.contact_li_json[1]
                                          .phone_office
                                    : ''}
                                autocomplete="tel"
                            />
                        </label>
                    </span>
                </fieldset>
            </div>
        </div>
        <!-- END: section event__contacts -->

        {#if $ae_loc.trusted_access}
            <button
                type="button"
                onclick={() => {
                    $idaa_loc.recovery_meetings.show__admin_options =
                        !$idaa_loc.recovery_meetings.show__admin_options;
                }}
                class="
            novi_btn
            btn btn-sm float-right
            "
                class:preset-filled-success-200-800={$idaa_loc.recovery_meetings
                    .show__admin_options}
                class:preset-filled-tertiary-200-800={!$idaa_loc
                    .recovery_meetings.show__admin_options}
            >
                {#if $idaa_loc.recovery_meetings.show__admin_options}
                    <span class="fas fa-eye-slash m-1"></span>
                {:else}
                    <span class="fas fa-eye m-1"></span>
                {/if}
                {$idaa_loc.recovery_meetings.show__admin_options
                    ? 'Hide'
                    : 'Show'} Admin
            </button>

            <!-- BEGIN: section event__admin_options -->
            <div
                class="
            ae_section event__admin_options
            space-y-1 p-2
            rounded
            preset-filled-surface-100-900 preset-outlined-error-400-600
            transition
            "
                class:hidden={!$idaa_loc.recovery_meetings.show__admin_options}
            >
                <h3 class="h3">Admin Options</h3>

                <span
                    class="flex flex-col md:flex-row flex-wrap gap-2 items-center justify-center md:justify-stretch w-full"
                >
                    <span
                        class="flex flex-row flex-wrap gap-2 items-center justify-evenly grow"
                    >
                        <fieldset
                            class="flex flex-row gap-1 items-center justify-center form-check"
                        >
                            <legend
                                class="legend text-sm font-semibold form-check-label"
                                >Confirmed</legend
                            >
                            <div>
                                <input
                                    type="radio"
                                    id="status_yes"
                                    name="status"
                                    value={'unknown'}
                                    bind:group={$idaa_slct.event_obj.status}
                                    class="radio form-check-input"
                                />
                                <label for="status_yes">Not Confirmed</label>
                            </div>
                            <div>
                                <input
                                    type="radio"
                                    id="status_no"
                                    name="status"
                                    value={null}
                                    bind:group={$idaa_slct.event_obj.status}
                                    class="radio form-check-input"
                                />
                                <label for="status_no">Yes</label>
                            </div>
                        </fieldset>

                        <fieldset
                            class="flex flex-row gap-1 items-center justify-center form-check"
                        >
                            <legend
                                class="legend text-sm font-semibold form-check-label"
                                >Hide</legend
                            >
                            <div>
                                <input
                                    type="radio"
                                    id="hide_yes"
                                    name="hide"
                                    value={true}
                                    bind:group={$idaa_slct.event_obj.hide}
                                    class="radio form-check-input"
                                />
                                <label for="hide_yes">Yes</label>
                            </div>
                            <div>
                                <input
                                    type="radio"
                                    id="hide_no"
                                    name="hide"
                                    value={false}
                                    bind:group={$idaa_slct.event_obj.hide}
                                    class="radio form-check-input"
                                />
                                <label for="hide_no">No</label>
                            </div>
                        </fieldset>

                        <fieldset
                            class="flex flex-row gap-1 items-center justify-center form-check"
                        >
                            <legend
                                class="legend text-sm font-semibold form-check-label"
                                >Priority</legend
                            >
                            <div>
                                <input
                                    type="radio"
                                    id="priority_yes"
                                    name="priority"
                                    value={true}
                                    bind:group={$idaa_slct.event_obj.priority}
                                    class="radio form-check-input"
                                />
                                <label for="priority_yes">Yes</label>
                            </div>
                            <div>
                                <input
                                    type="radio"
                                    id="priority_no"
                                    name="priority"
                                    value={false}
                                    bind:group={$idaa_slct.event_obj.priority}
                                    class="radio form-check-input"
                                />
                                <label for="priority_no">No</label>
                            </div>
                        </fieldset>
                    </span>

                    <span
                        class="
                    grow
                    flex flex-row flex-wrap gap-1 items-center justify-evenly
                    col-sm-1
                    "
                    >
                        <label class="legend text-sm font-semibold input-group"
                            >Sort <input
                                type="number"
                                name="sort"
                                value={$idaa_slct.event_obj.sort}
                                class="input w-24 preset-tonal-surface form-control"
                            /></label
                        >

                        <label class="legend text-sm font-semibold input-group"
                            >Group <input
                                type="text"
                                name="group"
                                value={$idaa_slct.event_obj.group ?? ''}
                                max="100"
                                class="input w-40 preset-tonal-surface form-control"
                            /></label
                        >
                    </span>

                    {#if $ae_loc.administrator_access}
                        <span
                            class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow"
                        >
                            <fieldset class="flex flex-row gap-2 form-check">
                                <legend
                                    class="legend text-sm font-semibold form-check-label"
                                    >Enable</legend
                                >
                                <div
                                    class="flex flex-row gap-1 items-start justify-center"
                                >
                                    <input
                                        type="radio"
                                        id="enable_yes"
                                        name="enable"
                                        value={true}
                                        bind:group={$idaa_slct.event_obj.enable}
                                        class="radio form-check-input"
                                    />
                                    <label for="enable_yes">Yes</label>
                                </div>
                                <div
                                    class="flex flex-row gap-1 items-start justify-center"
                                >
                                    <input
                                        type="radio"
                                        id="enable_no"
                                        name="enable"
                                        value={false}
                                        bind:group={$idaa_slct.event_obj.enable}
                                        class="radio form-check-input"
                                    />
                                    <label for="enable_no">No</label>
                                </div>
                            </fieldset>
                        </span>
                    {:else}
                        <input
                            type="hidden"
                            name="enable"
                            value={$idaa_slct.event_obj.enable}
                        />
                    {/if}
                </span>

                {#if $ae_loc.trusted_access}
                    <label for="notes" class="w-full">
                        Internal Staff Notes
                        <AE_Comp_Editor_TipTap
                            bind:content={notes_new_html}
                            class_li="preset-tonal-surface hover:preset-filled-surface-100-900"
                            placeholder="Internal notes for staff only. Not shown to the public."
                        />
                    </label>
                {/if}
            </div>
            <!-- END: section event__admin_options -->
        {/if}

        <div
            class="
            ae_section ae_options ae_row ae_actions event__options event__actions
            flex flex-row flex-wrap gap-2 items-center justify-between w-full
        "
        >
            <!-- BEGIN: section event__options -->
            <span
                class="flex flex-row flex-wrap gap-1 items-center justify-center"
            >
                {#if $idaa_slct.event_id}
                    <button
                        type="submit"
                        disabled={disable_submit_btn}
                        class="
                    novi_btn
                    btn btn-md preset-tonal-primary preset-outlined-primary-800-200 hover:preset-filled-primary-200-800
                    transition
                    "
                    >
                        {#await prom_api__event_obj}
                            <span class="fas fa-spinner fa-spin m-1"></span> Saving
                        {:then}
                            <span class="fas fa-save m-1"></span> Save Changes
                        {/await}
                    </button>
                {:else}
                    <button
                        type="submit"
                        disabled={disable_submit_btn}
                        onclick={() => {
                            if (
                                !confirm(
                                    'Are you sure you want to create this event?'
                                )
                            ) {
                                return false;
                            }
                            // handle_save_event_obj({event_id: $idaa_slct.event_id, method: 'create'});
                        }}
                        class="
                    novi_btn btn-warning
                    btn
                    preset-tonal-warning hover:preset-filled-warning-200-800
                    transition
                    "
                    >
                        {#await prom_api__event_obj}
                            <span class="fas fa-spinner fa-spin m-1"></span> Saving
                        {:then}
                            <span class="fas fa-plus m-1"></span> Save New Event
                        {/await}
                    </button>
                {/if}

                {#if $idaa_slct.event_id}
                    {#if $ae_loc.administrator_access}
                        <button
                            type="button"
                            onclick={() => {
                                if (
                                    !confirm(
                                        'Are you sure you want to delete this event?'
                                    )
                                ) {
                                    return false;
                                }
                                handle_delete_event_obj({
                                    event_id: $idaa_slct.event_id,
                                    method: 'delete'
                                });
                            }}
                            class="
                novi_btn
                btn btn-sm
                preset-tonal-warning preset-outlined-error-800-200 hover:preset-filled-error-200-800
                transition
                "
                            title="Delete record permanently"
                        >
                            <span class="fas fa-minus m-1"></span> Delete
                        </button>
                    {:else if $ae_loc.trusted_access}
                        <button
                            type="button"
                            onclick={() => {
                                if (
                                    !confirm(
                                        'Are you sure you want to disable this event?'
                                    )
                                ) {
                                    return false;
                                }
                                handle_delete_event_obj({
                                    event_id: $idaa_slct.event_id,
                                    method: 'disable'
                                });
                            }}
                            class="
                novi_btn
                btn btn-sm
                preset-tonal-warning preset-outlined-warning-800-200 hover:preset-filled-warning-200-800
                transition
                "
                            title="Disable record to delete"
                        >
                            <span class="fas fa-minus m-1"></span> Delete
                        </button>
                    {:else}
                        <button
                            type="button"
                            onclick={() => {
                                if (
                                    !confirm(
                                        'Are you sure you want to hide this event?'
                                    )
                                ) {
                                    return false;
                                }
                                handle_delete_event_obj({
                                    event_id: $idaa_slct.event_id,
                                    method: 'hide'
                                });
                            }}
                            class="
                novi_btn
                btn btn-sm
                preset-tonal-warning preset-outlined-warning-800-200 hover:preset-filled-warning-200-800
                transition
                "
                            title="Hide record to delete"
                        >
                            <span class="fas fa-comment-slash m-1"></span> Delete
                        </button>
                    {/if}
                {/if}
            </span>
            <span>
                <button
                    type="button"
                    class="
                novi_btn
                btn btn-sm
                preset-filled-warning-200-800 hover:preset-filled-success-200-800
                transition
                "
                    onclick={() => {
                        $idaa_sess.recovery_meetings.edit__event_obj = false;
                        if (log_lvl) {
                            console.log(
                                `Toggle edit__event_obj: ${$idaa_sess.recovery_meetings.edit__event_obj}`
                            );
                        }
                    }}
                    title="View this Recovery Meeting"
                >
                    <!-- <span class="far fa-window-close m-1"></span> -->
                    <span class="fas fa-times m-1 text-neutral-800/80"></span>
                    Cancel Edit
                </button>
            </span>
        </div>
    </form>
</section>

<style lang="scss">
    .event__physical_virtual .ae_group {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        border: solid thin hsla(0, 0%, 0%, 0.25);

        margin: 1em 0em;
        padding: 0.5em;
    }

    .event__recurring .ae_group {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        border: solid thin hsla(0, 0%, 0%, 0.25);

        margin: 1em 0em;
        padding: 0.5em;
    }

    /* .event__days_of_week {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
} */
</style>
