<script lang="ts">
    import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
    import { secondaryNavTree } from "$lib/core/constants";
    import { notificationViewModel } from "$lib/domains/notifications/notification.vm.svelte";
    import NotificationsTable from "$lib/domains/notifications/notifications-table.svelte";
    import { breadcrumbs, user } from "$lib/global.stores";
    import { onMount } from "svelte";
    import { get } from "svelte/store";

    // Set breadcrumb to notifications
    breadcrumbs.set([secondaryNavTree[1]]);

    onMount(() => {
        // Ensure user ID is set in the view model
        const currentUser = get(user);
        if (currentUser?.id) {
            notificationViewModel.filters = {
                ...notificationViewModel.filters,
                userId: currentUser.id,
            };
        }
    });
</script>

<MaxWidthWrapper cls="space-y-8 pt-12">
    <NotificationsTable />
</MaxWidthWrapper>
