<script lang="ts">
import { createEventDispatcher, afterUpdate, onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition';

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 { ae, api } from 'aether_npm_lib';
// import { slct, slct_trigger, ae_loc } from './stores';
// import App from './App.svelte';

export let container_class_li: string[] = [];

const dispatch = createEventDispatcher();

type key_val = {
    [key: string]: any;
};

let create_sponsorship_obj_promise: any;
let delete_sponsorship_obj_promise: any;
let update_sponsorship_obj_promise: any;

let disable_submit_btn = true;

let sponsorship_location_select_option_li = {}; // This is a list (dict) of key value pairs

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';
    disable_submit_btn = false;
} else {
    $slct.sponsorship_id = null;
    $slct.sponsorship_obj = {
        account_id_random: $ae_loc.account_id,

        sponsorship_cfg_id_random: $ae_loc.mod.sponsorship_cfg_id,

        name: null,
        description: null,

        poc_email_name: null,
        poc_email: null,

        organization_json: null,
        person_json: null,
        poc_json: null,

        logo_li_json: null,
        media_li_json: null,
        social_li_json: null,
        guest_li_json: null,

        level_num: null,
        level_str: null,

        slct_level_json: null,
        slct_option_li_json: null,

        amount: null,
        paid: null,

        access_key: null,

        comments: null,

        cfg_json: null,
        meta_data: null,

        sort: null,
        notes: null,
    };
    console.log(`Sponsorship Object started: ${$slct.sponsorship_obj}`);
}

if ($ae_loc.lu_time_zone_list && $ae_loc.lu_time_zone_list.length > 0) {
    // console.log('Already have time zone list!', $ae_loc.lu_time_zone_list);
} else {
    console.log('No time zone list');

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

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

if ($ae_loc.lu_country_list && $ae_loc.lu_country_list.length > 0) {
    // console.log('Already have country list!', $ae_loc.lu_country_list);
} else {
    console.log('No country list');

    let lu_country_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: 'lu', // "lu" = a lookup table
        for_obj_type: 'country',
        enabled: null,
        hidden: null,
        // order_by_li: {'sort': 'DESC', 'english_short_name': 'ASC'},
        log_lvl: 1
        })

    .then(function (lu_country_li_get_result) {
        if (lu_country_li_get_result) {
            $ae_loc.lu_country_list = lu_country_li_get_result;
            console.log(`Country list:`, $ae_loc.lu_country_list);
            console.log($ae_loc.lu_country_list[0]);
            console.log($ae_loc.lu_country_list[10]);
        } else {
            console.log(`No countries returned!`);
            $ae_loc.lu_country_list = [];
        }
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    });
}

if ($ae_loc.lu_country_subdivision_list && $ae_loc.lu_country_subdivision_list.length > 0) {
    // console.log('Already have country subdivision list!', $ae_loc.lu_country_subdivision_list);
} else {
    console.log('No country subdivision list');

    let lu_country_subdivision_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: 'lu', // "lu" = a lookup table
        for_obj_type: 'country_subdivision',
        enabled: null,
        hidden: null,
        // order_by_li: {'sort': 'DESC', 'english_short_name': 'ASC'},
        log_lvl: 1
        })

    .then(function (lu_country_subdivision_li_get_result) {
        if (lu_country_subdivision_li_get_result) {
            $ae_loc.lu_country_subdivision_list = lu_country_subdivision_li_get_result;
            console.log(`Country subdivision list:`, $ae_loc.lu_country_subdivision_list);
            console.log($ae_loc.lu_country_subdivision_list[0]);
            console.log($ae_loc.lu_country_subdivision_list[10]);
        } else {
            console.log(`No country subdivisions returned!`);
            $ae_loc.lu_country_subdivision_list = [];
        }
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    });
}


onMount(() => {
    console.log('** Component Mounted: ** Edit - Sponsorship Obj');
    // tinymce_remove(); // This seems to fix rendering issues
    // tinymce_init();
});

onDestroy(() => {
    console.log('** Component Destroyed: ** Edit - Sponsorship Obj');
    // tinymce_remove(); // This seems like the right thing to do
});

// afterUpdate(() => {
//     console.log('** Component Updated: ** Edit - Sponsorship Obj');
//     tinymce_init();
// });

// function tinymce_init() {
//     // REFERENCE: https://www.tiny.cloud/docs/tinymce/6/basic-setup/
//     // plugins: [
//     //   'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
//     //   'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
//     //   'media', 'table', 'emoticons', 'template', 'help'
//     // ],
//     // 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'

//     // NOTE: Basic version of the TinyMCE editor
//     tinymce.init({
//         selector: '.tinymce_editor.editor_basic',
//         // width: 600,
//         height: 400,
//         plugins: [ 'lists', 'code', 'help' ],
//         menubar: false,
//         toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
//         });

//     // NOTE: Minimal version of the TinyMCE editor
//     tinymce.init({
//         selector: '.tinymce_editor.editor_basic_200',
//         // width: 600,
//         height: 200,
//         plugins: [ 'lists', 'code', 'help' ],
//         menubar: false,
//         toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
//         });

