<script lang="ts">
type key_val = {
    [key: string]: any;
};
// *** Import Svelte core
import { onMount } from 'svelte';

// *** Import Aether core variables and functions
import { ae, api, Element_modal_v3 } from 'aether_npm_lib';

import { slct, slct_trigger, ae_app } from './stores';

// *** Import Aether core components
// import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js';

// *** Import Aether module variables and functions

// *** Import Aether module components
// import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
import View_sponsorship_obj from './10_view__sponsorship_obj.svelte';

// *** Export/Exposed variables and functions for component
// export let account_id: string = $page['page_for']['account_id'];
export let account_id: string = $ae_app.account_id;
export let sponsorship_id: string = $ae_app.sponsorships.sponsorship_id;

export let user: string = $ae_app.user;
export let key: string = $ae_app.key;
export let full_name: string = $ae_app.full_name;
export let ae_admin_li: string = $ae_app.ae_admin_li;
export let ae_trusted_li: string = $ae_app.ae_trusted_li;

// *** Set initial variables
$ae_app.user = decodeURIComponent(user);
$ae_app.key = decodeURIComponent(key);
// $ae_app.ae_admin_li = ae_admin_li;
// $ae_app.ae_trusted_li = ae_trusted_li;

$ae_app.current_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
if (!$ae_app.lu_country_subdivision_list) {
    $ae_app.lu_country_subdivision_list = [];
}
if (!$ae_app.lu_country_list ) {
    $ae_app.lu_country_list = [];
}
if (!$ae_app.lu_timezone_list) {
    $ae_app.lu_timezone_list = [];
}

$ae_app.sponsorships.show_main__options = true; // Section for: search area, buttons for filtering sponsorships, create new sponsorship.
$ae_app.sponsorships.show_list__sponsorship_obj_li = true;
$ae_app.sponsorships.fulltext_search_qry_str = '';
$ae_app.sponsorships.qry_virtual = false;
$ae_app.sponsorships.qry_physical = false;
$ae_app.sponsorships.qry_type = '';

// NOTE: Check if the ae_user is in the ae_admin_li list
if ($ae_app.ae_user && $ae_app.ae_admin_li) {
    if ($ae_app.ae_admin_li.includes($ae_app.ae_user)) {
        $ae_app.access_type = 'administrator';
        $ae_app.administrator_access = true;
        $ae_app.trusted_access = true;
    }
}
// NOTE: Check if the ae_user is in the ae_trusted_li list
if ($ae_app.ae_user && $ae_app.ae_trusted_li) {
    if ($ae_app.ae_trusted_li.includes($ae_app.ae_user)) {
        $ae_app.access_type = 'trusted';
        $ae_app.trusted_access = true;
    }
}

if ($ae_app.administrator_access) {
    $ae_app.sponsorships.enabled = 'enabled';
    $ae_app.sponsorships.hidden = 'not_hidden';
    $ae_app.sponsorships.limit = 150;
} else if ($ae_app.trusted_access) {
    $ae_app.sponsorships.enabled = 'enabled';
    $ae_app.sponsorships.hidden = 'not_hidden';
    $ae_app.sponsorships.limit = 75;
} else {
    $ae_app.sponsorships.enabled = 'enabled';
    $ae_app.sponsorships.hidden = 'not_hidden';
    $ae_app.sponsorships.limit = 25;
}

let ae_sponsorship_obj_li_get_promise;
let ae_sponsorship_obj_get_promise;
let data_store_obj_get_promise;
let get_ds_sponsorships_info_promise = handle_get_data_store_obj_w_code({code: 'sponsorships_info'});
let get_ds_sponsorships_options_promise = handle_get_data_store_obj_w_code({code: 'sponsorships_options'});

if (account_id) {
    $slct.account_id = account_id;
    handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
}

// NOTE: This if sponsorship_id is not fully ready yet -2023-09-08
if (sponsorship_id) {
    console.log(`Selected Sponsorship ID: ${sponsorship_id}`);
    $slct.sponsorship_id = sponsorship_id;
    $slct_trigger = 'load__sponsorship_obj';

    // handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});

    // // Auto show the selected Sponsorship ID
    // // Set the URL param "sponsorship_id" to the current Sponsorship ID. This is a just in case.
    // const url = new URL(location);
    // url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
    // history.pushState({}, '', url);

    // let message = {'sponsorship_id': $slct.sponsorship_id};
    // window.parent.postMessage(message, "*");

    $ae_app.sponsorships.show_main__options = true;
    $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
    $ae_app.sponsorships.show_view__sponsorship_obj = true;
    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
}

