<script>
    import RenderField from "./RenderField.svelte";
    import Avatar from "../account/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 sort;
    export let visibleColumns;

</script>

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