<script>
    import SvelteMarkdown from 'svelte-markdown';
    import { currentUser } from '$lib/store';
    import { deleteMessage } from '$lib/apiServer';

    export let at;  // XXX: Omitted for now.
    export let sender;
    export let message;

    let timestamp = new Date(at).toTimeString();
</script>

<div class="card card-hover m-4 relative">
    <span class="chip variant-soft sticky top-o left-0">
        <!-- TODO: should this show up for only the first of a run? -->
        @{sender.name}:
    </span>
    <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
    <section class="p-4">
        <SvelteMarkdown source={message.body} />
    </section>
</div>

<style>
    .card .timestamp {
        display: none;
    }
    .card:hover .timestamp {
        display: flex;
    }
</style>
