<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';


// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';

import type { Writable } from 'svelte/store';

import Element_data_store from '$lib/element_data_store.svelte';

const store_current_tab: Writable<string> = localStorageStore('ae_sponsorships_current_tab', 'start');
console.log(`store_current_tab:`, $store_current_tab);

// This works, but does not uses local storage:
// store_current_tab is not reactive and should not be prefixed with $.
// let store_current_tab: string = 'start';
// console.log(`store_current_tab:`, store_current_tab);

// This does not work:
// let tab_set = $store_current_tab;
// let tab_set = store_current_tab;

// Stores
// import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';

// Props
/** Exposes parent props to this component. */
export let parent: SvelteComponent;
export let container_class_li = '';

const modalStore = getModalStore();


import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import type { key_val } from '$lib/ae_stores';


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

$ae_sess.mod.sponsorships.submit_status = null;
$ae_sess.mod.sponsorships.disable_submit__sponsorship_obj = false;
let placeholder_li: key_val = {
    file_logo_primary: '-- No File Selected --',
    file_logo_light: '-- No File Selected --',
    file_logo_dark: '-- No File Selected --',
    file_media_promo_video: '-- No File Selected --',
};

if ($slct.sponsorship_id) {
    console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
    console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);

    $slct_trigger = 'load__sponsorship_obj';
} else {
    $store_current_tab = 'start';

    $slct.sponsorship_id = null;
    $slct.sponsorship_obj = {
        sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.cfg_id,

        name: null,
        description: null,

        poc_person_id: null,
        poc_json: {
            full_name: null,
            email: null,
            phone_mobile: null,
        },

        logo_li_json: null,
        media_li_json: null,

        questions_li_json: {
            accommodations: null,
            accommodations_text: null,
            public_recognition: null,
            social_email: null,
            dedicated_promos: null,
            table_exhibit: null,
            table_power: null,
            plenary_session: null,
            plenary_opening: null,
            virtual_session: null,
            // promo_video: null,
        },

        website_url: 'https://',

        social_li_json: null,

        guest_li_json: null,

        level_num: '',
        level_str: null,
        amount: null,
        paid: null,

        enable: null,
    };
}


onMount(() => {
    console.log('** Component Mounted: ** Edit Modal - Sponsorship Obj');

    if ($slct.sponsorship_id && $ae_loc.href_url) {
        // $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?sponsorship_id=${$slct.sponsorship_id}`;
        $ae_loc.mod.sponsorships.link = `${$ae_loc.site_domain}/sponsorships/load?sponsorship_id=${$slct.sponsorship_id}`;
        console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
    }

    // Deal with this later!
    // // I tried adding this to load with the sponsorships +layout.ts. This did not seem to work. Probably an async related issue?
    // let ds_code: null|string = 'sponsorships__agree_li';
    // let ds_type: null|string = 'json';

    // let loading_results = api.get_data_store_obj_w_code({
    //     api_cfg: $ae_api,
    //     data_store_code: ds_code,
    //     data_type: ds_type,
    //     log_lvl: 1
    //     })
    // .then( function (ds_results) {
    //     console.log(`ae_ Data Store ${ds_code} = `, ds_results);
    //     if (ds_results) {
    //         console.log(`ae_ Data Store ${ds_code} = `, ds_results);
    //         // let ae_loc_tmp = get(ae_loc);
    //         if (ds_type == 'json') {
    //             $ae_loc.ds[ds_code] = ds_results.json;
    //         } else {
    //             $ae_loc.ds[ds_code] = ds_results.text;
    //         }
    //         // $ae_loc = $ae_loc;
    //     }
    // })
    // .finally(function () {
    //     // console.log(`ae_loc = `, get(ae_loc));
    //     return true;
    // });

    // console.log($slct.sponsorship_obj.address_li_json.mailing);
});


let show_question__accommodations = false;
$: if ($slct.sponsorship_obj) {

    if ($slct.sponsorship_obj.questions_li_json && $slct.sponsorship_obj.questions_li_json.accommodations_text) {
        console.log('Set q_accodomations to true.');
        // $ae_loc.mod.sponsorships.show_question__accommodations = true;
        // show_question__accommodations = true;
        // $slct.sponsorship_obj.q_accommodations = true;
        // $slct.sponsorship_obj.questions_li_json.accommodations
    }


    // Logo related
    if ($slct.sponsorship_obj.logo_li_json) {
        if ($slct.sponsorship_obj.logo_li_json.primary && $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random) {
            placeholder_li.file_logo_primary = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_primary].${$slct.sponsorship_obj.logo_li_json.primary.extension}`,
                inc_link: true,
            })

            // `<img src="${$ae_api.base_url}/hosted_file/${$slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random}/download?x_no_account_id_token=${$ae_loc.account_id}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.primary.filename}`;
        }
        if ($slct.sponsorship_obj.logo_li_json.light && $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random) {
            placeholder_li.file_logo_light = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_light].${$slct.sponsorship_obj.logo_li_json.light.extension}`,
                inc_link: true,
            })

            // `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.light.filename}`;
        }
        if ($slct.sponsorship_obj.logo_li_json.dark && $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random) {
            placeholder_li.file_logo_dark = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_dark].${$slct.sponsorship_obj.logo_li_json.dark.extension}`,
                inc_link: true,
            })

            // `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.dark.filename}`;
        }
    }
    // Other media files related
    if ($slct.sponsorship_obj.media_li_json) {
        if ($slct.sponsorship_obj.media_li_json.promo_video && $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random) {
            placeholder_li.file_media_promo_video = ae_util.create_video_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [promo_video].${$slct.sponsorship_obj.media_li_json.promo_video.extension}`,
                inc_link: true,
            })

            // `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random}" controls class="max-w-64"></video>${$slct.sponsorship_obj.media_li_json.promo_video.filename}`;
        }
    }
}

// function create_a_element({hosted_file_id, filename=null, extension=null, text="Download", class_li='text-blue-500'}) {
//     return `<a href="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}&filename=${filename}" class="${class_li}">${text}</a>`;
// }

// function create_img_element({hosted_file_id, filename=null, extension=null, class_li='max-w-64', inc_link=false}) {
//     let img_html = '';
//     if (filename) {
//         img_html = `<img src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}&filename=${filename}" class="${class_li}" />`;
//     } else {
//         img_html = `<img src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}" class="${class_li}" />`;
//     }

//     if (inc_link) {
//         let a_html = create_a_element({hosted_file_id: hosted_file_id, filename: filename, extension: extension});
//         img_html = `<div class="ae_img ae_a">${img_html}${a_html}</div>`;
//     }

//     return img_html;
// }

// function create_video_element({hosted_file_id, filename=null, extension=null, class_li='max-w-64', inc_link=false}) {
//     let video_html = '';
//     if (filename) {
//         video_html = `<video src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}&filename=${filename}" controls class="${class_li}"></video>`;
//     } else {
//         video_html = `<video src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}" controls class="${class_li}"></video>`;
//     }

//     if (inc_link) {
//         let a_html = create_a_element({hosted_file_id: hosted_file_id, filename: filename, extension: extension});
//         video_html = `<div class="ae_video ae_a">${video_html}${a_html}</div>`;
//     }

