<script>
    import { getContext, createEventDispatcher } from "svelte";
    import PreviewEdge from "./preview/PreviewEdge.svelte";
    import PreviewRecord from "./preview/PreviewRecord.svelte";
    import Icon from "../common/Icon.svelte";
    const dispatch = createEventDispatcher();
    const channel = getContext("channel");
    export let classes = "";
    export let hasDelete = false;
    export let record
    export let edge
    export let graph
    export let field
    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);

    function remove(e) {
        e.preventDefault();
        dispatch("remove", record.id);
    }
</script>


<!-- Preview Edge-->
<div

        class="card mb-2 bg-light  {classes}"
        style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
>
    <div class="card-body d-flex flex-md-column">
        {#if field.data}
            <PreviewEdge {record} {edge} {graph} {field} {classes}/>
        {:else}
            <PreviewRecord {record} {graph} {classes} />
        {/if}

    </div>

    {#if hasDelete}
        <div class="position-absolute end-0" style="top:5px">
            <button
                    class="trash-button  text-dark btn btn-sm btn-link"
                    on:click={remove}
            >
                <Icon icon="trash-can"/>
            </button>
        </div>
    {/if}
</div>


<style>

    .card .trash-button {
        display: none;
    }

    .card:hover .trash-button {
        display: block;
    }

</style>