<script>
    import Text from "./elements/Text.svelte";
    import Textarea from "./elements/Textarea.svelte";
    import Rich from "./elements/Rich.svelte";
    import Reference from "./elements/Reference.svelte";

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

    export let block;

</script>

<div class="card editor-field bg-light lx-card d-flex">
    <span class="text-muted d-block fs-6 mb-1">{block.ui}</span>
    {#if block.ui === "text"}

        <Text
            bind:block={block}
        />

    {:else if block.ui === "textarea"}

        <Textarea
            bind:block={block}
        />

    {:else if block.ui === "rich"}
        <Rich
            bind:block={block}
        />
    {:else if block.ui === "reference"}
        <Reference
            {record}
            {field}
            {schemas}
            bind:graph
            bind:block={block}
        />
    {/if}

</div>