//     return video_html;
// }

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

    $ae_sess.mod.sponsorships.disable_submit__sponsorship_obj = true;
    $ae_sess.mod.sponsorships.submit_status = 'saving';

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

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

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

    if (!$slct.sponsorship_id) {
        // sponsorship_do['account_id_random'] = $ae_loc.account_id;
        sponsorship_do['sponsorship_cfg_id_random'] = $slct.sponsorship_cfg_id;
        // sponsorship_do['enable'] = true;
    }

    if (sponsorship_di.name) {
        // Using the name field to store the name of the sponsorship organization or person.
        sponsorship_do['name'] = sponsorship_di.name;
    }

    // Mailing address related fields
    let temp_address = {'mailing': {}};
    if (typeof sponsorship_di.address_line_1 !== 'undefined') {
        temp_address.mailing['line_1'] = sponsorship_di.address_line_1;
    }
    if (typeof sponsorship_di.address_line_2 !== 'undefined') {
        temp_address.mailing['line_2'] = sponsorship_di.address_line_2;
    }
    if (typeof sponsorship_di.address_city !== 'undefined') {
        temp_address.mailing['city'] = sponsorship_di.address_city;
    }
    if (typeof sponsorship_di.address_state_province !== 'undefined') {
        temp_address.mailing['state_province'] = sponsorship_di.address_state_province;
    }
    if (typeof sponsorship_di.address_postal_code !== 'undefined') {
        temp_address.mailing['postal_code'] = sponsorship_di.address_postal_code;
    }
    if (typeof sponsorship_di.address_country !== 'undefined') {
        temp_address.mailing['country'] = sponsorship_di.address_country;
    }

    if (temp_address.mailing && Object.keys(temp_address.mailing).length) {
        sponsorship_do['address_li_json'] = temp_address;
    }

    if (sponsorship_di.poc_full_name || sponsorship_di.poc_email) {
        sponsorship_do['poc_json'] = {
            full_name: sponsorship_di.poc_full_name,
            email: sponsorship_di.poc_email,
            phone_mobile: sponsorship_di.poc_phone_mobile,
        };
    }

    // Loop through possible additional contact list (up to 5) and add to the contact_li_json array.

    let temp_contact_li = [];
    for (let i = 0; i < 20; i++) {
        if (sponsorship_di[`contact_${i}_full_name`] || sponsorship_di[`contact_${i}_given_name`]) {
            // let contact_x_full_name = sponsorship_di[`contact_${i}_given_name`] + ' ' + sponsorship_di[`contact_${i}_family_name`];
            temp_contact_li.push({
                given_name: sponsorship_di[`contact_${i}_given_name`],
                family_name: sponsorship_di[`contact_${i}_family_name`],
                full_name: sponsorship_di[`contact_${i}_full_name`],
                email: sponsorship_di[`contact_${i}_email`],
                phone: sponsorship_di[`contact_${i}_phone`],
                phone_mobile: sponsorship_di[`contact_${i}_phone_mobile`],
                phone_home: sponsorship_di[`contact_${i}_phone_home`],
                phone_office: sponsorship_di[`contact_${i}_phone_office`],
                city: sponsorship_di[`contact_${i}_city`],
                other_text: sponsorship_di[`contact_${i}_other_text`],
            });
        }
    }
    if (temp_contact_li.length) {
        sponsorship_do['contact_li_json'] = temp_contact_li;
    }

    // if (sponsorship_di.description) {
    //     sponsorship_do['description'] = sponsorship_di.description;
    // }

    if (sponsorship_di.level_num) {
        sponsorship_do['level_num'] = Number(sponsorship_di.level_num);
        let level_num = sponsorship_do['level_num'];
        let level_name = $slct.sponsorship_cfg_obj.level_li_json[String(level_num)].name;
        console.log(`Level Name: ${level_name}`);

        if ($slct.sponsorship_cfg_obj.level_li_json) {
            let level_str = `${$slct.sponsorship_cfg_obj.level_li_json[level_num].name}`
            // - $${$slct.sponsorship_cfg_obj.level_li_json[level_num].amount}`;
            sponsorship_do['level_str'] = level_str;
        }
    }

    if (typeof sponsorship_di.amount !== 'undefined') {
        sponsorship_do['amount'] = Number(sponsorship_di.amount)*100;
    }

    if (typeof sponsorship_di.paid !== 'undefined') {
        sponsorship_do['paid'] = !!sponsorship_di.paid;
    }


    // These questions are coming in from multiple forms. We need to make sure we do not clear out any existing question responses.
    let temp_questions = $slct.sponsorship_obj.questions_li_json;
    // q_accomodations

    if (typeof sponsorship_di.q_accommodations !== 'undefined') {
        temp_questions['accommodations'] = Number(sponsorship_di.q_accommodations);
    }

    if (typeof sponsorship_di.accommodations_text !== 'undefined') {

        temp_questions['accommodations_text'] = sponsorship_di.accommodations_text;
    }


    // Marketing for social media and email related questions
    if (typeof sponsorship_di.website_url !== 'undefined') {
        // This is also stored under social_li_json.
        sponsorship_do['website_url'] = sponsorship_di.website_url;
    }

    if (sponsorship_di.social_media_facebook || sponsorship_di.social_media_twitter || sponsorship_di.social_media_instagram || sponsorship_di.social_media_linkedin) {
        sponsorship_do['social_li_json'] = {
            facebook: sponsorship_di.social_media_facebook,
            twitter: sponsorship_di.social_media_twitter,
            instagram: sponsorship_di.social_media_instagram,
            linkedin: sponsorship_di.social_media_linkedin,
            org: sponsorship_di.website_url,
        };
    }


    // q_public_recognition - Friend level and above
    if (typeof sponsorship_di.q_public_recognition !== 'undefined') {
        temp_questions['public_recognition'] = Number(sponsorship_di.q_public_recognition);
    }

    // q_social_email - Champion level and above
    if (typeof sponsorship_di.q_social_email !== 'undefined') {
        temp_questions['social_email'] = Number(sponsorship_di.q_social_email);
    }

    // q_dedicated_promos - Signature Partner level only
    if (typeof sponsorship_di.q_dedicated_promos !== 'undefined') {
        temp_questions['dedicated_promos'] = Number(sponsorship_di.q_dedicated_promos);
    }

    // Exibit booth related questions
    // q_table_exhibit - Supporter level and above
    if (typeof sponsorship_di.q_table_exhibit !== 'undefined') {
        temp_questions['table_exhibit'] = Number(sponsorship_di.q_table_exhibit);
    }

    // q_table_power - Supporter level and above
    if (typeof sponsorship_di.q_table_power !== 'undefined') {
        temp_questions['table_power'] = Number(sponsorship_di.q_table_power);
    }

    // Virtual sessions related questions
    // q_virtual_session - Champion level and above
    if (typeof sponsorship_di.q_virtual_session !== 'undefined') {
        temp_questions['virtual_session'] = Number(sponsorship_di.q_virtual_session);
    }

    // Plenary sessions related questions
    // q_plenary_session - Advocate level and above
    if (typeof sponsorship_di.q_plenary_session !== 'undefined') {
        temp_questions['plenary_session'] = Number(sponsorship_di.q_plenary_session);
    }

    // q_plenary_opening - Advocate level and above
    if (typeof sponsorship_di.q_plenary_opening !== 'undefined') {
        temp_questions['plenary_opening'] = Number(sponsorship_di.q_plenary_opening);
    }

    console.log(temp_questions);

    if (temp_questions) {
        sponsorship_do['questions_li_json'] = temp_questions;
    }


    // q_promo_video - Presenting Partner level and above
    // This is taken care of below with the file uploads.


    // Loop through possible guest list (up to 20) and add to the guest_li_json array.

    let temp_guest_li = [];
    for (let i = 0; i < 20; i++) {
        if (sponsorship_di[`guest_${i}_full_name`] || sponsorship_di[`guest_${i}_given_name`]) {
            let guest_x_full_name = sponsorship_di[`guest_${i}_given_name`] + ' ' + sponsorship_di[`guest_${i}_family_name`];
            temp_guest_li.push({
                given_name: sponsorship_di[`guest_${i}_given_name`],
                family_name: sponsorship_di[`guest_${i}_family_name`],
                full_name: guest_x_full_name,
                title: sponsorship_di[`guest_${i}_title`],
                affiliations: sponsorship_di[`guest_${i}_affiliations`],
                ada: sponsorship_di[`guest_${i}_ada`],
                dietary: sponsorship_di[`guest_${i}_dietary`],

                // email: sponsorship_di[`guest_${i}_email`],
                // phone_mobile: sponsorship_di[`guest_${i}_phone_mobile`],
                // phone_home: sponsorship_di[`guest_${i}_phone_home`],
                // phone_office: sponsorship_di[`guest_${i}_phone_office`],
                // city: sponsorship_di[`guest_${i}_city`],

                comments: sponsorship_di[`guest_${i}_comments`],
            });
        }
    }
    if (temp_guest_li.length) {
        sponsorship_do['guest_li_json'] = temp_guest_li;
    }

    if (typeof sponsorship_di.agree !== 'undefined') {
        sponsorship_do['agree'] = !!sponsorship_di.agree;
    }

    sponsorship_do['hide'] = !!sponsorship_di.hide;
    sponsorship_do['priority'] = !!sponsorship_di.priority;
    if (sponsorship_di.sort) {
        // Change this to a number type
        sponsorship_do['sort'] = Number(sponsorship_di.sort);
    } else {
        sponsorship_do['sort'] = null;
    }
    if (sponsorship_di.group) {
        sponsorship_do['group'] = sponsorship_di.group;
    } else {
        sponsorship_do['group'] = null;
    }
    if (sponsorship_do['enable']) {
        sponsorship_do['enable'] = !!sponsorship_di.enable;
    }

    if (typeof sponsorship_di.notes !== 'undefined') {
        sponsorship_do['notes'] = sponsorship_di.notes;
    }

    console.log(sponsorship_do);

    if (!$slct.sponsorship_id) {
        ae_promises.create__sponsorship = await handle_create__sponsorship({
            obj_type: 'sponsorship',
            data: sponsorship_do
        });
        console.log(ae_promises.create__sponsorship);
        if (ae_promises.create__sponsorship.sponsorship_id_random) {
            $slct.sponsorship_id = ae_promises.create__sponsorship.sponsorship_id_random;
            $slct.sponsorship_obj = ae_promises.create__sponsorship;

            $ae_loc.mod.sponsorships.link = `${$ae_loc.site_domain}/sponsorships/load?sponsorship_id=${$slct.sponsorship_id}`;
            console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);

            // This should no longer be needed! Will add a check later to trigger this or a second create if something does not look correct.
            // $slct_trigger = 'load__sponsorship_obj';

            $ae_sess.mod.sponsorships.submit_status = 'created';
        } else {
            console.log('No sponsorship_id_random found was found. Something may have gone wrong.');
            $ae_sess.mod.sponsorships.submit_status = 'created_unknown';
        }
        $ae_sess.mod.sponsorships.disable_submit__sponsorship_obj = false;

    } else {
        ae_promises.update__sponsorship_obj = await handle_update__sponsorship({
            obj_type: 'sponsorship',
            obj_id: $slct.sponsorship_id,
            data: sponsorship_do
        });
        console.log(ae_promises.update__sponsorship_obj);
        if (ae_promises.update__sponsorship_obj.sponsorship_id_random) {
            $slct.sponsorship_obj = ae_promises.update__sponsorship_obj;

            // $slct_trigger = 'load__sponsorship_obj';
            $ae_sess.mod.sponsorships.submit_status = 'updated';
        } else {
            console.log('No sponsorship_id_random found was found. Something may have gone wrong.');
            $ae_sess.mod.sponsorships.submit_status = 'updated_unknown';

            console.log('Trigger a reload of the object.');
            $slct_trigger = 'load__sponsorship_obj';
        }
        $ae_sess.mod.sponsorships.disable_submit__sponsorship_obj = false;
    }

    if ($slct.sponsorship_id) {
        console.log(`Moving on to next section for ID: ${$slct.sponsorship_id}`);

        if ($store_current_tab == 'start' && $slct.sponsorship_id) {
            $store_current_tab = 'marketing';
            if (!$slct.sponsorship_obj.updated_on) {
                send_init_confirm_email();
            }

        // If level is 2 or above then they can go to the exhibits tab.
        } else if ($store_current_tab == 'marketing' && $slct.sponsorship_id && $slct.sponsorship_obj.level_num >= 2) {
            $store_current_tab = 'exhibit';

        // Move on to files
        } else if ($store_current_tab == 'marketing' && $slct.sponsorship_id && $slct.sponsorship_obj.level_num == 1) {
            $store_current_tab = 'files';

        // If level is 3 or above then they can go to the sessions tab.
        } else if ($store_current_tab == 'exhibit' && $slct.sponsorship_id && $slct.sponsorship_obj.level_num >= 3) {
            $store_current_tab = 'sessions';

        // All levels can go to the files tab.
        } else if ($store_current_tab == 'exhibit' && $slct.sponsorship_id && $slct.sponsorship_obj.level_num) {
            $store_current_tab = 'files';

        } else if ($store_current_tab == 'sessions' && $slct.sponsorship_id && $slct.sponsorship_obj.level_num) {
            $store_current_tab = 'files';

        } else if ($store_current_tab == 'files' && $slct.sponsorship_id && $slct.sponsorship_obj.level_num) {
            $store_current_tab = 'guests';
        }

        $slct_trigger = 'load__sponsorship_obj_li';
    } else {
        console.log('No obj ID found!');
    }

}

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

    $ae_sess.mod.sponsorships.disable_submit__sponsorship_obj = true;
    $ae_sess.mod.sponsorships.submit_status = 'saving';

    let sponsorship_do: key_val = {};

    if ($slct.sponsorship_obj.logo_li_json) {
        console.log('The logo_li_json was found.');
        sponsorship_do.logo_li_json = $slct.sponsorship_obj.logo_li_json;
    } else {
        console.log('The logo_li_json was not found or is empty.');
        sponsorship_do.logo_li_json = {};
    }

    if ($slct.sponsorship_obj.media_li_json) {
        console.log('The media_li_json was found.');
        sponsorship_do.media_li_json = $slct.sponsorship_obj.media_li_json;
    } else {
        console.log('The media_li_json was not found or is empty.');
        sponsorship_do.media_li_json = {};
    }

    let hosted_file_results;
    // let logo_li_json = {};
    // let media_li_json =  {};

    // Standard default or primary logo file
    if (event.target.file_logo_primary.files.length > 0) {
        console.log('The default or primary logo file was found.');
        hosted_file_results = await handle_input_upload_files(event.target.file_logo_primary.files);

        if (hosted_file_results) {
            sponsorship_do.logo_li_json.primary = hosted_file_results[0];
            // console.log(sponsorship_do.logo_li_json);
            placeholder_li.file_logo_primary = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: sponsorship_do.logo_li_json.primary.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_primary].${sponsorship_do.logo_li_json.primary.extension}`,
                // style: 'max-width: 20em;',
                inc_link: true,
            })

            // `<img src="https://dev-api.oneskyit.com/hosted_file/${sponsorship_do.logo_li_json.primary.hosted_file_id_random}/download?x_no_account_id_token=${$ae_loc.account_id}" class="max-w-64">${sponsorship_do.logo_li_json.primary.filename}`;
        }
    }

    // Light logo file for dark backgrounds
    if (event.target.file_logo_light.files.length > 0) {
        console.log('The light logo file for dark backgrounds was found.');
        hosted_file_results = await handle_input_upload_files(event.target.file_logo_light.files);

        if (hosted_file_results) {
            sponsorship_do.logo_li_json.light = hosted_file_results[0];
            // console.log(sponsorship_do.logo_li_json);
            placeholder_li.file_logo_light = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: sponsorship_do.logo_li_json.light.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_light].${sponsorship_do.logo_li_json.light.extension}`,
                // style: 'max-width: 20em;',
                inc_link: true,
            })

            // `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.light.hosted_file_id_random}" class="max-w-64">${sponsorship_do.logo_li_json.light.filename}`;
        }
    }

    // Dark logo file for light backgrounds
    if (event.target.file_logo_dark.files.length > 0) {
        console.log('The dark logo file for light backgrounds was found.');
        hosted_file_results = await handle_input_upload_files(event.target.file_logo_dark.files);

        if (hosted_file_results) {
            sponsorship_do.logo_li_json.dark = hosted_file_results[0];
            // console.log(sponsorship_do.logo_li_json);
            placeholder_li.file_logo_dark = ae_util.create_img_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: sponsorship_do.logo_li_json.dark.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [logo_dark].${sponsorship_do.logo_li_json.dark.extension}`,
                // style: 'max-width: 20em;',
                inc_link: true,
            })

            // `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.dark.hosted_file_id_random}" class="max-w-64">${sponsorship_do.logo_li_json.dark.filename}`;
        }
    }

    // Promo video file (30 seconds or less)
    if (typeof event.target.file_media_promo_video !== 'undefined' && event.target.file_media_promo_video.files.length > 0) {
        console.log('The promo video file was found.');
        hosted_file_results = await handle_input_upload_files(event.target.file_media_promo_video.files);

        if (hosted_file_results) {
            sponsorship_do.media_li_json.promo_video = hosted_file_results[0];
            // console.log(sponsorship_do.media_li_json);
            placeholder_li.file_media_promo_video = ae_util.create_video_element({
                account_id: $ae_loc.account_id,
                base_url: $ae_api.base_url,
                hosted_file_id: sponsorship_do.media_li_json.promo_video.hosted_file_id_random,
                filename: `${$slct.sponsorship_obj.name} [promo_video].${sponsorship_do.media_li_json.promo_video.extension}`,
                style: 'max-width: 20em;',
                inc_link: true,
            })

            // `<video src="/hosted_file/download/${sponsorship_do.media_li_json.promo_video.hosted_file_id_random}" controls class="max-w-64"></video>${sponsorship_do.media_li_json.promo_video.filename}`;
        }
    }

    console.log(sponsorship_do);


    ae_promises.update__sponsorship_obj = await handle_update__sponsorship({
        obj_type: 'sponsorship',
        obj_id: $slct.sponsorship_id,
        data: sponsorship_do
    });
    console.log(ae_promises.update__sponsorship_obj);
    if (ae_promises.update__sponsorship_obj.sponsorship_id_random) {
        $slct.sponsorship_obj = ae_promises.update__sponsorship_obj;

        // $slct_trigger
        $ae_sess.mod.sponsorships.submit_status = 'updated';
    } else {
        console.log('No sponsorship_id_random was found. Something may have gone wrong.');
        $ae_sess.mod.events.submit_status = 'updated_unknown';

        console.log('Trigger a reload of the object.');
        $slct_trigger = 'load__sponsorship_obj';
    }
    $ae_sess.mod.sponsorships.disable_submit__sponsorship_obj = false;

    if ($store_current_tab == 'files') {
        $store_current_tab = 'guests';
    }

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


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

    const form_data = new FormData();

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

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

    let params = null;

    let endpoint = '/hosted_file/upload_files';

    console.log(form_data);

    params = null;

    // Uncomment and the post_promise is not seen by the "await" below
    // post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
    // Uncomment so that the post_promise is not seen by the "await" below
    ae_promises.upload__hosted_file_obj = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data: form_data});
    console.log(ae_promises.upload__hosted_file_obj);
    let hosted_file_result = ae_promises.upload__hosted_file_obj;

    return hosted_file_result;
}


