<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 { 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');
	let url = window.location.href;
	console.log(url);
});
</script>


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

{#if $ae_loc.ds['hub__site__root_page_content']}
	{@html $ae_loc.ds['hub__site__root_page_content']}
{:else}
<div class="space-y-10 text-center flex flex-col items-center">
	<h1 class="h1">One Sky IT's new Aether App Template</h1>
	<h2 class="h2">Development using: Svelte, SvelteKit, Tailwind, Skeleton</h2>

	<div class="flex justify-center space-x-2">
		<a
			class="btn variant-filled"
			href="/sponsorships"
		>
			Open Sponsorships
		</a>

		<a
			class="btn variant-filled"
			href="/events_speakers"
		>
			Open Speakers
		</a>
	</div>
</div>
{/if}


<div data-sveltekit-preload-data="false" class="">
{#if $ae_loc.iframe}
<a
	class="btn btn-sm variant-soft"
	href="/?iframe=false"
	>
	<span class="fas fa-code mx-1"></span>
	Exit iframe Mode
</a>
{:else}
<a
	class="btn btn-sm variant-soft"
	href="/?iframe=true"
	>
	<span class="fas fa-code mx-1"></span>
	Use iframe Mode
</a>
{/if}
<button
	class="btn btn-sm variant-soft"
	title="Reload and clear the page cache"
	on:click={() => {
		// $ae_loc.
		window.location.reload(true);
	}}
	>
	<span class="fas fa-sync mx-1"></span>
	Reload and Clear Cache
</button>
<button
	class="btn btn-sm variant-soft"
	title="Clear the browser storage for this page"
	on:click={() => {
		// $ae_loc.
		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>

</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>
