<script>
	export let services;
	export let store;

	let isStoreLoaded = false;

	$: if (services && services.helloEarthAlert) {
		// services.helloEarthAlert.alertMe();
	}
	$: if (services.core) {
		// services.core.testAlert();
	}

	$: if ($store) isStoreLoaded = true;
</script>

{#if isStoreLoaded}
	<div class="container p-12">
		<h1 class="h1">
			{#if $store.title}{$store.title}{/if}
		</h1>
		<h2 class="py-6 h2">
			{#if $store.description}{$store.description}{/if}
		</h2>
		<h3 class="mt-4 h3">Wallet Address</h3>
		{#if $store.pkpWallet}
			<p>{$store.pkpWallet.address}</p>
		{/if}

		<h4 class="mt-4 h4">store: hello (init default)</h4>
		{#if $store.hello}{$store.hello}{/if}
		<h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
		{#if $store.hello2}{$store.hello2}{/if}

		<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
		{#if $store.todos}
			<dl class="list-dl">
				{#each $store.todos as todo}
					<div>
						<span class="flex-auto">
							<dd>{todo.text}</dd>
						</span>
					</div>
				{/each}
			</dl>
		{/if}
	</div>
{:else}
	<div class="container">
		<p>Loading...</p>
	</div>
{/if}
