<script>
    import { onMount }       from 'svelte';
    import { useTinyRouter } from 'svelte-tiny-router';

    import { api, target }   from '../../urls.svelte.js';
    import { error, yikes }  from '../../warn.svelte';
    import { t }             from '../../translations.svelte.js';

    import ItemDisplay from '../stock/display.svelte';

    let { module, id } = $props();
    let object         = $state(null);
    let router         = useTinyRouter();
    let task           = $state(null);

    function go(){
        router.navigate(`/${module}/${id}/view`);
    }

    async function loadDefault(){
        const url  = api(`${module}/${id}`);
        const resp = await fetch(url,{credentials:'include'});
        if (resp.ok) {
            object = await resp.json();
        } else {
            error(resp);
        }
    }

    async function load(){
        loadDefault();
    }

    onMount(load);
</script>

{#if object}
{#if module=='bookmark'}
{@html target(object.comment.rendered).replace(/<p>(.*?)<\/p>/, '$1')} <!-- this is a workaround for in-proper formatting of paragraphs within list items in firefox -->
<p>
<a href={object.url} target="_blank">{object.url}</a>
</p>
<hr/>
{:else if module=='task' || module=='project'}
<span onclick={go}>{object.name}</span>
{:else if module=='wiki'}
<span onclick={go}>{object.title}</span>
{:else if module=='document'}
<span onclick={go}>{t('type_'+object.type)} {object.number} ({object.customer.name.split('\n')[0]})</span>
{:else if module=='stock'}
<ItemDisplay {module} {id} />
{:else}
<span class="error">No display defined in Reference.svelte for entities of type {module}.</span>
{/if}
{/if}