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

    let {
        caption     = t('select_permission'),
        selected    = $bindable(0),
        onchange    = (val) => console.log('changed to',val),
        permissions = null
    } = $props();

    function onSelect(newVal){
        onchange({name:permissions[newVal],code:newVal});
    }

    let message = $state(t('loading'));
</script>

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