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

    let { key } = $props();

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

    async function loadContent(res){
        if (res.ok){
            page  = null;
            page  = await res.json();
            yikes();
            return true;
        } else {
            error(res);
            return false;
        }
    }

    async function loadPage(){
        const url = api(`wiki/page/${key}`);
        const res = await fetch(url,{credentials:'include'});
        loadContent(res);
    }

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

    $effect(loadPage);
</script>
{#if page}
<div class="wiki page">
    <h2>{page.title}</h2>
    <div class="markdown">
        {@html page.content.rendered}
    </div>
</div>
{/if}
