<script>
    import Icon from "../common/Icon.svelte";

    import { getContext, createEventDispatcher } from "svelte";
    import Preview from "../files/Preview.svelte";
    import { previewTitle } from "./Preview";
    import Status from "./Status.svelte";
    const dispatch = createEventDispatcher();
    const channel = getContext("channel");
    export let graph;
    export let record;
    export let classes = "";
    export let hasDelete = false;

    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
    let cardTitle = previewTitle(record, graph);
    function remove(e) {
        e.preventDefault();
        dispatch("remove", record.id);
    }
</script>

<div

    class="card mb-2 bg-light  {classes}"
    style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
>
    <div class="card-body d-flex">
        {#if schema.type === "files"}
            <div style="max-width:94px;margin-right:15px">
                <Preview {record} size="small" />
            </div>
        {/if}
        <div class="overflow-hidden">
            <a
                class="title-link m-0 fs-5 text-decoration-none text-dark d-block"
                href="{channel.lucentUrl}/records/{record.id}"
                title={cardTitle}
            >
                {cardTitle}
            </a>
            <small class="text-muted">
                {schema.label}
            </small>
            <small class="text-muted">
                {#if record.status === "draft"}
                    <Status status={record.status} />
                {/if}
            </small>
        </div>
    </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;
    }
    .title-link {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
