<script>

    import BlockButtons from "./BlockButtons.svelte";
    import BlockElements from "./BlockElements.svelte";
    import {flip} from "svelte/animate";
    import {quintOut} from 'svelte/easing';
    import {getContext} from "svelte";
    const channel = getContext("channel");
    export let record;
    export let field;
    export let value = [];
    export let graph;
    let blockSchema = channel.schemas.find((s) => s.name === field.schema);
</script>


<div class=" ">
    <div class="inline-card-wrapper">
        <BlockButtons
                bind:blockData={value}
                {blockSchema}
        />
    </div>
    {#each value as blockItemData (blockItemData.id)}
        <div class="block-field-wrapper" animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
            <BlockElements
                    bind:block={blockItemData}
                    bind:blockData={value}
                    {record}
                    {field}
                    bind:graph
            />

        </div>
    {/each}

</div>