async function handle_create__sponsorship({
    obj_type,
    data
    }) {
    console.log('*** handle_create__sponsorship() ***');

    ae_promises.api_create__sponsorship_obj = api.create_ae_obj_crud({
        api_cfg: $ae_api,
        obj_type: obj_type,
        fields: data,
        key: $ae_api.api_crud_super_key,
        return_obj: true,
        log_lvl: 2
        })
    .then(async function (create__obj_result) {
        if (!create__obj_result) {
            console.log('The result was null or false.');
            return false;
        }
        return create__obj_result;
    })
    .catch(function (error) {
        console.log('Something went wrong.');
        console.log(error);
        return false;
    });

    return ae_promises.api_create__sponsorship_obj;
}


async function handle_update__sponsorship({
    obj_type,
    obj_id,
    data
    }) {
    console.log('*** handle_update__sponsorship() ***');

    ae_promises.update__sponsorship_obj = api.update_ae_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: obj_type,
        obj_id: obj_id,
        fields: data,
        key: $ae_api.api_crud_super_key,
        return_obj: true,
        log_lvl: 2
        })
    .then(async function (update__obj_result) {
        if (!update__obj_result) {
            console.log('The result was null or false.');
            return false;
        } else {
            console.log(`update__obj_result = `, update__obj_result);
        }
        return update__obj_result;
    })
    .catch(function (error) {
        console.log('Something went wrong.');
        console.log(error);
        return false;
    });

    return ae_promises.update__sponsorship_obj;
}

function send_init_confirm_email() {
    console.log(`*** send_init_confirm_email() *** to ${$slct.sponsorship_obj.poc_json.email}.`);

    let subject = `CHOW 2024 Sponsor Hub Link for ${$slct.sponsorship_obj.name} (ID: ${$slct.sponsorship_id})`;

    let body_html = `
    <div>${$slct.sponsorship_obj.poc_json.full_name},
    <p>Thank you for your submission to the Capitol Hill Ocean Week Sponsor Hub. You are an integral part of Capitol Hill Ocean Week, and we appreciate your participation. If you need to make any changes or updates to your submission, you may access it via via the link below.</p>
    </div>

    <div>
    Sponsorship Level: ${$slct.sponsorship_obj.level_str}<br>
    Organization/Individual Name: ${$slct.sponsorship_obj.name}<br>
    Mailing Address: ${$slct.sponsorship_obj.address_li_json.mailing.line_1}, ${$slct.sponsorship_obj.address_li_json.mailing.city}, ${$slct.sponsorship_obj.address_li_json.mailing.state_province} ${$slct.sponsorship_obj.address_li_json.mailing.postal_code}<br>
    Point of Contact: ${$slct.sponsorship_obj.poc_json.full_name} (${$slct.sponsorship_obj.poc_json.email})
    </div>

    <br>

    <div>
    CHOW 2024 Sponsor ID: ${$slct.sponsorship_id}<br>
    <p>Use this link to view or update your CHOW 2024 sponsorship information and Ocean Awards Gala guest list.<br>
    Copy and paste link: <a href="${$ae_loc.mod.sponsorships.link}">${$ae_loc.mod.sponsorships.link}</a></p>
    </div>`;

    api.send_email({
        api_cfg: $ae_api,
        from_email: 'noreply+chow@oneskyit.com',
        from_name: 'CHOW 2024 Sponsor Hub',
        to_email: $slct.sponsorship_obj.poc_json.email,
        subject: subject,
        body_html: body_html,
    });
}

function send_confirm_email() {

    let guest_li_html = null;
    if ($slct.sponsorship_obj.guest_li_json) {
        guest_li_html = '<ul>';
        let guest_li = $slct.sponsorship_obj.guest_li_json;

        for (let i = 0; i < guest_li.length; i++) {
            let guest_str = `<li>${guest_li[i].given_name} ${guest_li[i].family_name} ${guest_li[i].title}</li>`;
            guest_li_html += guest_str;
        }
        guest_li_html += '</ul>';
    }

    let subject = `CHOW 2024 Sponsor Hub Link for ${$slct.sponsorship_obj.name} (ID: ${$slct.sponsorship_id})`;

    let body_html = `
    <p>Thank you for your submission to the Capitol Hill Ocean Week Sponsor Hub. You are an integral part of Capitol Hill Ocean Week, and we appreciate your participation. If you need to make any changes or updates to your submission, you may access it via via the link below.</p>

    <div>
    Sponsorship Level: ${$slct.sponsorship_obj.level_str}<br>
    Organization/Individual Name: ${$slct.sponsorship_obj.name}<br>
    Mailing Address: ${$slct.sponsorship_obj.address_li_json.mailing.line_1}, ${$slct.sponsorship_obj.address_li_json.mailing.city}, ${$slct.sponsorship_obj.address_li_json.mailing.state_province} ${$slct.sponsorship_obj.address_li_json.mailing.postal_code}<br>
    Point of Contact: ${$slct.sponsorship_obj.poc_json.full_name} (${$slct.sponsorship_obj.poc_json.email})
    </div>

    ${guest_li_html ? `<div><strong>Guests:</strong></br>${guest_li_html}</div>` : '<div>Guests: -- No Guests Added --</div>'}

    <br>

    <div>
    CHOW 2024 Sponsor ID: ${$slct.sponsorship_id}<br>
    <p>Use this link to view or update your CHOW 2024 sponsorship information and Ocean Awards Gala guest list.<br>
    Copy and paste link: <a href="${$ae_loc.mod.sponsorships.link}">${$ae_loc.mod.sponsorships.link}</a></p>
    </div>
    `;

    api.send_email({
        api_cfg: $ae_api,
        from_email: 'noreply+chow@oneskyit.com',
        from_name: 'CHOW 2024 Sponsor Hub',
        to_email: $slct.sponsorship_obj.poc_json.email,
        subject: subject,
        body_html: body_html,
    });
}

// let delete_sponsorship_obj_promise: Promise<any>;
    let delete_sponsorship_obj_promise;
async function handle_delete_sponsorship_obj({sponsorship_id, hosted_file_id=null, method='delete'}) {
    console.log('*** handle_delete_sponsorship_obj() ***');

    if (hosted_file_id) {
    //     let delete_hosted_file_obj_promise = api.delete_hosted_file({
    //         api_cfg: $ae_api,
    //         hosted_file_id: hosted_file_id,
    //         link_to_type: 'sponsorship',
    //         link_to_id: sponsorship_id,
    //         rm_orphan: true,
    //         // params: params,
    //         key: $ae_api.api_crud_super_key,
    //         log_lvl: 2
    //         })
    //     .then(function (hosted_file_obj_delete_result) {
    //         if (hosted_file_obj_delete_result) {
    //             // console.log(`Result:`, hosted_file_obj_delete_result);

    //             dispatch(
    //                 'deleted__hosted_file_obj',
    //                 {
    //                     hosted_file_id: hosted_file_id,
    //                 }
    //             );
    //         }
    //     })
    //     .catch(function (error) {
    //         console.log('The result was null or false when trying to delete.', error);
    //     });
    }

    delete_sponsorship_obj_promise = await api.delete_ae_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: 'sponsorship',
        obj_id: sponsorship_id,
        method: method,
        // params: params,
        key: $ae_api.api_crud_super_key,
        log_lvl: 2
        })
    .then(function (sponsorship_obj_delete_result) {
        if (sponsorship_obj_delete_result) {
            // console.log(`Result:`, sponsorship_obj_delete_result);

        }
    })
    .catch(function (error) {
        console.log('The result was null or false when trying to delete.', error);
    });

    console.log('Trigger a reload of the object list.');
    $slct_trigger = 'load__sponsorship_obj_li';

    parent.onClose();

    return delete_sponsorship_obj_promise;
}
</script>

