<script>
    import {formatDistanceToNow, parseJSON} from "date-fns";
    import Avatar from "../account/Avatar.svelte";
    import Status from "../records/Status.svelte";
    import {previewTitle} from "../records/Preview";
    import Preview from "../files/Preview.svelte";
    import {usernameById} from "../account/users";
    import {getContext} from "svelte";

    const channel = getContext("channel");
    export let users;
    export let graph;
    export let record;
    let schema = channel.schemas.find((s) => s.name === record._sys.schema);
    let frieldlyUpdatedAt = formatDistanceToNow(
        parseJSON(record._sys.updatedAt),
        {addSuffix: true}
    );
</script>

<td>
    {#if schema.type === "files"}
        <Preview {record} size="tiny"/>
    {:else}
        <a
            href="{channel.lucentUrl}/records/{record.id}"
            class="text-decoration-none text-dark d-block"
        >
            {previewTitle(channel.schemas, record, graph)}
        </a>
    {/if}

</td>
<td><a
    class="text-decoration-none lx-small-text"
    href="{channel.lucentUrl}/content/{schema.name}">{schema.label}</a
>
</td>

<td class="text-center">
    <Status status={record._sys.status}/>
</td>
<td>
    <div class="d-flex">
        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24}/>
        <div class="ms-2">
            {frieldlyUpdatedAt}
        </div>
    </div>
</td>