if (!$ae_app.client_content) {
    $ae_app.client_content = {};
}

onMount(() => {
    console.log('** Component Mounted: ** OSIT - AE Sponsorships: Main');

    document.getElementById('meeting_fulltext_search_qry_str').focus();
});


$: if ($ae_app.iframe_height && $ae_app.iframe_height_modal_body) {
    console.log('getting new dimensions for iframe:', $ae_app.iframe_height, $ae_app.iframe_height_modal_body);

    let iframe_height = 0;

    if ($ae_app.iframe_height > $ae_app.iframe_height_modal_body) {
        iframe_height = $ae_app.iframe_height;
    } else {
        iframe_height = $ae_app.iframe_height_modal_body;

        // console.log($ae_app.modal_dimensions);

        if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.header_height) {
            iframe_height = iframe_height + $ae_app.modal_dimensions.header_height;
        }
        if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.footer_height) {
            iframe_height = iframe_height + $ae_app.modal_dimensions.footer_height;
        }
        // iframe_height = iframe_height + 50; // Just in case
    }

    console.log(`Suggested new iframe_height: ${iframe_height}`);
    window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_app.iframe_height) {
    console.log('setting new iframe_height:', $ae_app.iframe_height);

    // let iframe_height = $ae_app.iframe_height;

    window.parent.postMessage({'iframe_height': $ae_app.iframe_height}, "*"); // This should be in pixels
}


$: if ($slct_trigger == 'load__sponsorship_obj_li' && $slct.account_id) {
    if ($ae_app.sponsorships.qry_status == 'loading') {
        console.log('*** $ae_app.sponsorships.qry_status == loading ***');

        setTimeout(() => {
            console.log("Delayed for X second.");
            $slct_trigger = null;
            handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
        }, 250);
    } else {
        console.log('*** $ae_app.sponsorships.qry_status != loading ***');
        $slct_trigger = null;
        handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
    }
}

async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
    console.log('*** handle_load_ae_sponsorship_obj_li() ***');
    console.log($ae_app.sponsorships);

    let fulltext_search_qry_str = $ae_app.sponsorships.fulltext_search_qry_str;
    let qry_virtual = $ae_app.sponsorships.qry_virtual;
    let qry_physical = $ae_app.sponsorships.qry_physical;
    let qry_type = $ae_app.sponsorships.qry_type;

    let enabled = $ae_app.sponsorships.enabled;
    let hidden = $ae_app.sponsorships.hidden;
    let limit = $ae_app.sponsorships.limit;
    let offset = $ae_app.sponsorships.offset;

    let params = {};
    // params['archived'] = 'all';
    // params['conference'] = false;
    // params['inc_address'] = true;
    // params['inc_contact'] = true;

    let params_json: key_val = {};
    // if (fulltext_search_qry_str && fulltext_search_qry_str.length > 2) {
    //     params_json['ft_qry'] = {
    //         'default_qry_str': fulltext_search_qry_str,
    //         'location_address_json': fulltext_search_qry_str,
    //         'contact_li_json': fulltext_search_qry_str,
    //         'address_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
    //         'contact_1_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
    //         };
    // }

    // if (qry_virtual || qry_physical || qry_type) {
    //     params_json['and_qry'] = {};
    //     if (qry_virtual) params_json['and_qry']['virtual'] = true;
    //     if (qry_physical) params_json['and_qry']['physical'] = true;
    //     if (qry_type) params_json['and_qry']['type'] = qry_type;
    // }

    // console.log('params_json:', params_json);
    // console.log(params_json);

    // NOTE: I am not sure if this is actually needed. It may save a little space in the URL.
    // if (JSON.stringify(params_json) == JSON.stringify({})) {
    //     params_json = null;
    // }
    $ae_app.sponsorships.qry_status = 'loading';
    ae_sponsorship_obj_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
        api_cfg: $ae_app.ae_api,
        obj_type: 'sponsorship',
        for_obj_type: 'account',
        for_obj_id: account_id,
        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
        enabled: enabled,
        hidden: hidden,
        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
        // order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
        limit: limit,
        offset: offset,
        params_json: params_json,
        params: params,
        log_lvl: 2
        })

    .then(function (sponsorship_obj_li_get_result) {
        if (sponsorship_obj_li_get_result) {
            $slct.sponsorship_obj_li = sponsorship_obj_li_get_result;
            console.log(`Sponsorship list:`, $slct.sponsorship_obj_li);
        } else {
            $slct.sponsorship_obj_li = [];
        }
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    })
    .finally(function () {
        $ae_app.sponsorships.qry_status = 'done';
    });

    return ae_sponsorship_obj_li_get_promise;
}


