<script>
    import PreviewCardSmall from "../../records/PreviewCardSmall.svelte";

    export let record;
    export let field;
    export let schemas;
    export let graph;

    $: recordEdges =
        graph.edges
            ?.filter((ed) => ed.field === field.name && ed.source === record.id)
            .map((edge) => {
                return graph.records.find((r) => r.id === edge.target);
            })
            .filter((record) => (!record ? false : true)) ?? [];

</script>

<div class="references">
    {#each recordEdges as recordEdge}
        <span class="reference">
            <PreviewCardSmall {schemas} {graph} record={recordEdge}/>
        </span>
    {/each}
</div>

<style>
    div.references {
        /* max-width: 148px; */
        max-height: 48px;
        /* text-overflow: ellipsis; */
        overflow-x: hidden;
        overflow-y: hidden;
    }
</style>
