<script>
    import {onMount} from 'svelte';

    import {api}     from '../../urls.svelte.js';
    import {t}       from '../../translations.svelte.js';

    let {
        caption,
        onSelect = (type) => console.log('changed'),
    } = $props();

    let message = t('loading');
    let types   = $state(null);
    let value   = $state(0);

    async function loadTypes(){
        const url = api('document/types');
        var resp = await fetch(url,{credentials: 'include'});
        if (resp.ok){
            types = await resp.json();
        } else {
            message = await resp.text();
        }
    }

    onMount(loadTypes)
</script>

{#if types}
<select bind:value onchange={e => onSelect(value)}>
    <option value={0}>{caption}</option>
    {#each Object.entries(types) as [id,type]}
    <option value={id}>{t('type_'+type)}</option>
    {/each}
</select>
{:else}
<span>{message}</span>
{/if}

