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

    let router = useTinyRouter();
    let tags = $state(null);

    function onclick(e){
        e.preventDefault();
        var target = e.target;
        while (target && !target.href) target=target.parentNode;
        let href = target.getAttribute('href');
        if (href) router.navigate(href);
        return false;
    }

    async function loadTags(){
        const url = api('tags');
        const res = await fetch(url,{credentials:'include'});
        if (res.ok){
            yikes();
            tags = await res.json();
        } else error(res);
    }

    onMount(loadTags)
</script>

<h1>{t('tags')}</h1>

<div class="cloud">
{#if tags}
{#each tags as entry}
<a href="/tags/use/{encodeURIComponent(entry.tag)}" class="tag" style="font-size: {40 - 28/entry.count}px" title={t('count_of_occurrences',entry)} {onclick} >{entry.tag}</a>
{/each}
{/if}
</div>