<script>
    import { getContext, onMount } from "svelte";
    import RecordRow from "./RecordRow.svelte";
    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
    import { get } from "../../modules/remote";
    let { channel, user, data } = $props();
    let records = $state([]);
    let graph = $state(null);
    let users = $state([]);
    onMount(() => {
        get(channel.lucentUrl + "/home/records", {}, (data) => {
            records = data.records;
            graph = data.graph;
            users = data.users;
        });
    });
</script>

<ChannelLayout {body} {channel} schemas={data.schemas} {user}></ChannelLayout>
{#snippet body()}
    <h3 class="header-small mb-4 mt-5">Latest Content changes</h3>
    {#if records.length > 0}
        <div class="table">
            <table class="">
                <tbody>
                    {#each records as record (record.id)}
                        <tr>
                            <RecordRow {channel} {graph} {record} {users}
                            ></RecordRow>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {/if}
{/snippet}
