<script>
    import {previewTitle} from "./Preview";
    import {getContext} from "svelte";

    const channel = getContext("channel");
    export let record;
    export let graph;
    $: schema = channel.schemas.find((aschema) => aschema.name === record.schema);

    $: title = previewTitle(  record, graph);
</script>

{#if record?.data}
    <a
        href="{channel.lucentUrl}/records/{record.id}"
        class="text-decoration-none rounded py-1 px-2 d-inline-block"
        {title}
        style="border:2px solid {!schema.color
            ? '#999'
            : schema.color}!important;white-space: nowrap;"
    >
        {title}
    </a>
{/if}

<style>
    a {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        color: #333;
    }

    a:hover {
        opacity: 0.5;
        /* color: #fff; */
    }
</style>
