<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_loc?.title}
    </title>
</svelte:head> -->
<!-- - Badges - {$events_loc?.title} -->


{@render children?.()}