<!-- @component This is the Sponsorships modal edit form. -->

{#if $modalStore[0]}
<div class="svelte_component ae_edit_modal ae_obj__sponsorship {container_class_li}">
    <header class={parent.regionHeader}>
        <h2 class="h3">{$modalStore[0].title ?? '-- No Title --'}:
        {$slct.sponsorship_obj.level_str ?? '-- Fill out and save --'}
        <!-- ({$slct.sponsorship_obj.level_num}) -->
        </h2>

        {#await ae_promises.update__sponsorship_obj}
            <div class="modal-loading">
                <span class="fas fa-spinner fa-spin"></span>
                <span class="loading-text">
                    <!-- <ProgressRadial value={undefined} /> -->
                    Saving...
                </span>
            </div>
        {:then update__sponsorship_obj_result}
            {#if update__sponsorship_obj_result}
            <div class="modal-loading">
                <span class="fas fa-check-circle"></span>
                <span class="loading-text">Successfully saved!</span>
            </div>
            {/if}
        {:catch error}
            <div class="modal-loading">
                <span class="fas fa-exclamation-triangle"></span>
                <span class="loading-text">Error: {error.message}</span>
            </div>
        {/await}

        <button class="btn variant-glass-primary float-end" on:click={parent.onClose}>
            <span class="fas fa-times mx-1"></span>
            Close
        </button>
    </header>


    <!-- {#if $slct.sponsorship_id && $ae_loc.mod.sponsorships.link}
    <div class="flex justify-center">
        <button
            class="btn variant-soft-secondary"
            use:clipboard={$ae_loc.mod.sponsorships.link}
            >
            <span class="fas fa-copy mx-1"></span>
            Copy link for {$slct.sponsorship_id}
        </button>

        <button
            class="btn variant-soft-secondary mx-1"
            on:click={async () => {
                if (!confirm(`Are you sure you want to send this email to ${$slct.sponsorship_obj.poc_json.email}?`)) {return false;}

                let subject = `CHOW 2024 Sponsorship Link for ${$slct.sponsorship_obj.name} (ID: ${$slct.sponsorship_id})`;
                let body_html = `<p>Name: ${$slct.sponsorship_obj.name} (Sponsorship ID: ${$slct.sponsorship_id})</p><p>Use this link to view or update your CHOW 2024 sponsorship.<p>Copy and paste link: <a href="${$ae_loc.mod.sponsorships.link}">${$ae_loc.mod.sponsorships.link}</a></p>`;

                await api.send_email({
                    api_cfg: $ae_api,
                    from_email: 'scott.idem+from@oneskyit.com',
                    from_name: 'Scott Idem',
                    to_email: $slct.sponsorship_obj.poc_json.email,
                    subject: subject,
                    body_html: body_html,
                });
                $ae_sess.mod.sponsorships.submit_status = 'sending email';


                }}
            >
            <span class="fas fa-paper-plane mx-1
                "></span>
            Send Email
        </button>
    </div>
    {/if} -->


    <TabGroup
        justify="justify-center"
        active="variant-ghost-primary"
        hover="hover:variant-soft-primary"
        flex="flex-1 lg:flex-none"
        rounded=""
        border=""
        class="bg-surface-100-800-token w-full"
        >
        <Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
            <svelte:fragment slot="lead">
                {#if $slct.sponsorship_obj.sponsorship_id_random}
                    <span class="fas fa-check text-green-500"></span>
                {/if}
                <span class="fas fa-home"></span>
            </svelte:fragment>
            <!-- Start -->
            General Info
        </Tab>
        <!-- Marketing - For social media and email Level 1 and above with other restrictions -->
        <Tab
            bind:group={$store_current_tab}
            name="tab_marketing" value={'marketing'}
            disabled={!$slct.sponsorship_id || $slct.sponsorship_obj.level_num < 1}
            regionTab={!$slct.sponsorship_id || $slct.sponsorship_obj.level_num < 1 ? 'text-slate-400' : ''}
            >
            <svelte:fragment slot="lead">
                {#if $slct.sponsorship_obj.website_url && $slct.sponsorship_obj.website_url.length > 10 && $slct.sponsorship_obj.website_url.startsWith('http')}
                    <span class="fas fa-check text-green-500"></span>
                {/if}
                <span class="fas fa-bullhorn"></span>
            </svelte:fragment>
            Marketing
        </Tab>
        <!-- Exhibit - Level 2 and above -->
        {#if $slct.sponsorship_obj.level_num >= 2}
        <Tab
            bind:group={$store_current_tab}
            name="tab_exhibit"
            value={'exhibit'}
            disabled={!$slct.sponsorship_id || $slct.sponsorship_obj.level_num < 2}
            regionTab={!$slct.sponsorship_id || $slct.sponsorship_obj.level_num < 2 ? 'text-slate-400' : ''}
            >
            <svelte:fragment slot="lead">
                {#if $slct.sponsorship_obj.questions_li_json && ($slct.sponsorship_obj.questions_li_json.table_exhibit || $slct.sponsorship_obj.questions_li_json.table_exhibit === 0)}
                    <span class="fas fa-check text-green-500"></span>
                {/if}
                <span class="fas fa-store"></span>
            </svelte:fragment>
            Exhibitor Info
        </Tab>
        {/if}

        {#if $slct.sponsorship_obj.level_num >= 3}
        <Tab
            bind:group={$store_current_tab}
            name="tab_session"
            value={'sessions'}
            disabled={!$slct.sponsorship_id || $slct.sponsorship_obj.level_num < 3}
            regionTab={!$slct.sponsorship_id || $slct.sponsorship_obj.level_num < 3 ? 'text-slate-400' : ''}
            >
            <svelte:fragment slot="lead">
                {#if $slct.sponsorship_obj.questions_li_json && ($slct.sponsorship_obj.questions_li_json.virtual_session || $slct.sponsorship_obj.questions_li_json.virtual_session === 0)}
                    <span class="fas fa-check text-green-500"></span>
                {/if}
                <span class="fas fa-chalkboard-teacher"></span>
            </svelte:fragment>
            Session Info
        </Tab>
        {/if}
        <!-- All levels with some restrictions within the section -->
        <Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.sponsorship_id}
            regionTab={!$slct.sponsorship_id ? 'text-slate-400' : ''}
            >
            <svelte:fragment slot="lead">
                {#if $slct.sponsorship_obj.logo_li_json && $slct.sponsorship_obj.logo_li_json.primary && $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random}
                    <span class="fas fa-check text-green-500"></span>
                {/if}
                <span class="fas fa-file-upload"></span>
            </svelte:fragment>
            File Uploads
        </Tab>
        <Tab bind:group={$store_current_tab} name="tab_guests" value={'guests'} disabled={!$slct.sponsorship_id}
            regionTab={!$slct.sponsorship_id ? 'text-slate-400' : ''}
            >
            <svelte:fragment slot="lead">
                {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length > 0}
                    <span class="fas fa-check text-green-500"></span>
                {/if}
                <span class="fas fa-users"></span>
            </svelte:fragment>
            Gala Guest List
        </Tab>
        <!-- <Tab bind:group={$store_current_tab} name="tab_options" value={'options'} disabled={!$slct.sponsorship_id}>
            <svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
            More
        </Tab> -->

    <!-- Tab Panels --->
	<svelte:fragment slot="panel">


    {#if $store_current_tab === 'start'}


    <section class="space-y-4">

    <h3 class="h4">CHOW 2024 Sponsor Information</h3>

    <form
        class="modal-form {$ae_loc.hub.classes__form}"
        on:submit|preventDefault={handle_submit_form}
        >
    <!-- <section class="ae_section sponsorship__contacts border border-gray-500/20 p-4"> -->

    <fieldset class="mb-8">
        <legend class="legend">Sponsorship Level</legend>

        <div class="label">
            <span class="input_required">Select sponsorship level:</span>
            {#if $slct.sponsorship_cfg_obj}
                <!-- Example JSON level_li_json:
                {
                    "1": {
                        "name": "Friend",
                        "amount": 5000
                    },
                    "2": {
                        "name": "Supporter",
                        "amount": 10000
                    },
                    "3": {
                        "name": "Advocate",
                        "amount": 15000
                    },
                    "4": {
                        "name": "Champion",
                        "amount": 20000
                    },
                    "5": {
                        "name": "Presenting Partner",
                        "amount": 30000
                    },
                    "6": {
                        "name": "Signature Partner",
                        "amount": 50000
                    },
                    "7": {
                        "name": "Premier Partner",
                        "amount": 100000
                    }
                }
                -->
                {#if $slct.sponsorship_cfg_obj && $slct.sponsorship_cfg_obj.level_li_json}
                <select
                    name="level_num"
                    bind:value={$slct.sponsorship_obj.level_num}
                    class="select variant-glass-warning"
                    readonly={$slct.sponsorship_obj.paid}
                    required
                    >
                    <option value="" selected>-- Not Selected --</option>
                    {#each Object.entries($slct.sponsorship_cfg_obj.level_li_json) as [key, value]}
                        <option value={Number(key)}>
                            {value.name}
                             <!-- - ${value.amount} -->
                            </option>
                    {/each}
                </select>
                {/if}
            {:else}
                Not found?
            {/if}
            <h3>Sponsorship Payment</h3>
            {#if $slct.sponsorship_obj.paid}
                <span class="fas fa-check-circle"></span>
                <span class="ae_value">Yes, marked as paid</span>
            {:else}
                <p class="variant-glass-error max-w-96">Deadline to complete payment: April 15, 2024</p>

                <!-- <p>Return to the <a href="https://preconvirtual.com/chow-2024-faq/#Sponsorship">CHOW Sponsor Hub for Payment Options and Instruction</a> details.</p> -->
                <p>Please refer to the sponsorship
                    <a
                        href="https://preconvirtual.com/chow-2024-faq/#Sponsorship"
                        class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                        target="_blank"
                        >
                        FAQ page on the CHOW event website
                    </a>
                for payment options.</p>
                <!-- <a href="https://example.com" class="btn variant-soft-primary m-2">
                    <span class="fas fa-credit-card mx-1"></span>
                    Go Pay Here
                </a> -->
                <!-- <span class="fas fa-times-circle"></span> -->
                <!-- <span class="ae_value">Not yet marked as paid</span> -->
            {/if}

            <!-- {#if $ae_loc.trusted_access}
            <label for="paid" class="label">
                <input
                    type="checkbox"
                    class="checkbox"
                    id="paid"
                    name="paid"
                    bind:checked={$slct.sponsorship_obj.paid}
                    >
                Mark as paid
            </label>
            {/if} -->
        </div>

        <!-- <label
            class:hidden={!$ae_loc.trusted_access}
            for="amount"
            >
            Amount?
            <div class="input-group grid-cols-[auto_1fr_auto]">
            <div class="input-group-shim">
                <span>$</span>
            </div>
            <input
                type="number"
                class="input"
                id="amount"
                name="amount"
                placeholder="Amount"
                value={$slct.sponsorship_obj.amount ? $slct.sponsorship_obj.amount/100 : ''}
                autocomplete="off"
                readonly={$slct.sponsorship_obj.paid}
                >
            </div>
        </label> -->
    </fieldset>

    <fieldset class="mb-8">
        <legend class="legend">General Information</legend>

        <label for="name" class="label">
            <span class="input_required">Name of Sponsoring Organization/Individual</span>
            <input type="text" id="name" name="name" required max="200" value={$slct.sponsorship_obj.name ?? ''} placeholder="Name of organization or person" autocomplete="off" class="input variant-glass-warning" />
            </label>

        <!-- <label class="label ae_label sponsorship__description">Short description
            <textarea name="description" id="description" class="textarea ae_value sponsorship__description tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.sponsorship_obj.description} placeholder="A short description or overview of this sponsorship."></textarea>
        </label> -->

        <!-- Collect the organization mailing address -->
        <fieldset class="mb-8 flex flex-wrap gap-4">
            <legend class="legend text-lg input_required">Mailing Address</legend>

            <label for="address_line_1" class="label max-w-64">
                <!-- Line 1 (Street) -->
                <input type="text" id="address_line_1" name="address_line_1" value={$slct.sponsorship_obj.address_li_json && $slct.sponsorship_obj.address_li_json.mailing && $slct.sponsorship_obj.address_li_json.mailing.line_1 ? $slct.sponsorship_obj.address_li_json.mailing.line_1 : ''} placeholder="Line 1 (street)" autocomplete="street-address" class="input text-xs variant-glass-warning" required />
            </label>
            <label for="address_line_2" class="label max-w-64">
                <!-- Line 2 (Suite) -->
                <input type="text" id="address_line_2" name="address_line_2" value={$slct.sponsorship_obj.address_li_json && $slct.sponsorship_obj.address_li_json.mailing && $slct.sponsorship_obj.address_li_json.mailing.line_2 ? $slct.sponsorship_obj.address_li_json.mailing.line_2 : ''} placeholder="Line 2 (suite)" autocomplete="address-line2" class="input text-xs" />
            </label>
            <label for="address_city" class="label max-w-64">
                <!-- City -->
                <input type="text" id="address_city" name="address_city" value={$slct.sponsorship_obj.address_li_json && $slct.sponsorship_obj.address_li_json.mailing && $slct.sponsorship_obj.address_li_json.mailing.city ? $slct.sponsorship_obj.address_li_json.mailing.city : ''} placeholder="City" autocomplete="address-level2" class="input text-xs variant-glass-warning" required />
            </label>
            <label for="address_state_province" class="label max-w-64">
                <!-- State/Province -->
                <input type="text" id="address_state_province" name="address_state_province" value={$slct.sponsorship_obj.address_li_json && $slct.sponsorship_obj.address_li_json.mailing && $slct.sponsorship_obj.address_li_json.mailing.state_province ? $slct.sponsorship_obj.address_li_json.mailing.state_province : ''} placeholder="State/Province" autocomplete="address-level1" class="input text-xs variant-glass-warning" required />
            </label>
            <label for="address_postal_code" class="label max-w-64">
                <!-- Postal code/Zip -->
                <input type="text" id="address_postal_code" name="address_postal_code" value={$slct.sponsorship_obj.address_li_json && $slct.sponsorship_obj.address_li_json.mailing && $slct.sponsorship_obj.address_li_json.mailing.postal_code ? $slct.sponsorship_obj.address_li_json.mailing.postal_code : ''} placeholder="Postal code/Zip" autocomplete="postal-code" class="input text-xs variant-glass-warning" required />
            </label>
            <label for="address_country" class="label max-w-64">
                <!-- Country -->
                <input type="text" id="address_country" name="address_country" value={$slct.sponsorship_obj.address_li_json && $slct.sponsorship_obj.address_li_json.mailing && $slct.sponsorship_obj.address_li_json.mailing.country ? $slct.sponsorship_obj.address_li_json.mailing.country : ''} placeholder="Country" autocomplete="country-name" class="input text-xs" />
            </label>
    </fieldset>

    <fieldset class="mb-8 flex flex-wrap gap-4">
        <legend class="legend">Point of Contact</legend>

        <label for="poc_full_name">
            <span class="input_required">Full name</span>
            <!-- <div class="input-group grid-cols-[auto_1fr_auto]">
            <div class="input-group-shim">
            {#if !$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
                <span class="fas fa-lock" title="Field is locked"></span>
            {:else}
                <span class="fas fa-unlock" title="Field is unlocked"></span>
            {/if}
            </div> -->
            <input
                type="text"
                class="input variant-glass-warning"
                id="poc_full_name" name="poc_full_name"
                placeholder="Full name"
                value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.full_name ? $slct.sponsorship_obj.poc_json.full_name : '')}
                autocomplete="name"
                readonly={!$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
                required
                >
            <!-- </div> -->
        </label>
        <label for="poc_email">
            <span class="input_required">Email</span>
            <!-- <div class="input-group grid-cols-[auto_1fr_auto]">
            <div class="input-group-shim">
            {#if !$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
                <span class="fas fa-lock" title="Field is locked"></span>
            {:else}
                <span class="fas fa-unlock" title="Field is unlocked"></span>
            {/if}
            </div> -->
            <input
                type="email"
                class="input variant-glass-warning"
                id="poc_email"
                name="poc_email"
                placeholder="Email"
                bind:value={$slct.sponsorship_obj.poc_json.email}
                autocomplete="email"
                readonly={!$ae_loc.trusted_access && $slct.sponsorship_obj.sposorship_id_random}
                required
                >
            <!-- </div> -->
        </label>

        <label for="poc_phone_mobile">Mobile phone
            <input
                type="tel"
                class="input"
                id="poc_phone_mobile"
                name="poc_phone_mobile"
                placeholder="Mobile phone"
                value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.phone_mobile ? $slct.sponsorship_obj.poc_json.phone_mobile : '')}
                autocomplete="tel"
                >
        </label>
    </fieldset>

    <fieldset class="mb-8 flex flex-wrap gap-4">
        <legend class="legend">Additional Contacts</legend>

    {#if $slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json.length}
    {#each $slct.sponsorship_obj.contact_li_json as contact, index}
    <fieldset class="border border-gray-500/20 p-4">
        <legend class="legend">
            Contact #{index + 1} -
            {contact.full_name ?? ``}
        </legend>

        <div class="flex flex-wrap gap-2 p-1">
        <label for="contact_{index}_full_name">
            <!-- Full name -->
            <input
                type="text"
                class="input text-xs variant-glass-warning"
                id="contact_{index}_full_name"
                name="contact_{index}_full_name"
                placeholder="Full name"
                value={contact.full_name ?? ``}
                autocomplete="name"
                required
                >
        </label>
        <label for="contact_{index}_email">
            <!-- Email -->
            <input
                type="email"
                class="input text-xs variant-glass-warning"
                id="contact_{index}_email"
                name="contact_{index}_email"
                placeholder="Email"
                value={contact.email}
                autocomplete="email"
                required
                >
        </label>
        <label for="contact_{index}_phone">
            <!-- Phone -->
            <input
                type="tel"
                class="input text-xs"
                id="contact_{index}_phone"
                name="contact_{index}_phone"
                placeholder="Phone"
                value={contact.phone}
                autocomplete="tel"
                >
        </label>
        </div>

        <div class="flex flex-wrap gap-2 p-1">
            <button
                type="submit"
                class="btn variant-glass-primary btn-sm"
                disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
                on:click={() => {
                    console.log('*** Save button clicked ***');
                }}
                >
                <span class="fas fa-check mx-1"></span>
                Save
            </button>

            <button
                class="btn variant-glass-warning btn-sm"
                on:click={(event) => {
                    console.log('*** Delete button clicked ***');
                    if (!confirm('Are you sure you want to delete this contact?')) {return false;}

                    $slct.sponsorship_obj.contact_li_json.splice(index, 1);
                    $slct = $slct;

                    // Now we are ready to submit the form
                    event.target.form.dispatchEvent(new Event('submit', {cancelable: true}));
                }}
                >
                <span class="fas fa-minus mx-1"></span>
                Delete
            </button>
            </div>

    </fieldset>
    {/each}

    {:else}
        <!-- <div class="ae_warning">No additional contacts found!</div> -->
    {/if}

    <div>
    <button
        class="btn btn-sm variant-glass-secondary m-2"
        on:click={() => {
            console.log('*** Add contact button clicked ***');
            // if (!confirm('Are you sure you want to add a contact?')) {return false;}

            if (!$slct.sponsorship_obj.contact_li_json) {
                $slct.sponsorship_obj.contact_li_json = [];
            }

            $slct.sponsorship_obj.contact_li_json.push({
                full_name: null,
                email: null,
                phone: null,
            });

        }}
        >
        <span class="fas fa-plus mx-1"></span>
        Add Contact
    </button>
    </div>

    </fieldset>
    <!-- </section> -->

    <!-- <fieldset class="mb-8">
        <legend class="legend">Additional Information</legend> -->

        <!-- <label for="organization_name" class="label">Name of organization/company
            <input type="text" id="organization_name" name="organization_name" required max="200" value={$slct.sponsorship_obj.organization_name ?? ''} placeholder="Name of organization/company" autocomplete="off" class="input" />
            </label> -->

        <!-- <label class="label ae_label sponsorship__description">Short description
            <textarea name="description" id="description" class="textarea ae_value sponsorship__description tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.sponsorship_obj.description} placeholder="A short description or overview of this sponsorship."></textarea>
        </label> -->



    <fieldset class="mb-8">
        <legend class="legend">Agreements & Accommodations</legend>

        <!-- {#if $ae_loc.ds['sponsorships__agree_li']}
            {$ae_loc.ds['sponsorships__agree_li'][0].code}
            {$ae_loc.ds['sponsorships__agree_li'][1].code}
        {/if} -->

        <Element_data_store
            ds_code="sponsorships__form__waiver_html"
            ds_type="html"
            for_type="sponsorship_cfg"
            for_id={$slct.sponsorship_cfg_id}
            ds_name="Default: Sponsorships Form - Waiver HTML"
            display="block"
            class_li=""
            />
        <!-- <h3 class="h4 input_required">Sponsor General Waiver</h3>
        <p class="text-sm">Proceeds from your sponsorship benefit the National Marine Sanctuary Foundation, a 501c3 nonprofit organization. Your contribution may be tax-deductible. For more information, please consult with a tax professional. All sales are final, and contributions, purchases, tickets, and sponsorships are non-refundable. As the host of CHOW, the Foundation is committed to the safety and well-being of all participants. If CHOW moves entirely to a virtual platform due to external circumstances, the Foundation will work with you to ensure that we meet your sponsor benefit needs. In the event of cancellation, your purchase becomes a tax-deductible gift.</p> -->
        <label for="agree" class="label">
            <input
                type="checkbox"
                class="checkbox variant-glass-warning"
                id="agree"
                name="agree"
                value={1}
                checked={$slct.sponsorship_obj.agree}
                required
                >
            Yes, I understand the "Sponsor General Waiver".
        </label>

        <Element_data_store
            ds_code="sponsorships__form__accomodations_html"
            ds_type="html"
            for_type="sponsorship_cfg"
            for_id={$slct.sponsorship_cfg_id}
            ds_name="Default: Sponsorships Form - Accommodations HTML"
            display="block"
            class_li=""
            />
        <!-- <h3 class="h4">Special Accommodations</h3>
        <p class="text-sm">If you require any special accommodations in order to enhance/enable your involvement with CHOW please provide details in the text box below. A member of the CHOW team will reach out to assist.</p> -->
        <!-- bind:group={$ae_loc.mod.sponsorships.show_question__accommodations} -->
        <!-- bind:group={$slct.sponsorship_obj.questions_li_json.accommodations} -->
        <label for="q_accommodations" class="label">
            <input
                type="checkbox"
                class="checkbox"
                id="q_accommodations"
                name="q_accommodations"
                value={1}
                bind:checked={$slct.sponsorship_obj.questions_li_json.accommodations}
                >
            Yes, please have a member of the CHOW team reach out for special accommodations or assistance.
        </label>

        <!-- x{$ae_loc.mod.sponsorships.show_question__accommodations}z -->
        {#if ($slct.sponsorship_obj.questions_li_json.accommodations == true)}
        <p class="text-sm">If you require any special accommodations in order to enhance/enable your involvement with CHOW please provide details in the text box below. A member of the CHOW team will reach out to assist.</p>
        <label for="accommodations_text" class="label">
            <textarea
                class="textarea"

                id="accommodations_text"
                name="accommodations_text"
                rows="5"
                cols="70"
                value={$slct.sponsorship_obj.questions_li_json && $slct.sponsorship_obj.questions_li_json.accommodations_text ? $slct.sponsorship_obj.questions_li_json.accommodations_text : ''}
                placeholder="Please provide details about any special accommodations or assistance"
                ></textarea>
        </label>
        {/if}
    </fieldset>

    <!-- <button
        type="submit"
        class="btn variant-glass-primary m-2"
        class:hidden={$slct.sponsorship_obj.poc_json && !$slct.sponsorship_obj.poc_json.email}
        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
        on:click={() => {
            console.log('*** Start save and email button clicked ***');
            if (!confirm(`This will save your sponsorship information so far and a confirmation email will be sent to ${$slct.sponsorship_obj.poc_json.email}.`)) {return false;}

            send_init_confirm_email();
            }}
            >
        <span class="fas fa-envelope mx-1"></span>
        Save and email
    </button> -->

    <button
        type="submit"
        class="btn variant-glass-primary m-2"
        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
        on:click={() => {
            console.log('*** Start save and continue button clicked ***');
            if (!$slct.sponsorship_obj.poc_json.email) {
                if (alert(`You have not entered an email address.`)) {return false;}
            }

            if ($slct.sponsorship_obj.updated_on) {
                if (confirm(`Would you like an email with a link back to this for be sent to you at ${$slct.sponsorship_obj.poc_json.email}? Your information will be saved either way.`)) {
                    send_init_confirm_email();
                } else {
                    return false;
                }
            }
        }}
        >
        <span class="fas fa-check mx-1"></span>
        Save and continue
    </button>

    </form>

    </section>


    {:else if $store_current_tab === 'marketing'}


    <form
        class="modal-form {$ae_loc.hub.classes__form}"
        on:submit|preventDefault={handle_submit_form}
        >

    <h3 class="h4">Website and Social Media</h3>
    <fieldset class="sponsorship__website_url space-y-4">
        <legend class="legend input_required">Organization website URL:</legend>

        <label for="website_url" class="label">
            <!-- Website URL -->
            <input type="url" id="website_url" name="website_url" class="input text-xs w-96 variant-glass-warning" placeholder="Website URL (https://example.org)" bind:value={$slct.sponsorship_obj.website_url} autocomplete="url" required />
        </label>

        <p class="text-xs italic variant-glass-tertiary max-w-96">The URLs should begin with "https://" or "http://"</p>
    </fieldset>

    <!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
    <fieldset class="sponsorship__social_media space-y-4">
        <legend class="legend">Social Media:</legend>

        <label for="social_media_facebook" class="label">
            <!-- Facebook -->
            <input type="url" id="social_media_facebook" name="social_media_facebook" class="input text-xs w-96" placeholder="Facebook" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.facebook ? $slct.sponsorship_obj.social_li_json.facebook : ''} autocomplete="url" />
        </label>
        <label for="social_media_instagram" class="label">
            <!-- Instagram -->
            <input type="url" id="social_media_instagram" name="social_media_instagram" class="input text-xs w-96" placeholder="Instagram" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.instagram ? $slct.sponsorship_obj.social_li_json.instagram : ''} autocomplete="url" />
        </label>
        <label for="social_media_linkedin" class="label">
            <!-- LinkedIn -->
            <input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input text-xs w-96" placeholder="LinkedIn" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.linkedin ? $slct.sponsorship_obj.social_li_json.linkedin : ''} autocomplete="url" />
        </label>
        <label for="social_media_twitter" class="label">
            <!-- X (Twitter) -->
            <input type="url" id="social_media_twitter" name="social_media_twitter" class="input text-xs w-96" placeholder="X (Twitter)" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.twitter ? $slct.sponsorship_obj.social_li_json.twitter : ''} autocomplete="url" />
        </label>
    </fieldset>


    <h3 class="h4 input_required">Public Recognition</h3>
    <label for="q_public_recognition" class="label">
    <div>Would you like public reognition at CHOW?</div>
    <div class="space-y-2">
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_public_recognition"
                value={1}
                required
                bind:group={$slct.sponsorship_obj.questions_li_json.public_recognition}
                />
            <span class="fas fa-check"></span>
            <span>Yes, please recognize me publicly as a CHOW sponsor (logo/name on website).</span>
        </label>
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_public_recognition"
                value={0}
                bind:group={$slct.sponsorship_obj.questions_li_json.public_recognition}
                />
            <span class="fas fa-times"></span>
            <span>No, I wish to remain an anonymous sponsor. Please DO NOT recognize me publicly.</span>
        </label>
    </div>
    </label>

    {#if $slct.sponsorship_obj.level_num >= 4}
    <h3 class="h4 input_required">Social Media &amp; Email Inclusion</h3>
    <label for="q_social_email" class="label">
    <div>Would you like social and email inclusion at CHOW?</div>
    <div class="space-y-2">
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_social_email"
                value={1}
                required
                bind:group={$slct.sponsorship_obj.questions_li_json.social_email}
                />
            <span class="fas fa-check"></span>
            <span>Yes, we would like to be included in general CHOW social media and email communications.</span>
        </label>
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_social_email"
                value={0}
                bind:group={$slct.sponsorship_obj.questions_li_json.social_email}
                />
            <span class="fas fa-times"></span>
            <span>No, we would NOT like to be included in general CHOW social media and email communications.</span>
        </label>
    </div>
    </label>
    {/if}

    {#if $slct.sponsorship_obj.level_num >= 6}
    <h3 class="h4 input_required">Dedicated Social Promos</h3>
    <label for="q_dedicated_promos" class="label">
    <div>Would you like dedicated social media promotions at CHOW?</div>
    <div class="space-y-2">
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_dedicated_promos"
                value={1}
                required
                bind:group={$slct.sponsorship_obj.questions_li_json.dedicated_promos}
                />
            <span class="fas fa-check"></span>
            <span>Yes, we would like to take advantage of dedicated social media and email promotion.</span>
        </label>
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_dedicated_promos"
                value={0}
                bind:group={$slct.sponsorship_obj.questions_li_json.dedicated_promos}
                />
            <span class="fas fa-times"></span>
            <span>No, we would do NOT want to take advantage of dedicated social media and email promotion.</span>
        </label>
    </div>
    </label>
    {/if}

    <button
        type="submit"
        class="btn variant-glass-primary m-2"
        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
        on:click={() => {
            console.log('*** Save marketing button clicked ***');
        }}
        >
        <span class="fas fa-check mx-1"></span>
        Save and continue
    </button>

    </form>


    {:else if $store_current_tab === 'exhibit'}


    <form
        class="modal-form {$ae_loc.hub.classes__form}"
        on:submit|preventDefault={handle_submit_form}
        >

    <h3 class="h4">Exhibit Booth Information</h3>
    <Element_data_store
            ds_code="sponsorships__form__exhibit_booth_info_html"
            ds_type="html"
            for_type="sponsorship_cfg"
            for_id={$slct.sponsorship_cfg_id}
            ds_name="Default: Sponsorships Form - Exhibit Booth Information HTML"
            display="block"
            class_li=""
            />

    <!-- <div class="text-sm space-y-4">
    <p>Booth space is limited. Please select below if you would like to have a table top exhibit at CHOW.</p>

    <p>Booth specifications: Exhibit space is six feet wide by 3 feet deep. 10-feet-wide booth backdrops are not allowed. Banner signage or pop-up stands must fit behind the table in the 6-feet-wide space or on top of the table. Your space will include a six-foot skirted table and 2 chairs.</p>
    </div> -->

    <div class="space-y-2">
        <label for="q_table_exhibit" class="label">
        <div class="font-bold input_required">Would you like a table top exhibit at CHOW?</div>
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_table_exhibit"
                value={1}
                required
                bind:group={$slct.sponsorship_obj.questions_li_json.table_exhibit}
                />
            <span class="fas fa-check"></span>
            <span>Yes, we would like to exhibit.</span>
        </label>
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_table_exhibit"
                value={0}
                bind:group={$slct.sponsorship_obj.questions_li_json.table_exhibit}
                />
            <span class="fas fa-times"></span>
            <span>No, we will NOT exhibit.</span>
        </label>
        </label>
    </div>

    <div class="space-y-2">
        <div class="font-bold">Do you require power for your table top booth?</div>
        <label class="flex items-center space-x-2">
            <input
                class="radio"
                type="radio"
                name="q_table_power"
                value={1}
                bind:group={$slct.sponsorship_obj.questions_li_json.table_power}
                />
            <span class="fas fa-check"></span>
            <span>Yes, we require power.</span>
        </label>
        <label class="flex items-center space-x-2">
            <input
                class="radio"
                type="radio"
                name="q_table_power"
                value={0}
                bind:group={$slct.sponsorship_obj.questions_li_json.table_power}
                />
            <span class="fas fa-times"></span>
            <span>No, we do not require power.</span>
        </label>
    </div>

    <button
        type="submit"
        class="btn variant-glass-primary"
        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
        on:click={() => {
            console.log('*** Save button clicked ***');
        }}
        >
        <span class="fas fa-check mx-1"></span>
        Save and continue
    </button>

    </form>


    {:else if $store_current_tab === 'sessions'}

    <form
        class="modal-form {$ae_loc.hub.classes__form}"
        on:submit|preventDefault={handle_submit_form}
        >

    <h2 class="h3">Session Information</h2>

    <fieldset
        class="mb-8 space-y-4"
        class:hidden={$slct.sponsorship_obj.level_num < 4}
        >
        <legend class="legend">Plenary Session</legend>

    <Element_data_store
        ds_code="sponsorships__form__plenary_session_info_html"
        ds_type="html"
        for_type="sponsorship_cfg"
        for_id={$slct.sponsorship_cfg_id}
        ds_name="Default: Sponsorships Form - Plenary Session Information HTML"
        display="block"
        class_li=""
        />
    <!-- <div class="text-sm space-y-4">
        <p>Plenary sessions are available on a limited basis.</p>

        <p>If you select "Yes", our CHOW Manager, Shannon Colbert will review your selection and be in touch with more details.</p>
    </div> -->
    <div class="font-bold input_required">Are you interested in hosting a CHOW plenary session?</div>
    <div class="space-y-2">
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_plenary_session"
                value={1}
                bind:group={$slct.sponsorship_obj.questions_li_json.plenary_session}
                required
                />
                <span class="fas fa-check"></span>
                <span>Yes, we are interested in hosting a plenary session.</span>
        </label>
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_plenary_session"
                value={0}
                bind:group={$slct.sponsorship_obj.questions_li_json.plenary_session}
                />
                <span class="fas fa-times"></span>
                <span>No, we are NOT interested in hosting a plenary session.</span>
        </label>
    </div>

    <div class="space-y-4">
        <div class="text-sm space-y-4">
        <p>As a Plenary Session Sponsor, you will have the opportunity to provide opening remarks during a CHOW plenary session. Opening remarks are typically between 3-5 minutes. Please contact Shannon Colbert to confirm your plenary session and discuss logistics.</p>
        <p class="text-sm">If you select "Yes", our CHOW Manager, Shannon Colbert will review your selection and be in touch with more details.</p>
        </div>

        <div class="font-bold input_required">Are you interested in hosting the CHOW 2024 Opening Remarks at a Plenary Session?</div>
        <div class="space-y-2">
            <label class="flex items-center space-x-2">
                <input
                    class="radio variant-glass-warning"
                    type="radio"
                    name="q_plenary_opening"
                    value={1}
                    bind:group={$slct.sponsorship_obj.questions_li_json.plenary_opening}
                    required
                    />
                <span class="fas fa-check"></span>
                <span>Yes, we are interested in opening remarks.</span>
            </label>
            <label class="flex items-center space-x-2">
                <input
                    class="radio variant-glass-warning"
                    type="radio"
                    name="q_plenary_opening"
                    value={0}
                    bind:group={$slct.sponsorship_obj.questions_li_json.plenary_opening}
                    />
                <span class="fas fa-times"></span>
                <span>No, we are NOT interested in opening remarks.</span>
            </label>
        </div>
    </div>

    </fieldset>

    <fieldset class="mb-8 space-y-2">
        <legend class="legend">Virtual Session</legend>

    <Element_data_store
        ds_code="sponsorships__form__virtual_session_info_html"
        ds_type="html"
        for_type="sponsorship_cfg"
        for_id={$slct.sponsorship_cfg_id}
        ds_name="Default: Sponsorships Form - Virtual Session Information HTML"
        display="block"
        class_li=""
        />
    <!-- <div class="text-sm space-y-4">
    <p>General Information: Virtual sessions are a collaborative process, and the Foundation will have final approval on session topics and speakers. Hosted sessions should align with key priorities related to CHOW 2024's theme 'LEADERSHIP'. Partner organizations will develop and host a live, 45-minute session using Zoom (link provided by the Foundation). The session will be integrated into the CHOW 2024 virtual platform for conference attendees to join.</p>

    <p>Virtual sessions are available on a limited basis.</p>

    <p>If you select "Yes", our CHOW Manager, Shannon Colbert will review your selection and be in touch with more details. Once confirmed, a draft session form must be submitted by Thursday, April 13 and a final session form must be submitted no later than Thursday, May 4.</p>
    </div> -->
    <div class="font-bold input_required">Are you interested in hosting a CHOW virtual session?</div>
    <div class="space-y-2">
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_virtual_session"
                value={1}
                bind:group={$slct.sponsorship_obj.questions_li_json.virtual_session}
                required
                />
            <span class="fas fa-check"></span>
            <span>Yes, we are interested in hosting a virtual session.</span>
        </label>
        <label class="flex items-center space-x-2">
            <input
                class="radio variant-glass-warning"
                type="radio"
                name="q_virtual_session"
                value={0}
                bind:group={$slct.sponsorship_obj.questions_li_json.virtual_session}
                />
            <span class="fas fa-times"></span>
            <span>No, we are NOT interested in hosting a virtual session.</span>
        </label>
    </div>

    </fieldset>

    <button
        type="submit"
        class="btn variant-glass-primary"
        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
        on:click={() => {
            console.log('*** Save button clicked ***');
        }}
        >
        <span class="fas fa-check mx-1"></span>
        Save and continue
    </button>

    </form>


    {:else if $store_current_tab === 'files'}


    <form
        class="modal-form {$ae_loc.hub.classes__form}"
        on:submit|preventDefault={handle_submit_form_files}
        >

    <section class="space-y-4">
        <h2 class="h3">Logos</h2>

        <Element_data_store
            ds_code="sponsorships__form__logos_info_html"
            ds_type="html"
            for_type="sponsorship_cfg"
            for_id={$slct.sponsorship_cfg_id}
            ds_name="Default: Sponsorships Form - Logos Information HTML"
            display="block"
            class_li="hidden"
            />

        <div class="flex flex-wrap gap-4">

        <span class="flex flex-col justify-between basis-2/5">
        <h3 class="h4 input_required">Default color logo</h3>
        <label for="file_logo_primary">
            Upload a the standard default or primary version of your logo.
            <FileDropzone
                id="file_logo_primary"
                name="file_logo_primary"
                padding="p-1"
                accept="image/*"
                class="w-96 variant-glass-warning"
                required={!$slct.sponsorship_obj.logo_li_json}
                on:change={(e) => {
                    console.log('*** FileDropzone change event ***', e);

                    if (e.target.files.length) {
                        placeholder_li.file_logo_primary = `Ready to upload: ${e.target.files[0].name}`;
                    } else {
                        placeholder_li.file_logo_primary = 'No files selected.';
                    }
                }}
                >
                <svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
                <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                <svelte:fragment slot="meta">High resolution and vector image files only<br>(PNG, WEBP, SVG, JPG, Illustrator, etc)</svelte:fragment>
            </FileDropzone>
        </label>
        {@html placeholder_li.file_logo_primary}
        </span>

        <span class="flex flex-col justify-between basis-2/5">
        <h3 class="h4">Light logo for dark backgrounds (KO or Knockout)</h3>
        <label for="file_logo_light">
            Upload a light version of your logo for use with dark backgrounds. These are sometimes called knockout logos.
            <FileDropzone
                id="file_logo_light"
                name="file_logo_light"
                padding="p-1"
                accept="image/*"
                class="w-96"
                on:change={(e) => {
                    console.log('*** FileDropzone change event ***', e);

                    if (e.target.files.length) {
                        placeholder_li.file_logo_light = `Ready to upload: ${e.target.files[0].name}`;
                    } else {
                        placeholder_li.file_logo_light = 'No files selected.';
                    }
                }}
                >
                <svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
                <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                <svelte:fragment slot="meta">High resolution and vector image files only<br>(PNG, WEBP, SVG, JPG, Illustrator, etc)</svelte:fragment>
            </FileDropzone>
        </label>
        {@html placeholder_li.file_logo_light}
        </span>

        <span class="flex flex-col justify-between basis-2/5">
        <h3 class="h4">Dark logo for light backgrounds</h3>
        <label for="file_logo_dark">
            Upload a dark version of your logo for use with light backgrounds. This may be the same as your default logo.
            <FileDropzone
                id="file_logo_dark"
                name="file_logo_dark"
                padding="p-1"
                accept="image/*"
                class="w-96"
                on:change={(e) => {
                    console.log('*** FileDropzone change event ***', e);

                    if (e.target.files.length) {
                        placeholder_li.file_logo_dark = `Ready to upload: ${e.target.files[0].name}`;
                    } else {
                        placeholder_li.file_logo_dark = 'No files selected.';
                    }
                }}
                >
                <svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
                <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                <svelte:fragment slot="meta">High resolution and vector image files only<br>(PNG, WEBP, SVG, JPG, Illustrator, etc)</svelte:fragment>
            </FileDropzone>
        </label>
        {@html placeholder_li.file_logo_dark}
        </span>

        </div>
    </section>

    <section class="space-y-4">
        <!-- CHOW: 5 = Presenting Partner and above -->
        {#if $slct.sponsorship_obj.level_num >= 5}
        <hr class="border border-gray-500/20" />

        <h2 class="h3">Promo video</h2>
        <Element_data_store
            ds_code="sponsorships__form__promo_info_html"
            ds_type="html"
            for_type="sponsorship_cfg"
            for_id={$slct.sponsorship_cfg_id}
            ds_name="Default: Sponsorships Form - Promo Information HTML"
            display="block"
            class_li=""
            />
        <!-- <div class="text-sm space-y-4">
        <p>Add your 30 to 60 second promotional video here. This video will play during Capitol Hill Ocean Week.</p>
        <p class="variant-glass-warning">Submission Deadline: Wednesday, May 24</p>
        <div>Recommend specs:
        <ul class="list-disc list-inside">
            <li>30 to 60 seconds</li>
            <li>1080p (1920x1080)</li>
            <li>Horizontal or landscape format</li>
            <li>Most common types: MP4, MKV, MOV</li>
            <li>Max file size: 400 MB</li>
        </ul>
        </div>
        </div> -->
        <span class="flex flex-col justify-between">
        <label for="file_media_promo_video">
            Upload your short second promotional video.
            <FileDropzone
                id="file_media_promo_video"
                name="file_media_promo_video"
                padding="p-1"
                accept="video/*"
                class="w-96"
                on:change={(e) => {
                    console.log('*** FileDropzone change event ***', e);

                    if (e.target.files.length) {
                        placeholder_li.file_media_promo_video = `Ready to upload: ${e.target.files[0].name}`;
                    } else {
                        placeholder_li.file_media_promo_video = 'No files selected.';
                    }
                }}
                >
                <svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
                <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                <svelte:fragment slot="meta">Video file types only (MP4, MKV, MOV, etc)</svelte:fragment>
            </FileDropzone>
        </label>
        {@html placeholder_li.file_media_promo_video}
        </span>
        {/if}

    </section>

    <button
        type="submit"
        class="btn variant-glass-primary"
        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
        on:click={() => {
            console.log('*** Save button clicked ***');
        }}
        >
        <span class="fas fa-check mx-1"></span>
        Save and continue
    </button>

    </form>


    {:else if $store_current_tab === 'guests'}


    <section class="guests">

    <h2 class="h3">Ocean Awards Gala Guests</h2>
    <div class="text-sm space-y-4">
    <!-- These are the guests that will be attending the Ocean Awards Gala.  -->
    {#if $slct.sponsorship_obj.level_num < 1}
        <p class="variant-glass-error">Please select a sponsorship level before adding guests.</p>
    {:else}
        <p class="">Included in your sponsorship are <strong>{$ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num]} seats (
            {$ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num] == 4 ? 'half table' : ''}
            {$ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num] == 8 ? 'one table' : ''}
            {$ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num] == 16 ? 'two tables' : ''}
        )</strong> at the 2024 Oceans Award Gala. The maximum number is based on your currently selected sponsorship level.</p>
        <p>
            Submit RSVPs below. You will have the opportunity to add and update names at a later date.
        </p>
        <p class="variant-glass-error max-w-96">Deadline to submit RSVPs is May 15, 2024.</p>
    {/if}
    </div>

    {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length >= $ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num]}
        <div class="variant-glass-warning"><span class="fas fa-lock mx-1"></span> Max! You have reached the maximum number of guests for your selected sponsorship level.</div>
        <!-- <span class="fas fa-lock mx-1"></span> -->
    {:else}

    <button
        class="btn btn-sm variant-glass-secondary m-2"
        on:click={() => {
            console.log('*** Add guest button clicked ***');
            // if (!confirm('Are you sure you want to add a guest?')) {return false;}

            console.log($slct.sponsorship_obj.guest_li_json);

            if (!$slct.sponsorship_obj.guest_li_json) {
                $slct.sponsorship_obj.guest_li_json = [];
            }

            $slct.sponsorship_obj.guest_li_json.push({
                given_name: null,
                family_name: null,
                // full_name: 'New Guest',
                // email: null,
                // phone_mobile: null,
                // phone_office: null,
                // city: null,
                title: null,
                affiliations: null,
                ada: null,
                dietary: null,
            });

            $slct = $slct;

            // Scroll to the end of the page
            // window.scrollTo({bottom: document.body.scrollHeight, behavior: 'smooth'});

            // Set focus to new guest below
            // document.getElementById(`guest_${$slct.sponsorship_obj.guest_li_json.length - 1}`).focus();
          }}
        >
        <span class="fas fa-plus mx-1"></span>
        Add New Guest
    </button>
    {/if}

    {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length}

    <form
        class="modal-form border border-surface-200 p-2 space-y-2 rounded-container-token"
        on:submit|preventDefault={handle_submit_form}
        >
    <!-- {#each $slct.sponsorship_obj.guest_li_json.slice().reverse() as guest, index} -->
    {#each $slct.sponsorship_obj.guest_li_json as guest, index}

    <!-- class:variant-soft-error={!$slct.sponsorship_obj.guest_li_json[index].given_name} -->
    <fieldset
        id="guest_{index}"
        class="border border-gray-500/20 p-1"
        class:variant-soft-error={!guest.given_name}
        >
        <legend class="legend">
            Guest #{index+1}
            <!-- {$slct.sponsorship_obj.guest_li_json.length - index} -->
            -
            <!-- {guest.full_name ?? `${guest.given_name} ${guest.family_name}`} -->
            {guest.given_name ?? '-- New Guest --'}
            {guest.family_name ?? ''}
        </legend>
        <div class="flex flex-wrap gap-2 p-1">
        <label for="guest_{index}_given_name" class="label max-w-64">
            <!-- Given name -->
            <input
                type="text"
                class="input text-xs variant-glass-warning"

                id="guest_{index}_given_name"
                name="guest_{index}_given_name"
                placeholder="First name"
                value={guest.given_name ?? ''}
                autocomplete="name"
                required
                class:variant-soft-error={!guest.given_name}
                >
        </label>
        <label for="guest_{index}_family_name" class="label max-w-64">
            <!-- Family name -->
            <input
                type="text"
                class="input text-xs variant-glass-warning"

                id="guest_{index}_family_name"
                name="guest_{index}_family_name"
                placeholder="Last name"
                value={guest.family_name ?? ''}
                autocomplete="off"
                required
                class:variant-soft-error={!guest.family_name}
                >
        </label>
        <label for="guest_{index}_title" class="label max-w-64">
            <!-- Title -->
            <input type="text" class="input text-xs" id="guest_{index}_title" name="guest_{index}_title" placeholder="Title" value={guest.title ?? ''} autocomplete="honorific-prefix">
        </label>
        <label for="guest_{index}_affiliations" class="label max-w-64">
            <!-- Affiliations -->
            <input type="text" class="input text-xs" id="guest_{index}_affiliations" name="guest_{index}_affiliations" placeholder="Affiliations" value={guest.affiliations ?? ''} autocomplete="organization">
        </label>
        <!-- <label for="guest_{index}_email" class="label max-w-64">
            Email
            <input type="email" class="input text-xs" id="guest_{index}_email" name="guest_{index}_email" placeholder="Email" value={guest.email ?? ''} autocomplete="email">
        </label> -->
        </div>

        <div class="flex flex-wrap gap-2 p-1">
            <label for="guest_{index}_ada" class="label max-w-64">
                <span class="text-sm">ADA Accommodations</span>
                <select
                    class="select text-xs"
                    id="guest_{index}_ada"
                    name="guest_{index}_ada"
                    value={guest.ada}
                    >
                    <option value="">-- None --</option>
                    <option value="mobility">Mobility</option>
                    <option value="hearing">Hearing</option>
                    <option value="vision">Vision</option>
                    <option value="other">Other</option>
                </select>
            </label>
            <label for="guest_{index}_dietary" class="label max-w-64">
                <span class="text-sm">Dietary Requirements</span>
                <select
                    class="select text-xs"
                    id="guest_{index}_dietary"
                    name="guest_{index}_dietary"
                    value={guest.dietary}
                    >
                    <option value="">-- None --</option>
                    <option value="vegetarian">Vegetarian</option>
                    <option value="vegan">Vegan</option>
                    <option value="gluten-free">Gluten-free</option>
                    <option value="dairy-free">Dairy-free</option>
                    <option value="other">Other</option>
                </select>
            </label>
            <label for="guest_{index}_comments" class="label max-w-64">
                <span class="text-sm">Additional information</span>
                <input
                    type="text"
                    class="input text-xs"
                    id="guest_{index}_comments"
                    name="guest_{index}_comments"
                    placeholder="Additional information"
                    value={guest.comments ?? ''}
                    autocomplete="off"
                    >
            </label>
        </div>

        <!-- <div class="flex flex-wrap gap-2 p-1"> -->
        <!-- <label for="guest_{index}_phone_mobile" class="label max-w-64">
            Mobile phone
            <input type="tel" class="input text-xs" id="guest_{index}_phone_mobile" name="guest_{index}_phone_mobile" placeholder="Mobile phone" value={guest.phone_mobile ?? ''} autocomplete="tel">
        </label> -->
        <!-- <label for="guest_{index}_phone_office" class="label max-w-64">Office phone
            <input type="tel" class="input text-xs" id="guest_{index}_phone_office" name="guest_{index}_phone_office" placeholder="Office phone" value={guest.phone_office ?? ''} autocomplete="tel">
        </label> -->
        <!-- <label for="guest_{index}_city" class="label max-w-64">
            City
            <input type="text" class="input text-xs" id="guest_{index}_city" name="guest_{index}_city" placeholder="City" value={guest.city ?? ''} autocomplete="city">
        </label> -->
        <!-- </div> -->

        <div class="flex flex-wrap gap-2 p-1">
        <button
            type="submit"
            class="btn variant-glass-primary btn-sm"
            disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
            on:click={() => {
                console.log('*** Save button clicked ***');
                // if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
                // handle_submit_form();
                // handle_submit_form;
            }}
            >
            <span class="fas fa-check mx-1"></span>
            Save
        </button>

        <button
            class="btn variant-glass-warning btn-sm"
            on:click={(event) => {
                console.log('*** Delete button clicked ***');
                if (!confirm('Are you sure you want to delete this guest?')) {return false;}

                // Remove the guest from the list based on the index.
                $slct.sponsorship_obj.guest_li_json.splice(index, 1);

                $slct = $slct;

                // Now we are ready to submit the form
                // event.target.form.dispatchEvent(new Event('submit', {cancelable: true}));
            }}
            >
            <span class="fas fa-minus mx-1"></span>
            Delete
        </button>
        </div>

    </fieldset>

    {/each}
    </form>

    {:else}
        <!-- <div class="ae_warning">No guest list found!</div> -->
    {/if}

    </section>



    <!-- BEGING: Not currently used section -->
    {:else if $store_current_tab === 'options'}


    <form
        class="modal-form {$ae_loc.hub.classes__form}"
        on:submit|preventDefault={handle_submit_form}
        >

    <fieldset class="sponsorship__more_questions">
        <legend class="legend">More Questions</legend>

        <label for="question" class="label">This is another question?
            <div class="label">
            <input
                type="text"
                class="input"
                id="question"
                name="question"
                placeholder="The answer!"
                value={$slct.sponsorship_obj.question ?? ''}
                autocomplete="off"
                readonly={$ae_loc.trusted_access}
                required
                >
            </div>
        </label>

        <label class="label ae_label sponsorship__comments">Comments
            <textarea name="comments" id="comments" class="textarea ae_value sponsorship__comments tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.sponsorship_obj.comments} placeholder="Any comments or questions about sponsorship."></textarea>
        </label>
    </fieldset>

    <button
        type="submit"
        class="btn {parent.buttonPositive}"
        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
        on:click={() => {
            console.log('*** Save more button clicked ***');
            // if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
            // handle_submit_form();
            // handle_submit_form;
        }}
        >
        <span class="fas fa-check mx-1"></span>
        Save
    </button>

    </form>
    <!-- END: Not currently used section -->

    {/if}

    </svelte:fragment>
    </TabGroup>

    <!-- </form> -->

    <footer class="{parent.regionFooter}">
        {#if $slct.sponsorship_id}
        <!-- {#if $ae_loc.trusted_access} -->
        <span class="ae_actions">
        <button
            on:click={() => {
                if (!confirm('CURRENTLY DISABLED: Are you sure you want to delete this sponsorship?')) {return false;}
                // handle_delete_sponsorship_obj({sponsorship_id: $slct.sponsorship_id, method: 'delete'});

                // $slct.sponsorship_id = null;
                // $slct.sponsorship_obj = {};
            }}
            class="btn btn-sm variant-glass-warning mx-1"
            class:hidden={!$ae_loc.administrator_access}
            title="CURRENTLY DISABLED: Delete record permanently"
            >
            <span class="fas fa-minus mx-1"></span> Delete
        </button>

        <button
            class="btn btn-sm variant-soft-secondary mx-1"
            use:clipboard={$ae_loc.mod.sponsorships.link}
            title={`Copy link to this sponsorship submission (ID: ${$slct.sponsorship_id})`}
            >
            <span class="fas fa-copy mx-1"></span>
            Copy link for sponsor submission
        </button>

        <button
            class="btn btn-sm variant-soft-secondary mx-1"
            disabled={($slct.sponsorship_obj.poc_json && !$slct.sponsorship_obj.poc_json.email)}
            title="Send confirmation email to POC"
            on:click={async () => {
                if (!confirm(`Are you sure you want to send this email to ${$slct.sponsorship_obj.poc_json.email}?`)) {return false;}

                $ae_sess.mod.sponsorships.submit_status = 'sending email';
                send_confirm_email();
                }}
            >
            <span class="fas fa-paper-plane mx-1
                "></span>
            Send Confirmation Email
        </button>
        </span>
        {/if}


        {#if $ae_sess.mod.sponsorships.submit_status == 'saving'}
            <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
        {:else if $ae_sess.mod.sponsorships.submit_status == 'saved'}
            <div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div>
        {:else}
            <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
        {/if}

        {#await ae_promises.update__sponsorship_obj}
            <div class="modal-loading">
                <span class="fas fa-spinner fa-spin"></span>
                <span class="loading-text">
                    <!-- <ProgressRadial value={undefined} /> -->
                    Saving...
                </span>
            </div>
        {:then update__sponsorship_obj_result}
            {#if update__sponsorship_obj_result}
            <div class="modal-loading">
                <span class="fas fa-check-circle"></span>
                <span class="loading-text">Successfully saved!</span>
            </div>
            {/if}
        {:catch error}
            <div class="modal-loading">
                <span class="fas fa-exclamation-triangle"></span>
                <span class="loading-text">Error: {error.message}</span>
            </div>
        {/await}

        <button class="btn variant-glass-primary" on:click={parent.onClose}>
            <span class="fas fa-times mx-1"></span>
            Close
        </button>

        <!-- {#if $slct.sponsorship_id}
            <button
                type="submit"
                class="btn {parent.buttonPositive}"
                disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
                on:click={() => {
                    console.log('*** Save button clicked ***');
                    if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
                    handle_submit_form();
                }}
                >
                <span class="fas fa-check mx-1"></span>
                Save
            </button>
        {:else}
            <button
                type="submit"
                class="ae_btn btn_primary"
                disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
                on:click={() => {
                    if (!confirm('Are you sure you want to create this sponsorship?')) {return false;}
                }}
                >
                <span class="fas fa-plus mx-1"></span>
                Save New Event
            </button>
        {/if} -->
    </footer>
</div>
{/if}


<style>
</style>
