<script>

    import Status from "../../records/Status.svelte";
    import Preview from "../../files/Preview.svelte";
    import {getContext} from "svelte";
    import {previewTitle} from "../../records/Preview.js";

    const channel = getContext("channel");

    export let classes
    export let record
    export let graph

    let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
    let cardTitle = previewTitle(record, graph);
</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>
</div>


<style>

    .title-link {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