$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
    $slct_trigger = null;

    handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});

    // Auto show the selected Sponsorship ID
    // Is this pushState needed here?
    // Set the URL param "sponsorship_id" to the current Sponsorship ID. This is a just in case.
    // const url = new URL(location);
    // url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
    // history.pushState({}, '', url);

    // Is this postMessage needed here?
    // let message = {'sponsorship_id': $slct.sponsorship_id};
    // window.parent.postMessage(message, "*");

    // $ae_app.sponsorships.show_main__options = false;
    // $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
    // $ae_app.sponsorships.show_view__sponsorship_obj = true;
    // $ae_app.sponsorships.show_edit__sponsorship_obj = false;
}

async function handle_load_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
    console.log('*** handle_load_sponsorship_id_obj() ***');

    // let enabled = $ae_app.sponsorships.enabled;
    // let hidden = $ae_app.sponsorships.hidden;
    // let limit = $ae_app.sponsorships.limit;
    // let offset = $ae_app.sponsorships.offset;

    let params = {};

    ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
        api_cfg: $ae_app.ae_api,
        obj_type: 'event',
        obj_id: sponsorship_id,
        use_alt_table: true, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
        use_alt_base: true, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
        params: params,
        log_lvl: 0
        })
    .then(function (sponsorship_obj_get_result) {
        if (sponsorship_obj_get_result) {
            $slct.sponsorship_obj = sponsorship_obj_get_result;
            console.log(`Sponsorship object:`, $slct.sponsorship_obj);
        }

        // Auto show the selected Sponsorship ID
        // Is this pushState needed here?
        // Set the URL param "sponsorship_id" to the current Sponsorship ID.
        const url = new URL(location);
        url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
        history.pushState({}, '', url);

        // Is this postMessage needed here?
        let message = {'sponsorship_id': $slct.sponsorship_id};
        window.parent.postMessage(message, "*");
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    });

    return ae_sponsorship_obj_get_promise;
}

function handle_created_sponsorship_obj(event) {
    console.log('*** handle_created_sponsorship_obj() ***');
    console.log(event.detail);

    handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});

    const url = new URL(location);
    url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
    history.pushState({}, '', url);

    let message = {'sponsorship_id': $slct.sponsorship_id};
    window.parent.postMessage(message, "*");

    // $slct_trigger = 'load__sponsorship_obj';
    $slct_trigger = 'load__sponsorship_obj_li';

    $ae_app.sponsorships.show_main__options = false;
    $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
    $ae_app.sponsorships.show_view__sponsorship_obj = true;
    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
}

function handle_updated_sponsorship_obj(event) {
    console.log('*** handle_updated_sponsorship_obj() ***');
    console.log(event.detail);

    // $slct_trigger = 'load__sponsorship_obj';
    $slct_trigger = 'load__sponsorship_obj_li';

    $ae_app.sponsorships.show_main__options = false;
    $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
    $ae_app.sponsorships.show_view__sponsorship_obj = true;
    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
}

function handle_deleted_sponsorship_obj(event) {
    console.log('*** handle_deleted_sponsorship_obj() ***');
    console.log(event.detail);

    const url = new URL(location);
    url.searchParams.delete('sponsorship_id');
    history.pushState({}, '', url);

    let message = {'sponsorship_id': null};
    window.parent.postMessage(message, "*");

    $slct_trigger = 'load__sponsorship_obj_li';

    $ae_app.sponsorships.show_main__options = true;
    $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
    $ae_app.sponsorships.show_view__sponsorship_obj = false;
    $ae_app.sponsorships.show_edit__sponsorship_obj = false;
}


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

    event.preventDefault();
    event.stopPropagation();

    return false;
}
function handle_cancel_form(event) {
    console.log('*** handle_cancel_form() ***');
    console.log(event);

    event.preventDefault();
    event.stopPropagation();

    return false;
}

