<script>
    import RenderField from "./RenderField.svelte";
    import Avatar from "../../common/Avatar.svelte";
    import Status from "../records/Status.svelte";
    import { usernameById } from "../account/users";
    import { friendlyDate } from "../../helpers";

    export let schema;
    export let users;
    export let graph;
    export let record;
    export let sortParam;
    export let sortField;
    export let visibleColumns;
</script>

{#each visibleColumns as field, index}
    <td
        class="field-ui-{field.info.name}"
        class:is-sort={field.name === sortField.name}
    >
        <RenderField {record} {schema} {graph} {field} />
    </td>
{/each}
{#if schema.visible?.includes("status")}
    <td
        class="text-center"
        class:is-sort={"-status" == sortParam || "status" == sortParam}
    >
        <Status status={record.status} />
    </td>
{/if}
{#if schema.visible?.includes("_sys.createdBy")}
    <td
        class="text-center"
        class:is-sort={"-_sys.createdBy" == sortParam ||
            "_sys.createdBy" == sortParam}
    >
        <Avatar name={usernameById(users, record._sys.createdBy)} side={24} />
    </td>
{/if}
{#if schema.visible?.includes("_sys.updatedBy")}
    <td
        class="text-center"
        class:is-sort={"-_sys.updatedBy" == sortParam ||
            "_sys.updatedBy" == sortParam}
    >
        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24} />
    </td>
{/if}
{#if schema.visible?.includes("_sys.createdAt")}
    <td
        class:is-sort={"-_sys.createdAt" == sortParam ||
            "_sys.createdAt" == sortParam}
    >
        {friendlyDate(record._sys.createdAt)}
    </td>
{/if}
{#if schema.visible?.includes("_sys.updatedAt")}
    <td
        class:is-sort={"-_sys.updatedAt" == sortParam ||
            "_sys.updatedAt" == sortParam}
    >
        {friendlyDate(record._sys.updatedAt)}
    </td>
{/if}
