<script>
    import { useTinyRouter } from 'svelte-tiny-router';
    import { api, drop, target }  from '../../urls.svelte';
    import { error, yikes } from '../../warn.svelte';
    import { t }       from '../../translations.svelte';
    import Tags        from '../tags/TagList.svelte';

    const router = useTinyRouter();
    let { bookmark } = $props();

    async function del(bookmark){
        if (confirm(t('confirm_delete',{element:bookmark.url}))){
            var url = api(`bookmark/${bookmark.id}`)
            var res = await drop(url);
            if (res.ok){
                yikes();
                router.navigate('/bookmark')
            } else error(res);
        }
    }

    function edit(bookmark){
        router.navigate(`/bookmark/${bookmark.id}/view`);
    }
</script>

{#if bookmark}
<fieldset class="bookmark">
    <legend>
        <a href={bookmark.url} target="_blank" class="url">{bookmark.url}</a>
        <a class="symbol" onclick={e => edit(bookmark)} title={t('edit_object',{object:t('bookmark')})} ></a>
        <a class="symbol" onclick={e => del(bookmark)} title={t('delete_object',{object:t('bookmark')})} ></a>
    </legend>
    <legend class="date">
        {bookmark.timestamp.replace('T',' ')}
    </legend>
    {@html target(bookmark.comment.rendered)}
    <Tags module="bookmark" id={bookmark.id} />
    <button onclick={e => edit(bookmark)} >{t('edit')}</button>
</fieldset>
{/if}