function handle_oninput_fulltext_search_qry_str(event) {
    console.log('*** handle_oninput_fulltext_search_qry_str() ***');
    console.log(event);

    // Check if this variable is a promise. The last query may still be being processed.
    // if (!ae_sponsorship_obj_li_get_promise.promise) {
    //     console.log('*** handle_oninput_fulltext_search_qry_str() ***');
    //     console.log('*** Promise is still processing. ***');
    //     console.log(ae_sponsorship_obj_li_get_promise);
    //     ae_sponsorship_obj_li_get_promise.promise.finally(() => { ae_sponsorship_obj_li_get_promise.promise.done = true; });
    // } else {
    //     $slct_trigger = 'load__sponsorship_obj_li';
    // }
    // if (ae_sponsorship_obj_li_get_promise && ae_sponsorship_obj_li_get_promise.then) {
    //     console.log('*** handle_oninput_fulltext_search_qry_str() ***');
    //     console.log('*** Promise is still processing. ***');
    //     console.log(ae_sponsorship_obj_li_get_promise);
    //     $slct_trigger = 'load__sponsorship_obj_li';
    //     return;
    // }

    // fulltext_search_qry_str = event.target.value;

    // if ($ae_app.sponsorships.fulltext_search_qry_str.length > 2) {
    // } else {
    //     $ae_app.sponsorships.fulltext_search_qry_str = '';
    // }
    $slct_trigger = 'load__sponsorship_obj_li';
}

async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
    console.log('*** handle_get_data_store_obj_w_code() ***');

    let get_item_result = window.localStorage.getItem(code);
    if (get_item_result) {
        $ae_app.sponsorships.ds[code] = get_item_result;
    } else {
        console.log('Get local storage item miss.');
    }

    data_store_obj_get_promise = api.get_data_store_obj_w_code({
        api_cfg: $ae_app.ae_api,
        data_store_code: code,
        data_type: data_type,
        log_lvl: 1
        })
    .then(function (get_data_store_result) {
        if (get_data_store_result) {

            if (data_type == 'text') {
                // console.log(get_data_store_result.text);
                $ae_app.sponsorships.ds[code] = get_data_store_result.text;
            } else if (data_type == 'json') {
                // console.log(get_data_store_result.json);
                $ae_app.sponsorships.ds[code] = get_data_store_result.json;
            }

            // console.log(`Code: ${$ae_app.sponsorships.ds[code]}`);
            // console.log(`Code:`, $ae_app.sponsorships.ds[code]);
        }
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    });
}
</script>

<!-- <svelte:window
	bind:outerHeight={ae_iframe_height}
  /> -->


<section id="osit_ae_sponsorships" class="osit_sponsorships ae_main c_ae c_ae_sponsorships ae_main" bind:clientHeight={$ae_app.iframe_height}>
<header>
    <h1>Sponsorships for One Sky IT Demo</h1>
</header>

