<script lang="ts">
interface Props {
    /** @type {import('./$types').LayoutData} */
    data: any;
    children?: import('svelte').Snippet;
    log_lvl?: number;
}

let { data, children, log_lvl = 0 }: Props = $props();

// *** Import Svelte specific

let box: any;
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);

// let scroll_x = $state(0);
// let scroll_y = $state(0);

function parse_scroll() {
    // console.log(`parse_scroll() called`);
    xLeft = box.scrollLeft;
    xScroll = box.scrollWidth;
    xWidth = box.clientWidth;
    yTop = box.scrollTop;
    yHeight = box.clientHeight;
    yScroll = box.scrollHeight;
    // console.log(`parse_scroll() called: ${yTop}`);
}

// *** Functions and Logic
</script>

<!-- <svelte:head>
    <title>
        &AElig;: Badges for
        {ae_util.shorten_string({
            string: $lq__event_obj?.name ?? '-- not set --',
            max_length: 12
        })}
        - Badges v3 -
        {EVENTS_MODULE_TITLE}
    </title>
</svelte:head> -->
<!-- - Badges - {EVENTS_MODULE_TITLE} -->

{@render children?.()}
