<script>
    import {onMount} from 'svelte';
    import {api}     from '../urls.svelte.js';
    import {t}       from '../translations.svelte.js';

    let {
        caption    = t('select_state'),
        selected   = $bindable(0),
        onchange   = (val) => console.log('changed to '+val),
        project    = null
    } = $props();
</script>

{#if project?.allowed_states}
<select bind:value={selected} onchange={() => onchange(selected)}>
    {#each Object.entries(project.allowed_states) as [code,name]}
    <option value={+code}>{code%10?name:t('state_'+name.toLowerCase())}</option>
    {/each}
</select>
{/if}