<script lang="ts">
/** @type {import('./$types').LayoutData} */
let { children } = $props();

import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_journals/ae_journals_stores';

</script>

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

<div class="ae_notes">

<nav class="submenu flex flex-row justify-center gap-1">
    <a href="/" class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500">Home</a>
    <!-- <a href="/about" class="btn btn-sm">About</a> -->
    <!-- <a href="/settings" class="btn btn-sm">Settings</a> -->
    <button

        onclick={() => {

            // Clear the local and session storage. Clearing the localStorage will force it to be re-created.
            localStorage.clear();
            sessionStorage.clear();

            // Clear Indexed DB as well
            indexedDB.deleteDatabase('ae_core_db');
            indexedDB.deleteDatabase('ae_notes_db');

            // This does not seem to work fast enough or something?
            goto('/', {invalidateAll: true});

            // The page does usually seem to reload correctly?
            window.location.reload(true); // true only works with Firefox
            // alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
        }}
        class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500"
        title="Clear App Data & Settings - Reload: Clear the browser storage for this site"
        >
        <!-- <span class="fas fa-eraser mx-1"></span> -->
        <span class="fas fa-sync mx-1"></span>
        Clear & Reload
    </button>
</nav>

<section class="status flex flex-col justify-center items-center gap-1">
{#if $ae_loc.administrator_access}
    <h3 class="h4">Administrator Access - Technical Support</h3>
    <p>You are accessing the notes module with "administrator" level permissions.</p>
{:else if $ae_loc.trusted_access}
    <h3 class="h4">Trusted Access - Staff</h3>
    <p>You are accessing the notes module with "trusted" level permissions.</p>
{:else if !$ae_loc.trusted_access}
    <h3 class="h4">Restricted Access</h3>
    <p>You are accessing to the notes module is limited</p>
{/if}
</section>

<section class="main_content outline">
    {@render children?.()}
</section>

</div>