//     // NOTE: Less is more version of the TinyMCE editor
//     tinymce.init({
//         selector: '.tinymce_editor.editor_less_100',
//         // width: 600,
//         height: 100,
//         // plugins: [ 'lists', 'code', 'help' ],
//         menubar: false,
//         toolbar: false,
//         statusbar: false,
//         });

// }

// function tinymce_remove() {
//     tinymce.remove('.tinymce_editor.editor_basic');
//     tinymce.remove('.tinymce_editor.editor_basic_200');
//     tinymce.remove('.tinymce_editor.editor_less_100');
// }


$: if ($slct.sponsorship_obj) {
    // console.log('Selected Sponsorship object changed?');
    // console.log($slct.sponsorship_obj);

    if ($slct.sponsorship_obj == null) {
        // $slct.sponsorship_obj = {code: null, name: null, description: null, start_datetime: null, end_datetime: null, notes: null};
    } else {
        disable_submit_btn = false;
    }
}


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

    disable_submit_btn = true;

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

    let sponsorship_di = 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);

    let sponsorship_do: key_val = {};

    sponsorship_do['account_id_random'] = $ae_loc.account_id;

    sponsorship_do['name'] = sponsorship_di.name;
    // if (tinyMCE.get('description')) {
    //     sponsorship_do['description'] = tinyMCE.get('description').getContent();
    // } else {
        sponsorship_do['description'] = sponsorship_di.description;
    // }
    sponsorship_do['type'] = sponsorship_di.type;
    sponsorship_do['physical'] = !!sponsorship_di.physical;
    sponsorship_do['virtual'] = !!sponsorship_di.virtual;

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

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

        let country_data = ae.util.get_obj_li_with_matching_prop({'obj_li': $ae_loc.lu_country_list, 'property': 'alpha_2_code', 'value': sponsorship_di.address_country_alpha_2_code});
        console.log(country_data);
        address['country'] = country_data[0].english_short_name; // Assume there is only one match
        // address['country_name'] = country_data[0].english_short_name;
    }
    sponsorship_do['location_address_json'] = address;

    // if (tinyMCE.get('location_text')) {
    //     sponsorship_do['location_text'] = tinyMCE.get('location_text').getContent();
    // } else {
        sponsorship_do['location_text'] = sponsorship_di.location_text;
    // }

    sponsorship_do['attend_url'] = sponsorship_di.attend_url;
    sponsorship_do['attend_url_passcode'] = sponsorship_di.attend_url_passcode;
    sponsorship_do['attend_phone'] = sponsorship_di.attend_phone;
    sponsorship_do['attend_phone_passcode'] = sponsorship_di.attend_phone_passcode;

    // if (tinyMCE.get('attend_text')) {
    //     sponsorship_do['attend_text'] = tinyMCE.get('attend_text').getContent();
    // } else {
        sponsorship_do['attend_text'] = sponsorship_di.attend_text;
    // }

    sponsorship_do['timezone'] = sponsorship_di.timezone;

    sponsorship_do['recurring'] = !!sponsorship_di.recurring;
    sponsorship_do['recurring_pattern'] = sponsorship_di.recurring_pattern;

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

    if (sponsorship_do['recurring_start_time'] ) {
        sponsorship_do['recurring_start_time'] = sponsorship_di.recurring_start_time;
    }
    if (sponsorship_do['recurring_end_time']) {
        sponsorship_do['recurring_end_time'] = sponsorship_di.recurring_end_time;
    }

    // if (tinyMCE.get('recurring_text')) {
    //     sponsorship_do['recurring_text'] = tinyMCE.get('recurring_text').getContent();
    // } else {
        sponsorship_do['recurring_text'] = sponsorship_di.recurring_text;
    // }

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

        let current_date_iso = dayjs().format('YYYY-MM-DD');

        // sponsorship_do['recurring_text'] = `This sponsorship occurs every ${days_of_week.join(', ')} at ${ae.util.iso_datetime_formatter(`${current_date_iso} ${sponsorship_do['recurring_start_time']}`, 'time_short_no_leading')} to ${ae.util.iso_datetime_formatter(`${current_date_iso} ${sponsorship_do['recurring_end_time']}`, 'time_short_no_leading')}.`;

        // sponsorship_do['recurring_text'] = `This sponsorship occurs every ${days_of_week.join(', ')} at ${ae.util.iso_datetime_formatter(`${current_date_iso} ${sponsorship_do['recurring_start_time']}`, 'time_short_no_leading')}.`;

        sponsorship_do['recurring_text'] = `*gen* ${days_of_week.join(', ')} at ${ae.util.iso_datetime_formatter(`${current_date_iso} ${sponsorship_do['recurring_start_time']}`, 'time_short_no_leading')}`;
    }

    sponsorship_do['external_person_id'] = sponsorship_di.external_person_id; // NOTE: From the Novi user that created/owns this sponsorship

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

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

    sponsorship_do['hide'] = !!sponsorship_di.hide;
    sponsorship_do['priority'] = !!sponsorship_di.priority;
    if (sponsorship_do['sort']) {
        sponsorship_do['sort'] = Number(sponsorship_di.sort);
    }
    if (sponsorship_do['group']) {
        sponsorship_do['group'] = form_sponsorship_di.group;
    } else {
        sponsorship_do['group'] = null;
    }
    if (sponsorship_do['enable']) {
        sponsorship_do['enable'] = !!sponsorship_di.enable;
    }

    // if (tinyMCE.get('notes')) {
    //     sponsorship_do['notes'] = tinyMCE.get('notes').getContent();
    // } else {
        sponsorship_do['notes'] = sponsorship_di.notes;
    // }

    // let address_data = {};
    // let contact_1_data = {};
    // let contact_2_data = {};

    console.log(sponsorship_di);

    if (!$slct.sponsorship_id) {
        create_sponsorship_obj_promise = api.create_ae_obj_crud({
            api_cfg: $ae_api,
            obj_type: 'sponsorship',
            fields: sponsorship_di,
            key: $ae_api.api_crud_super_key,
            log_lvl: 2
            })
        .then(function (sponsorship_obj_create_result) {
            if (!sponsorship_obj_create_result) {
                console.log('The result was null or false.');
                return false;
            }
            console.log(sponsorship_obj_create_result);

            $slct.sponsorship_id = sponsorship_obj_create_result.obj_id_random;

            dispatch(
                'created__sponsorship_obj',
                {
                    sponsorship_id: $slct.sponsorship_id,
                }
            );

            return sponsorship_obj_create_result;
        })
        .catch(function (error) {
            console.log('Something went wrong.');
            console.log(error);
            return false;
        });

        return create_sponsorship_obj_promise;

    } else {
        update_sponsorship_obj_promise = api.update_ae_obj_id_crud({
            api_cfg: $ae_api,
            obj_type: 'sponsorship',
            obj_id: $slct.sponsorship_id,
            fields: sponsorship_di,
            key: $ae_api.api_crud_super_key,
            log_lvl: 1
            })
        .then(function (sponsorship_obj_update_result) {
            if (!sponsorship_obj_update_result) {
                console.log('The result was null or false.');
                return false;
            }

            disable_submit_btn = false;

            dispatch(
                'updated__sponsorship_obj',
                {
                    sponsorship_id: $slct.sponsorship_id,
                }
            );

            return sponsorship_obj_update_result;
        })
        .catch(function (error) {
            console.log('Something went wrong.');
            console.log(error);
            return false;
        });

        return update_sponsorship_obj_promise;
    }



    // if (!$slct.sponsorship_id) {
    //     sponsorship_do['sponsorship_id_random'] = $slct.sponsorship_id;
    //     sponsorship_do['enable'] = true;

    //     create_sponsorship_obj_promise = await create_sponsorship_obj({sponsorship_id: $slct.sponsorship_id, data: sponsorship_di})
    //     console.log(create_sponsorship_obj_promise);
    //     $slct.sponsorship_id = create_sponsorship_obj_promise;

    //     dispatch(
    //         'created__sponsorship_obj',
    //         {
    //             sponsorship_id: $slct.sponsorship_id,
    //         }
    //     );
    // } else {
    //     update_sponsorship_obj_promise = await update_sponsorship_obj({sponsorship_id: $slct.sponsorship_id, data: sponsorship_di, log_lvl: 0})
    //     console.log(update_sponsorship_obj_promise);

    //     dispatch(
    //         'updated__sponsorship_obj',
    //         {
    //             sponsorship_id: $slct.sponsorship_id,
    //         }
    //     );
    // }

    // post_promise = null;
    // update_sponsorship_obj_promise = null;

    disable_submit_btn = false;

    return true;
}

