<script>
    import Preview from "../../files/Preview.svelte";
    import PreviewCardSmall from "../PreviewCardSmall.svelte";

    export let field;
    export let side;
    export let edges;
    export let colorClass;
</script>

{#if ["reference", "file"].includes(field.info.name)}
    <div class="{colorClass}  field-content">
        <div class="d-flex align-items-center text-center flex-wrap">
            {#each edges[field.name] as edgeRecord}
                {#if edgeRecord._file?.path}
                    <div
                        class="ms-2 "
                        style="max-width:64px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
                    >
                        <Preview
                            record={edgeRecord}
                            size="small"
                            showFilename={true}
                        />
                    </div>
                {:else}
                    <div class="ms-2 ">
                        <PreviewCardSmall record={edgeRecord}/>
                    </div>
                {/if}
            {/each}
        </div>
    </div>
{:else if ["json", "block"].includes(field.info.name)}
    <div class="{colorClass} field-content" style="white-space: break-spaces;">
        {JSON.stringify(side, null, 2) ?? ""}
    </div>
{:else if field.info.name === "rich"}
    <div class="{colorClass}  field-content">{@html side ?? ""}</div>
{:else}
    <div class="{colorClass}  field-content">{JSON.stringify(side) ?? ""}</div>
{/if}

<!-- {/if} -->
<style>

    .field-content {
        max-height: 200px;
        overflow-y: scroll;
    }
</style>
