<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}
                <div class="ms-2">
                    <PreviewCardSmall record={edgeRecord} />
                </div>
            {/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>
