<script lang="ts">
	/** @type {import('./$types').LayoutData} */
	let log_lvl: number = 0;

	// *** Import Svelte specific
	// import { goto } from '$app/navigation';
	// import type { Writable } from 'svelte/store';

	// *** Import Aether specific variables and functions
	// import type { key_val } from '$lib/ae_stores';
	// import { ae_util } from '$lib/ae_utils/ae_utils';
	// import { api } from '$lib/api';
	import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
	import {
		events_loc,
		events_slct,
		events_trigger,
		events_trig_kv
	} from '$lib/stores/ae_events_stores';

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

	interface Props {
		data: any;
		children?: import('svelte').Snippet;
	}

	let { data, children }: Props = $props();

	$events_loc.qry__enabled = 'enabled';
	$events_loc.qry__hidden = 'not_hidden';
	$events_loc.qry__limit = 15;
	$events_loc.qry__offset = 0;

	if (log_lvl) {
		console.log(`$slct.account_id = `, $slct.account_id);
	}
	// let ae_acct = data[$slct.account_id];
	// if (log_lvl) {
	//     console.log(`ae_acct = `, ae_acct);
	// }
</script>

<svelte:head>
	<title>Core - {$ae_loc.title ?? 'Æ loading...'}</title>
</svelte:head>

<div class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto">
	{#if $ae_loc?.manager_access === 'test-new-submenu'}
		<section class="submenu flex flex-row justify-center" class:hidden={$ae_loc.iframe}>
			<span class=" preset-tonal-secondary px-4 py-2">
				{#each Object.entries(data.submenu) as [key, item]}
					<!-- <a href="/settings/{item.slug}">{item.title}</a> -->
					<!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
					{#if item.disable}
						<!-- <button
            title={item.title}
            class="hover:variant-ghost-secondary"
            class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
            disabled={item.disable}

            on:click={() => {
                // goto(item.href, { });
            }}
            >
            {item.name}
        </button> -->
					{:else}
						<!-- <a
            href={item.href}
            title={item.title}
            class="hover:variant-ghost-secondary"
            class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
            class:disabled={item.disable}
            >
            {item.name}
        </a> -->
					{/if}
				{/each}
			</span>
		</section>
	{/if}

	<section class="main_content grow px-1 md:px-2 pb-28">
		<!-- <div class="container m-auto"> -->
		{@render children?.()}
		<!-- </div> -->
	</section>
</div>
