I should have saved this long ago. Lots of changes. Learning a lot as well!

src/routes/sponsorships/[slug]/+page.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+export let data;
+console.log(`page data:`, data);
+
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+
+
+// To retrieve the store, getModalStore must be invoked at the top level of your component!
+import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
+import type {
+    DrawerSettings,
+    ModalSettings
+    , ModalComponent, ModalStore
+    } from '@skeletonlabs/skeleton';
+const modalStore = getModalStore();
+
+import Edit_modal_sponsorship_obj from '../10_edit_modal__sponsorship_obj.svelte';
+
+const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
+
+const modal_edit__sponsorship_obj: ModalSettings = {
+	type: 'component',
+	component: modalComponentEditSponsorshipObj,
+    title: 'Edit Your Sponsorship',
+};
+
+// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
+
+$slct.sponsorship_id = data.url.searchParams.get('ae_id');
+console.log(data.url.searchParams.get('ae_id'));
+console.log(`Selected Sponsorship ID:`, $slct.sponsorship_id);
+$slct_trigger = 'load__sponsorship_obj';
+
+
+$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
+    console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
+    console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
+
+    $slct_trigger = null;
+
+    handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
+
+    modalStore.trigger(modal_edit__sponsorship_obj);
+}
+
+let ae_sponsorship_obj_get_promise;
+
+async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
+    console.log('*** handle_load_sponsorship_id_obj() ***');
+
+    let params = {};
+
+	// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
+    ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
+        api_cfg: $ae_api,
+        obj_type: 'sponsorship',
+        obj_id: sponsorship_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.
+        params: params,
+        log_lvl: 2
+        })
+    .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;
+}
+
+
+
+</script>
+
+
+<section
+    class="container h-full mx-auto"
+    >
+
+<header>
+    <h1 class="h1">Information Goes Here</h1>
+</header>
+
+<section>More information goes here.</section>
+
+<section class="btn btn-group">
+    <button
+        class="btn variant-ghost-primary"
+        on:click={() => {
+            // $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
+
+            modalStore.trigger(modal_edit__sponsorship_obj);
+        }}
+        >
+        <span class="fas fa-edit mx-1"></span>
+        Start/Edit Sponsorship
+    </button>
+</section>
+
+</section>