<script lang="ts">
/** @type {import('./$types').PageData} */
export let data;
// console.log(`ae_ Svelte root +page data:`, data);

import { onMount } from 'svelte';

import { PUBLIC_TESTING } from '$env/static/public';
// console.log(`AE Config - +page.svelte PUBLIC_TESTING:`, PUBLIC_TESTING);

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

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';
// console.log($ae_loc, $ae_sess, $ae_api);


onMount(() => {
    console.log(`Root: +page.svelte; URL: ${window.location.href}`);
});
</script>


<section class="ae_root md:container h-full mx-auto flex flex-col items-center p-4 space-y-12">

<Element_data_store
	ds_code="hub__site__root_page_header"
	ds_type="html"
	for_type={null}
	for_id={null}
	ds_name="Default: AE Hub - Site root page header HTML"
	class_li={$ae_sess.ds_loaded.hub__site__root_page_header === false ? 'hidden' : ''}
	bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_header}
	/>
<!-- page header DS: {$ae_sess.ds_loaded.hub__site__root_page_header} -->

<Element_data_store
	ds_code="hub__site__root_page_content"
	ds_type="html"
	for_type={null}
	for_id={null}
	ds_name="Default: AE Hub - Site root page content HTML"
	class_li={$ae_sess.ds_loaded.hub__site__root_page_content === false ? 'hidden' : 'grow'}
	bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_content}
	/>
<!-- page content DS: {$ae_sess.ds_loaded.hub__site__root_page_content} -->

<section class="flex flex-col items-center p-4 space-y-6">

<div data-sveltekit-preload-data="false" class="">
<button
	class="btn btn-sm variant-soft text-error-300 hover:text-error-800"
	title="Reload and clear the page cache"
	on:click={() => {
		window.location.reload(true);
	}}
	>
	<span class="fas fa-sync mx-1"></span>
	Reload and Clear Cache
</button>
<button
	class="btn btn-sm variant-soft text-error-300 hover:text-error-800"
	title="Clear the browser storage for this page"
	on:click={() => {
		localStorage.clear();
		sessionStorage.clear();
		alert('Local and Session Storage cleared. You will probably want to refresh the page.');
	}}
	>
	<span class="fas fa-sync mx-1"></span>
	Clear Storage
</button>
</div>

<Element_data_store
	ds_code="hub__site__root_page_footer"
	ds_type="html"
	for_type={null}
	for_id={null}
	ds_name="Default: AE Hub - Site root page footer HTML"
	display="block"
	class_li={!$ae_loc.trusted_access && $ae_sess.ds_loaded.hub__site__root_page_footer === false ? 'hidden' : ''}
	bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_footer}
	/>
<!-- page footer DS: {$ae_sess.ds_loaded.hub__site__root_page_footer} -->

</section>

</section>


<style lang="postcss">
/* figure {
	@apply flex relative flex-col;
}
figure svg,
.img-bg {
	@apply w-64 h-64 md:w-80 md:h-80;
}
.img-bg {
	@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
	animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
		glow 5s linear infinite;
}
@keyframes glow {
	0% {
		@apply bg-primary-400/50;
	}
	33% {
		@apply bg-secondary-400/50;
	}
	66% {
		@apply bg-tertiary-400/50;
	}
	100% {
		@apply bg-primary-400/50;
	}
}
@keyframes pulse {
	50% {
		transform: scale(1.5);
	}
} */
</style>