async function handle_delete_sponsorship_obj({sponsorship_id, method='disable'}) {
    console.log('*** handle_delete_sponsorship_obj() ***');

    delete_sponsorship_obj_promise = 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: 0
        })
    .then(function (sponsorship_obj_delete_result) {
        if (sponsorship_obj_delete_result) {
            // console.log(`Result:`, sponsorship_obj_delete_result);

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

    return delete_sponsorship_obj_promise;
}
</script>


<section
    class="svelte_component ae_section ae_edit sponsorship_obj edit__sponsorship_obj {container_class_li.join(' ')}"
    class:ae_create={!$slct.sponsorship_id}
    bind:clientHeight={$ae_loc.iframe_height_modal_body}
    >

<form on:submit|preventDefault={handle_submit_form} class="">

    {#await update_sponsorship_obj_promise}
        <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
    {:then}
        {#if update_sponsorship_obj_promise}
            <div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div>
        {:else}
            <!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
        {/if}
    {/await}

    <!-- <h3>Sponsorship</h3> -->

    <input type="hidden" value={$slct.sponsorship_id} />

    <section class="ae_section sponsorship__general_information"> <!-- BEGIN: section sponsorship__general_information -->

        <label for="name">Name of Sponsorship
        <input type="text" id="name" name="name" required max="200" value={$slct.sponsorship_obj.name} placeholder="Name of Sponsorship" autocomplete="off" />
        </label>

        <label class="ae_label sponsorship__description">Short description
        <textarea name="description" id="description" class="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>

        <label>Level of sponsorship?
            <!-- <input name="level_num" value={$slct.sponsorship_obj.level_num} /> -->
            <select name="level_num">
                <option value=1 selected={($slct.sponsorship_obj.level_num == 1 ? 'selected' : '')}>The Lowest Level Sponsorship ($5,000)</option>
                <option value=2 selected={($slct.sponsorship_obj.level_num == 2 ? 'selected' : '')}>Mid-level Sponsor ($7,500)</option>
                <option value=3 selected={($slct.sponsorship_obj.level_num == 3 ? 'selected' : '')}>High Level Sponsor ($15,000)</option>
            </select>

            <ul>
                <li><strong>Lowest Level</strong> - Thank you?</li>
                <li><strong>Mid-level</strong> - Please join the gala along with 5 guests.</li>
                <li><strong>High Level</strong> -  Please join the gala along with 10 guests. You will also be able to upload a promo video that will play at the end of the gala.</li>
            </ul>
        </label>

    </section> <!-- BEGIN: section sponsorship__general_information -->

    <hr>

    <section class="ae_section sponsorship__how_to_attend"> <!-- BEGIN: section sponsorship__how_to_attend -->
        <h3>How to Attended</h3>

        <fieldset class="sponsorship__physical_virtual">
            <legend>Face-to-Face or Virtual</legend>
            <p>Is this a face-to-face/in person sponsorship, a virtual/online sponsorship, or both?</p>
            <div class="ae_group">
                <label for="physical" class="">Face-to-Face/In person
                    <input
                        type="checkbox"
                        name="physical"
                        id="physical"
                        bind:checked={$slct.sponsorship_obj.physical}
                        >
                </label>
                <label for="virtual" class="">Virtual/Online
                    <input
                        type="checkbox"
                        name="virtual"
                        id="virtual"
                        bind:checked={$slct.sponsorship_obj.virtual}
                        >
                </label>
            </div>
        </fieldset>

        <fieldset
            id="physical_address"
            class="physical_address"
            class:ae_d_none={!$slct.sponsorship_obj.physical}>

            <legend>Address</legend>

            <input id="" name="address_location_id_random" type="hidden" value="{$slct.sponsorship_obj.address_location_id_random}">

            <label for="address_name">Location name
                <input type="text" class="" id="address_name" name="address_name" placeholder="The name of the place or location" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.name ? $slct.sponsorship_obj.location_address_json.name : '')}" autocomplete="off">
            </label>

            <label for="address_line_1">Line 1
                <input type="text" class="" id="address_line_1" name="address_line_1" placeholder="Address line 1" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.line_1 ? $slct.sponsorship_obj.location_address_json.line_1 : '')}" autocomplete="address-line1">
            </label>

            <label for="address_line_2">Line 2
                <input type="text" class="" id="address_line_2" name="address_line_2" placeholder="Address line 2" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.line_2 ? $slct.sponsorship_obj.location_address_json.line_2 : '')}" autocomplete="address-line2">
            </label>

            <label for="address_line_3">Line 3
                <input type="text" class="" id="address_line_3" name="address_line_3" placeholder="Address line 3" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.line_3 ? $slct.sponsorship_obj.location_address_json.line_3 : '')}" autocomplete="address-line3">
            </label>

        </fieldset>

        <fieldset
            id="physical_city_state_province_postal_code_country"
            class="physical_city_state_province_postal_code_country">

            <label for="address_city">City
                <input type="text" class="" id="address_city" name="address_city" placeholder="Name of the city" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.city ? $slct.sponsorship_obj.location_address_json.city : '')}" autocomplete="address-level2">
            </label>

            {#if $ae_loc.lu_country_subdivision_list}
            <label for="address_country_subdivision_code" class="">State or province
                <select class="" id="address_country_subdivision_code" name="address_country_subdivision_code" title="Select the state or province for the sponsorship">
                    <option value="">-- None --</option>
                    {#each $ae_loc.lu_country_subdivision_list as lu_country_subdivision}
                        <option value="{lu_country_subdivision.code}" selected={(($slct.sponsorship_obj.location_address_json && lu_country_subdivision.code == $slct.sponsorship_obj.location_address_json.country_subdivision_code) || ( lu_country_subdivision.code == $slct.sponsorship_obj.address_country_subdivision_code) ? 'selected' : '')}>{lu_country_subdivision.country_alpha_2_code} - {lu_country_subdivision.name}</option>
                    {/each}
                </select>
            </label>
            {:else}
            <label for="address_country_subdivision_code">State or province code
                <input type="text" class="" id="address_country_subdivision_code" name="address_country_subdivision_code" placeholder="State or province code" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.country_subdivision_code ? $slct.sponsorship_obj.location_address_json.country_subdivision_code : '')}" autocomplete="address-level1">
            </label>
            {/if}

            <label for="address_postal_code">Postal code or zip code
                <input type="text" class="" id="address_postal_code" name="address_postal_code" placeholder="Postal code or zip code" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.postal_code ? $slct.sponsorship_obj.location_address_json.postal_code : '')}" autocomplete="postal-code">
            </label>

            {#if $ae_loc.lu_country_list}
            <label for="address_country_alpha_2_code" class="">Country
                <select class="" id="address_country_alpha_2_code" name="address_country_alpha_2_code" title="Select the country for the sponsorship">
                    <option value="">-- None --</option>
                    {#each $ae_loc.lu_country_list as lu_country}
                        <option value="{lu_country.alpha_2_code}" selected={(($slct.sponsorship_obj.location_address_json && lu_country.alpha_2_code == $slct.sponsorship_obj.location_address_json.country_alpha_2_code) || (lu_country.alpha_2_code == $slct.sponsorship_obj.address_country_alpha_2_code) ? 'selected' : '')}>{lu_country.english_short_name}</option>
                    {/each}
                </select>
            </label>
            {:else}
            <label for="address_country_alpha_2_code">Country
                <input type="text" class="" id="address_country_alpha_2_code" name="address_country_alpha_2_code" placeholder="Country alpha 2 code" value="{($slct.sponsorship_obj.location_address_json && $slct.sponsorship_obj.location_address_json.country_alpha_2_code ? $slct.sponsorship_obj.location_address_json.country_alpha_2_code : '')}" autocomplete="country">
            </label>
            {/if}

        </fieldset>

        <label for="location_text" class="">Additional information the sponsorship location
            <textarea class="ae_value sponsorship__location_text tinymce_editor editor_less_100" id="location_text" name="location_text" placeholder="Additional information about the sponsorship location" rows="2" cols="70" bind:value={$slct.sponsorship_obj.location_text}></textarea>
        </label>

        <fieldset
            id="virtual"
            class="virtual"
            class:ae_d_none={!$slct.sponsorship_obj.virtual}>
            <legend>Virtual/Online</legend>

            <label for="attend_url">URL to access the virtual sponsorship
                <input type="url" class="" id="attend_url" name="attend_url" placeholder="URL to access the virtual sponsorship" value={$slct.sponsorship_obj.attend_url} autocomplete="url">
            </label>
            <label for="attend_url_passcode">Passcode to join at URL
                <input type="text" class="" id="attend_url_passcode" name="attend_url_passcode" placeholder="Passcode to join at URL" value={$slct.sponsorship_obj.attend_url_passcode} autocomplete="off">
            </label>

            <label for="attend_phone">Phone number for sponsorship conference call
                <input type="tel" class="" id="attend_phone" name="attend_phone" placeholder="Phone number for sponsorship conference call" value={$slct.sponsorship_obj.attend_phone} autocomplete="tel">
            </label>
            <label for="attend_phone_passcode">Passcode to join conference call
                <input type="text" class="" id="attend_phone_passcode" name="attend_phone_passcode" placeholder="Passcode to join conference call" value={$slct.sponsorship_obj.attend_phone_passcode} autocomplete="off">
            </label>

        </fieldset>

        <label for="attend_text" class="">Additional information on how to attend
            <textarea class="ae_value sponsorship__attend_text tinymce_editor editor_less_100" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the sponsorship" rows="2" cols="70" value={($slct.sponsorship_obj.attend_text ? $slct.sponsorship_obj.attend_text : '')}></textarea>
        </label>

    </section> <!-- END: section sponsorship__how_to_attend -->

    <hr>

    <section class="ae_section sponsorship__timing"> <!-- BEGIN: section sponsorship__timing -->
        <h3>Recurring and When</h3>

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

        <fieldset
            id="recurring_details"
            class="recurring_details"
            class:ae_d_none={!$slct.sponsorship_obj.recurring}
            >

            <legend class="">Recurring</legend>
            <label for="recurring_pattern">Repeats
                <select class="" name="recurring_pattern" id="recurring_pattern">
                    <option value="weekly" selected={($slct.sponsorship_obj.recurring_pattern == 'weekly' ? 'selected' : '')}>Weekly</option>
                    <option value="every other week" selected={($slct.sponsorship_obj.recurring_pattern == 'every other week' ? 'selected' :  '')}>Every Other Week</option>
                    <option value="monthly" selected={($slct.sponsorship_obj.recurring_pattern == 'monthly' ? 'selected' :  '')}>Monthly</option>
                    <option value="other" selected={($slct.sponsorship_obj.recurring_pattern == 'other' ? 'selected' :  '')}>Other</option>
                </select>
            </label>
        </fieldset>

        <fieldset class="sponsorship__days_of_week">
            <label><input type="checkbox" name="weekday_sunday" value={$slct.sponsorship_obj.weekday_sunday} bind:checked={($slct.sponsorship_obj.weekday_sunday)}>
                Sunday</label>
            <label><input type="checkbox" name="weekday_monday" value={$slct.sponsorship_obj.weekday_monday} bind:checked={($slct.sponsorship_obj.weekday_monday)}> Monday</label>
            <label><input type="checkbox" name="weekday_tuesday" value={$slct.sponsorship_obj.weekday_tuesday} bind:checked={($slct.sponsorship_obj.weekday_tuesday)}> Tuesday</label>
            <label><input type="checkbox" name="weekday_wednesday" value={$slct.sponsorship_obj.weekday_wednesday} bind:checked={($slct.sponsorship_obj.weekday_wednesday)}> Wednesday</label>
            <label><input type="checkbox" name="weekday_thursday" value={$slct.sponsorship_obj.weekday_thursday} bind:checked={($slct.sponsorship_obj.weekday_thursday)}> Thursday</label>
            <label><input type="checkbox" name="weekday_friday" value={$slct.sponsorship_obj.weekday_friday} bind:checked={($slct.sponsorship_obj.weekday_friday)}> Friday</label>
            <label><input type="checkbox" name="weekday_saturday" value={$slct.sponsorship_obj.weekday_saturday} bind:checked={($slct.sponsorship_obj.weekday_saturday)}> Saturday</label>
        </fieldset>

        <fieldset class="flex_row flex_gap_md flex_justify_around">
            <label>Timezone
                {#if $ae_loc.lu_time_zone_list && $ae_loc.lu_time_zone_list.length > 0}
                    <select name="timezone" required>
                        {#each $ae_loc.lu_time_zone_list as lu_timezone}
                            <option value="{lu_timezone.name}" selected={((($slct.sponsorship_obj.timezone && lu_timezone.name == $slct.sponsorship_obj.timezone) || lu_timezone.name == $ae_loc.current_timezone) ? 'selected' : '')}>{lu_timezone.name}</option>
                        {/each}
                    </select>
                {:else}
                    <input type="text" name="timezone" value={($slct.sponsorship_obj.timezone ? $slct.sponsorship_obj.timezone : $ae_loc.current_timezone)} />
                {/if}
                <!-- client TZ: {$ae_loc.current_timezone} -->
            </label>
            <label>Start Time <input name="recurring_start_time" type="time" value={$slct.sponsorship_obj.recurring_start_time} max="8" /></label>
            <label>End Time <input name="recurring_end_time" type="time" value={$slct.sponsorship_obj.recurring_end_time} max="8" /></label>
        </fieldset>

        {#if ( $ae_loc.administrator_access || $slct.sponsorship_obj && ($slct.sponsorship_obj.show_recurring_text || ($slct.sponsorship_obj.recurring_text && !$slct.sponsorship_obj.recurring_text.includes('*gen*'))) )}
            <p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this sponsorship shows up in search results.</p>
            <label for="recurring_text">Additional information on when and how often
                <textarea class="ae_value sponsorship__recurring_text tinymce_editor editor_less_100" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$slct.sponsorship_obj.recurring_text}></textarea>
            </label>
        {/if}
        {#if ( $ae_loc.administrator_access || $slct.sponsorship_obj && ($slct.sponsorship_obj.show_recurring_text || ($slct.sponsorship_obj.recurring_text && !$slct.sponsorship_obj.recurring_text.includes('*gen*'))) )}
            <button
                type="button"
                class="ae_btn ae_smaller ae_btn_info ae_width_md"
                style=""
                on:click|preventDefault={() => {
                    if (confirm('Are you sure you want to remove the text for the additional details?')) {
                        // tinyMCE.get('recurring_text').setContent('');
                        $slct.sponsorship_obj.recurring_text = '';
                        $slct.sponsorship_obj.show_recurring_text = false;
                    } else {
                        return false;
                    }
                }}
                >
                <span class="fas fa-minus"></span> Remove Details?
            </button>
        {:else}
            <button
                type="button"
                class="ae_btn ae_smaller ae_btn_info ae_width_md"
                style=""
                on:click|preventDefault={() => {
                    // Remove *gen* prefix from recurring_text
                    if ($slct.sponsorship_obj.recurring_text && $slct.sponsorship_obj.recurring_text.includes('*gen*')) {
                        $slct.sponsorship_obj.recurring_text = $slct.sponsorship_obj.recurring_text.replace('*gen* ', '');
                    }
                    $slct.sponsorship_obj.show_recurring_text = true;
                }}
                >
                <span class="fas fa-plus"></span> Add More Details?
            </button>
        {/if}

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

    <hr>

    <section class="ae_section sponsorship__contacts">
        <h3>Contacts</h3>

        <fieldset class="sponsorship__contact_1">
            <legend>Contact 1</legend>
            <!-- <div class="ae_highlight">Contact 1 must be a member of OSIT and should be the primary contact for this sponsorship.</div> -->
            <!-- {#if $ae_loc.trusted_access} -->
            <label for="external_person_id">Contact 1 external ID
                {#if !$ae_loc.trusted_access}
                    <span class="fas fa-lock" title="Field is locked"></span>
                    <input
                        type="text"
                        id="external_person_id"
                        name="external_person_id"
                        value={($slct.sponsorship_obj.external_person_id ? $slct.sponsorship_obj.external_person_id : $ae_loc.novi_uuid)}
                        readonly={true}
                        >
                {:else}
                    <span class="fas fa-unlock" title="Field is unlocked"></span>
                    <input
                        type="text"
                        id="external_person_id"
                        name="external_person_id"
                        value={($slct.sponsorship_obj.external_person_id ? $slct.sponsorship_obj.external_person_id : '')}
                        readonly={false}
                        >
                {/if}

                <span class="ae_highlight">Primary link using the external API UUID</span>
            </label>
            <!-- {/if} -->
            <span class="ae_group">
            <label for="contact_1_full_name">Full name
                {#if !$ae_loc.trusted_access}
                    <span class="fas fa-lock" title="Field is locked"></span>
                {:else}
                    <span class="fas fa-unlock" title="Field is unlocked"></span>
                {/if}
                <input
                    type="text"
                    class=""
                    id="contact_1_full_name" name="contact_1_full_name"
                    placeholder="Full name"
                    value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[0] && $slct.sponsorship_obj.contact_li_json[0].full_name ? $slct.sponsorship_obj.contact_li_json[0].full_name : '')}
                    autocomplete="name"
                    readonly={!$ae_loc.trusted_access}
                    required>
            </label>
            <label for="contact_1_email">Email
                {#if !$ae_loc.trusted_access}
                    <span class="fas fa-lock" title="Field is locked"></span>
                {:else}
                    <span class="fas fa-unlock" title="Field is unlocked"></span>
                {/if}
                <input
                    type="email"
                    class=""
                    id="contact_1_email"
                    name="contact_1_email"
                    placeholder="Email"
                    value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[0] && $slct.sponsorship_obj.contact_li_json[0].email ? $slct.sponsorship_obj.contact_li_json[0].email : '')}
                    autocomplete="email"
                    readonly={!$ae_loc.trusted_access}
                    required>
            </label>
            </span>
            <span class="ae_group">
            <label for="contact_1_phone_mobile">Mobile phone
                <input type="tel" class="" id="contact_1_phone_mobile" name="contact_1_phone_mobile" placeholder="Mobile phone" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[0] && $slct.sponsorship_obj.contact_li_json[0].phone_mobile ? $slct.sponsorship_obj.contact_li_json[0].phone_mobile : ($slct.sponsorship_obj.contact_1_phone_mobile ? $slct.sponsorship_obj.contact_1_phone_mobile : ''))} autocomplete="tel">
            </label>
            <label for="contact_1_phone_home">Home phone
                <input type="tel" class="" id="contact_1_phone_home" name="contact_1_phone_home" placeholder="Home phone" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[0] && $slct.sponsorship_obj.contact_li_json[0].phone_home ? $slct.sponsorship_obj.contact_li_json[0].phone_home : ($slct.sponsorship_obj.contact_1_phone_home ? $slct.sponsorship_obj.contact_1_phone_home : ''))} autocomplete="tel">
            </label>
            <label for="contact_1_phone_office">Office phone
                <input type="tel" class="" id="contact_1_phone_office" name="contact_1_phone_office" placeholder="Office phone" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[0] && $slct.sponsorship_obj.contact_li_json[0].phone_office ? $slct.sponsorship_obj.contact_li_json[0].phone_office : ($slct.sponsorship_obj.contact_1_phone_office ? $slct.sponsorship_obj.contact_1_phone_office : ''))} autocomplete="tel">
            </label>
            </span>
        </fieldset>

        <fieldset class="sponsorship__contact_2">
            <legend>Contact 2</legend>
            <span class="ae_group">
            <label for="contact_2_full_name">Full name
                <input type="text" class="" id="contact_2_full_name" name="contact_2_full_name" placeholder="Full name" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[1] && $slct.sponsorship_obj.contact_li_json[1].full_name ? $slct.sponsorship_obj.contact_li_json[1].full_name : '')} autocomplete="name">
            </label>
            <label for="contact_2_email">Email
                <input type="email" class="" id="contact_2_email" name="contact_2_email" placeholder="Email" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[1] && $slct.sponsorship_obj.contact_li_json[1].email ? $slct.sponsorship_obj.contact_li_json[1].email : '')} autocomplete="email">
            </label>
            </span>
            <span class="ae_group">
            <label for="contact_2_phone_mobile">Mobile phone
                <input type="tel" class="" id="contact_2_phone_mobile" name="contact_2_phone_mobile" placeholder="Mobile phone" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[1] && $slct.sponsorship_obj.contact_li_json[1].phone_mobile ? $slct.sponsorship_obj.contact_li_json[1].phone_mobile : ($slct.sponsorship_obj.contact_2_phone_mobile ? $slct.sponsorship_obj.contact_2_phone_mobile : ''))} autocomplete="tel">
            </label>
            <label for="contact_2_phone_home">Home phone
                <input type="tel" class="" id="contact_2_phone_home" name="contact_2_phone_home" placeholder="Home phone" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[1] && $slct.sponsorship_obj.contact_li_json[1].phone_home ? $slct.sponsorship_obj.contact_li_json[1].phone_home : ($slct.sponsorship_obj.contact_2_phone_home ? $slct.sponsorship_obj.contact_2_phone_home : ''))} autocomplete="tel">
            </label>
            <label for="contact_2_phone_office">Office phone
                <input type="tel" class="" id="contact_2_phone_office" name="contact_2_phone_office" placeholder="Office phone" value={($slct.sponsorship_obj.contact_li_json && $slct.sponsorship_obj.contact_li_json[1] && $slct.sponsorship_obj.contact_li_json[1].phone_office ? $slct.sponsorship_obj.contact_li_json[1].phone_office : ($slct.sponsorship_obj.contact_2_phone_office ? $slct.sponsorship_obj.contact_2_phone_office : ''))} autocomplete="tel">
            </label>
            </span>
        </fieldset>
    </section>

    <hr>

    <section class="ae_section sponsorship__admin_options"> <!-- BEGIN: section sponsorship__admin_options -->

        <h3>
            Admin Options
            <button type="button" class="ae_btn ae_smallest ae_d_none_toggle ae_float_right ae_btn_info" on:click={() => {document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_out'); document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_in');}}><span class="fas fa-eye"></span> Show/Hide Admin</button>
        </h3>

        <span class="ae_d_none_content ae_fade_out">
        <label>Hide
            <input
                type="checkbox"
                name="hide"
                id="hide"
                bind:checked={$slct.sponsorship_obj.hide}
                >
        </label>

        <label>Priority
            <input
                type="checkbox"
                name="priority"
                id="priority"
                bind:checked={$slct.sponsorship_obj.priority}
                >
        </label>

        <label>Sort <input type="number" name="sort" value={$slct.sponsorship_obj.sort} /></label>

        <label>Group <input type="text" name="group" value={$slct.sponsorship_obj.group} max="100" /></label>

        {#if $ae_loc.administrator_access}
        <label>Enable
            <input
                type="checkbox"
                name="enable"
                id="enable"
                bind:checked={$slct.sponsorship_obj.enable}
                >
        </label>
        {/if}

        {#if $ae_loc.trusted_access}
        <label>Internal Staff Notes
        <textarea id="notes" name="notes" class="ae_value sponsorship__notes tinymce_editor editor_basic_200" rows="2" cols="70" value={$slct.sponsorship_obj.notes}></textarea>
        </label>
        {/if}

        </span> <!-- END: span ae_show_hide_content -->

    </section> <!-- END: section sponsorship__admin_options -->


    <section class="ae_section ae_options ae_row ae_actions sponsorship__options sponsorship__actions"> <!-- BEGIN: section sponsorship__options -->
        {#if $slct.sponsorship_id}
            <button
                type="submit"
                class="ae_btn btn_primary"
                disabled={($ae_loc.sposnorships.disable_submit__sponsorship_obj)}
                on:click={() => {
                    if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
                    // handle_submit_form();
                }}
                >
                <span class="fas fa-check"></span> Save
            </button>
        {:else}
            <button
                type="submit"
                class="ae_btn btn_primary"
                disabled={($ae_loc.sposnorships.disable_submit__sponsorship_obj)}
                on:click={() => {
                    if (!confirm('Are you sure you want to create this sponsorship?')) {return false;}
                    // handle_delete_archive_content_obj({archive_content_id: $slct.archive_content_id, hosted_file_id: $slct.archive_content_obj.hosted_file_id_random});

                    // $slct.archive_content_id = null;
                    // $slct.archive_content_obj = {};
                }}
                >
                <span class="fas fa-plus"></span> Save New Sponsorship
            </button>
        {/if}

        {#if $slct.sponsorship_id}
        {#if $ae_loc.administrator_access}
        <button
            on:click={() => {
                if (!confirm('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="ae_btn ae_smallest ae_btn_danger" type="button"
            title="Delete record permanently"
            >
            <span class="fas fa-minus"></span> Delete
        </button>
        {:else if $ae_loc.trusted_access}
        <button
            on:click={() => {
                if (!confirm('Are you sure you want to disable this sponsorship?')) {return false;}
                handle_delete_sponsorship_obj({sponsorship_id: $slct.sponsorship_id, method: 'disable'});

                $slct.sponsorship_id = null;
                $slct.sponsorship_obj = {};
            }}
            class="ae_btn ae_smallest ae_btn_danger" type="button"
            title="Disable record to delete"
            >
            <span class="fas fa-minus"></span> Delete
        </button>
        {:else}
        <button
            on:click={() => {
                if (!confirm('Are you sure you want to hide this sponsorship?')) {return false;}
                handle_delete_sponsorship_obj({sponsorship_id: $slct.sponsorship_id, method: 'hide'});

                $slct.sponsorship_id = null;
                $slct.sponsorship_obj = {};
            }}
            class="ae_btn ae_smallest ae_btn_danger" type="button"
            title="Hide record to delete"
            >
            <span class="fas fa-trash-alt"></span> Delete
        </button>
        {/if}
        {/if}
    </section>

</form>

</section>


<style>
.ae_section .ae_options {
    /* align-self: center; */
}

textarea.sponsorship__description {
    /* width: 100%; */
    /* max-width: 100%; */
}

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

    border: solid thin hsla(0,0%,0%,.25);

    margin: 1em 0em;
    padding: .5em;
}

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

    border: solid thin hsla(0,0%,0%,.25);

    margin: 1em 0em;
    padding: .5em;
}


.sponsorship__days_of_week {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* .ae_edit.sponsorship_obj {
    border: dashed thin hsla(0,0%,70%,1);

    margin: .5em .25em;
    padding: .5em .25em;

    background-color: hsla(0,0%,90%,1);
} */

/* .ae_d_none, .d-none {
    display: none;
} */

:global(.tox .tox-promotion, .tox .tox-statusbar__branding) {
    display: none !important;
    /* visibility: hidden !important; */
}
</style>
