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

    const icons = {
        10 : '',
        20 : '',
        40 : '',
        60 : '',
        100: ''
    }

    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>-->
<span class="states">
    {#each Object.entries(project.allowed_states) as [code,name]}
    <button onclick={e => onchange(code)} title={code%10?name:t('state_'+name.toLowerCase())} class={selected == code?'active':null}>
        {#if icons[code]}
        <span class="symbol">{icons[code]}</span>
        {:else}
        {code%10?name:t('state_'+name.toLowerCase())}
        {/if}
    </button>
    {/each}
</span>
{/if}