<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
    import { liveQuery } from 'dexie';

    import type { key_val } from '$lib/stores/ae_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';

    // import { core_func } from '$lib/ae_core_functions';
    import { db_events } from '$lib/ae_events/db_events';
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger
    } from '$lib/stores/ae_events_stores';
    import { events_func } from '$lib/ae_events_functions';

    let lq__event_obj = $derived(
        liveQuery(async () => {
            if (log_lvl) {
                console.log(
                    `*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`
                );
            }
            let results = await db_events.event.get(
                $events_slct?.event_id ?? ''
            );

            return results;
        })
    );

    let nav_y_height = $state(0);

    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
    $effect(() => {
        // if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
        // }
    });
</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} -->

<!-- +layout: Where is here??? -->

{@render children?.()}
