<script>
    import {onMount} from 'svelte';
    import {t} from '../../translations.svelte.js';
    let { caption = t('document.select_state'), selected = $bindable(0), onchange = (val) => console.log('changed to '+val)} = $props();

    let message = $state(t('document.loading'));
    let states = $state(null);

    async function loadStates(){
        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/states`;
        var resp = await fetch(url,{credentials: 'include'});
        if (resp.ok){
            states = await resp.json();
        } else {
            message = await resp.text();
        }
    }

    onMount(loadStates)
</script>

{#if states}
<select bind:value={selected} onchange={() => onchange(selected)}>
    {#each Object.entries(states) as [k,s]}
    <option value={+k}>{t('document.state_'+s.toLowerCase())}</option>
    {/each}
</select>
{:else}
<span>{message}</span>
{/if}