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

// *** Import Svelte specific
// import { browser } from '$app/environment';

// *** Import other supporting libraries
import { Brain, House, Library, RefreshCw, Satellite } from '@lucide/svelte';

// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
// import Element_data_store from '$lib/elements/element_data_store.svelte';

interface Props {
    /** @type {import('./$types').LayoutData} */
    data: any;
    children?: import('svelte').Snippet;
}

let { data, children }: Props = $props();
</script>

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

<div
    id="ae_hosted_files"
    class:iframe={$ae_loc?.iframe}
    class="
        ae_hosted_files
        m-auto flex h-full max-h-full
        max-w-6xl flex-col gap-1
        overflow-auto
        ">
    <nav
        class="
        submenu
        flex flex-row flex-wrap
        items-center justify-between
        gap-1
        border-b-2
        p-1
        px-2
        pb-2
        ">
        <span class="justify-self-start">
            <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
            <Satellite size="1.5em" class="mx-1 inline-block text-gray-500" />
            <abbr title="Aether - Hosted Files Module"> Æ Hosted Files </abbr>
        </span>
        <!-- <Element_data_store
        ds_code="hub__site__appshell_header"
        ds_type="html"
        /> -->
        <a
            href="/"
            class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-success-500 border">
            <House />
            <span class="hidden md:inline"> Home </span>
        </a>
    </nav>

    <section
        class:iframe={$ae_loc?.iframe}
        class="main_content grow px-1 pb-28 md:px-2">
        {@render children?.()}
    </section>
</div>