<section class="ae_section ae_meta">
    <p>
    ae: {$ae_app.ae_full_name}
    <span class="details">
    (
        {$ae_app.ae_email}
        {#if $ae_app.administrator_access}
            <span class="access_type administrator_access">Administrator</span>
        {:else if $ae_app.trusted_access}
            <span class="access_type trusted_access">Trusted</span>
        {/if}
        <span class="ae_user">user: {$ae_app.ae_user}</span>
    )
    </span>
    </p>
</section>

<div class="ae_overview">
<div class="ae_info ds__sponsorships_info ">
    {@html $ae_app.sponsorships.ds.sponsorships_info}
</div>
</div>

{#if $ae_app.sponsorships.show_main__options}
<section class="ae_section ae_options ae_column sponsorship_obj__options">
    <div class="ae_note ds__sponsorships_options ">
        {@html $ae_app.sponsorships.ds.sponsorships_options}
    </div>

    <div class="filters_and_search">



        <form on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_form} class="search_form">
        <div class="ae_group">
        <input
            type="search"
            placeholder="Search (name, description, etc.)"
            id="meeting_fulltext_search_qry_str"
            name="fulltext_search_qry_str"
            bind:value={$ae_app.sponsorships.fulltext_search_qry_str}
            style="width: 50%;"
            class="bs-input"
            >
        <button
            on:click={handle_oninput_fulltext_search_qry_str}
            >
            <span class="fas fa-search"></span> Search
        </button>
        </div>

        <fieldset>
            <legend>Filter on?</legend>
            <div class="ae_row ae_flex_justify_around ae_width_md">
            <label>Paid
                <input
                    name="qry_paid"
                    type="checkbox"
                    bind:checked={$ae_app.sponsorships.qry_paid}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    >
            </label>
            <label>Guests
                <input
                    name="qry_guest_li"
                    type="checkbox"
                    bind:checked={$ae_app.sponsorships.qry_guest_li}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    >
            </label>
            </div>
        </fieldset>

        <fieldset>
            <legend>Select level?</legend>
            <div class="ae_row ae_flex_justify_around ae_width_100">
            <label>All
                <input
                    name="qry_type"
                    type="radio"
                    value=""
                    bind:group={$ae_app.sponsorships.qry_type}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    title="Show all meeting types"
                    >
            </label>
            <label>Friend ($5,000)
                <input
                    name="qry_type"
                    type="radio"
                    value="Friend"
                    bind:group={$ae_app.sponsorships.qry_type}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    title="Friend ($5,000)"
                    >
            </label>
            <label>Supporter ($7,500)
                <input
                    name="qry_type"
                    type="radio"
                    value="Supporter"
                    bind:group={$ae_app.sponsorships.qry_type}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    title="Supporter ($7,500)"
                    >
            </label>
            <label>Champion ($12,500)
                <input
                    name="qry_type"
                    type="radio"
                    value="Champion"
                    bind:group={$ae_app.sponsorships.qry_type}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    title="Champion ($12,500)"
                    >
            </label>
            <label>Advocate ($20,000)
                <input
                    name="qry_type"
                    type="radio"
                    value="Advocate"
                    bind:group={$ae_app.sponsorships.qry_type}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    title="Advocate ($20,000)"
                    >
            </label>
            <label>Presenting Partner ($30,000)
                <input
                    name="qry_type"
                    type="radio"
                    value="Presenting Partner"
                    bind:group={$ae_app.sponsorships.qry_type}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    title="Presenting Partner ($30,000)"
                    >
            </label>
            <label>Signature Partner ($50,000)
                <input
                    name="qry_type"
                    type="radio"
                    value="Signature Partner"
                    bind:group={$ae_app.sponsorships.qry_type}
                    on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
                    title="Signature Partner ($50,000)"
                    >
            </label>
            </div>
        </fieldset>

        </form>

        {#await ae_sponsorship_obj_li_get_promise}
            <div><span class="fas fa-spinner"></span>
            Loading sponsorships...</div>
        {:then ae_sponsorship_obj_li_get_result}
            <!-- <p>Sponsorship list: {ae_sponsorship_obj_li_get_result}</p> -->
        {:catch error}
            <div>Error: {error.message}</div>
        {/await}

        <div class="ae_group ae_row">

        {#if $ae_app.trusted_access && $ae_app.sponsorships.hidden == 'not_hidden'}
            <button
                on:click={() => {
                    $ae_app.sponsorships.hidden = 'all';
                    $ae_app.sponsorships.limit = 150;
                    $slct_trigger = 'load__sponsorship_obj_li';
                }}
                class="btn_show_bb_post ae_btn btn btn-info"
                >
                <span class="fas fa-eye"></span> Show Hidden Sponsorships
            </button>
        {:else if $ae_app.trusted_access && $ae_app.sponsorships.hidden == 'all'}
            <button
                on:click={() => {
                    $ae_app.sponsorships.hidden = 'not_hidden';
                    $slct_trigger = 'load__sponsorship_obj_li';
                }}
                class="btn_hide_bb_post ae_btn btn btn-info"
                >
                <span class="fas fa-eye-slash"></span> Hide Hidden Sponsorships
            </button>
        {/if}

        {#if $ae_app.administrator_access && $ae_app.sponsorships.enabled == 'enabled'}
            <button
                on:click={() => {
                    $ae_app.sponsorships.hidden = 'all';
                    $ae_app.sponsorships.enabled = 'all';
                    $ae_app.sponsorships.limit = 500;
                    $slct_trigger = 'load__sponsorship_obj_li';
                }}
                class="btn_show_bb_post ae_btn btn btn-warning"
                >
                <span class="fas fa-eye"></span> Show Disabled Sponsorships
            </button>
        {:else if $ae_app.administrator_access && $ae_app.sponsorships.enabled == 'all'}
            <button
                on:click={() => {
                    $ae_app.sponsorships.enabled = 'enabled';
                    $slct_trigger = 'load__sponsorship_obj_li';
                }}
                class="btn_hide_bb_post ae_btn btn btn-warning"
                >
                <span class="fas fa-eye-slash"></span> Hide Disabled Sponsorships
            </button>
        {/if}

        <button
            on:click={() => {
                $slct.sponsorship_id = null;
                $slct.sponsorship_obj = {};

                const url = new URL(location);
                url.searchParams.delete('sponsorship_id');
                history.pushState({}, '', url);

                $ae_app.sponsorships.show_main__options = false;
                $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
                $ae_app.sponsorships.show_view__sponsorship_obj = false;
                $ae_app.sponsorships.show_edit__sponsorship_obj = true;
            }}
            class="btn_new_recovery_meeting ae_btn btn btn-secondary"
            >
                <span class="fas fa-plus"></span> Create new Sponsorship
        </button>
        </div>

    </div> <!-- END: div filters_and_search -->

</section>
{/if}


{#if $slct.sponsorship_obj_li && $ae_app.sponsorships.show_list__sponsorship_obj_li}
    <List_sponsorship_obj />
{/if}


{#if $ae_app.sponsorships.show_edit__sponsorship_obj}
<!-- <section class="ae_edit sponsorship_obj sponsorship_id ae_sponsorship_id_edit"> -->
<Element_modal_v3
        show = { true }
        modal_cover_body = { false }
        report_client_dimensions = { true }
        on:close={ () => {
            $ae_app.sponsorships.show_main__options = true;
            $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
            $ae_app.sponsorships.show_edit__sponsorship_obj = false;
            $ae_app.sponsorships.show_view__sponsorship_obj = false;

            const url = new URL(location);
            url.searchParams.delete('sponsorship_id');
            history.pushState({}, '', url);

            let message = {'sponsorship_id': null};
            window.parent.postMessage(message, "*");
        }}
        on:report__modal_dimensions={ (event) => {
            console.log('*** on:report__modal_dimensions ***');
            console.log(event.detail);

            $ae_app.modal_dimensions = event.detail.modal_dimensions;
        }}
        >
    <span slot="header_title">{@html ($slct.sponsorship_obj.name ? $slct.sponsorship_obj.name : 'New Sponsorship')}</span>

    <span slot="body">

        <!-- <Edit_sponsorship_obj
            on:created__meeting_obj={handle_created_sponsorship_obj}
            on:updated__meeting_obj={handle_updated_sponsorship_obj}
            on:deleted__meeting_obj={handle_deleted_sponsorship_obj}
            /> -->

    </span>
</Element_modal_v3>
<!-- </section> -->
{/if}


{#if $ae_app.sponsorships.show_view__sponsorship_obj && $slct.sponsorship_obj}
<!-- <section class="ae_view sponsorship_obj sponsorship_id ae_sponsorship_id_view"> -->
<Element_modal_v3
    show = { true }
    modal_cover_body = { false }
    report_client_dimensions = { true }
    on:close={ () => {
        $slct.sponsorship_id = null;
        $slct.sponsorship_obj = {};

        $ae_app.sponsorships.show_main__options = true;
        $ae_app.sponsorships.show_list__sponsorship_obj_li = true;
        $ae_app.sponsorships.show_view__sponsorship_obj = false;
        $ae_app.sponsorships.show_edit__sponsorship_obj = false;

        const url = new URL(location);
        url.searchParams.delete('sponsorship_id');
        history.pushState({}, '', url);

        let message = {'sponsorship_id': null};
        window.parent.postMessage(message, "*");
    }}
    on:report__modal_dimensions={ (event) => {
        console.log('*** on:report__modal_dimensions ***');
        console.log(event.detail);

        $ae_app.modal_dimensions = event.detail.modal_dimensions;
    }}
    >
    <span slot="header_title">{@html $slct.sponsorship_obj.name}</span>

    <span slot="body">

        <View_sponsorship_obj />

    </span>
</Element_modal_v3>
<!-- </section> -->
{/if}

</section>


<style>


/* .ae_meta {
    font-size: smaller;
    color: hsla(0,0%,50%,1);
} */

/* .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_view.sponsorship_obj {
    border: dashed thin hsla(0,0%,70%,1);

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

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

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

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

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

</style>
