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

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

    let {
        caption,
        company,
        value = $bindable(0),
        onchange = () => console.log('changed')
    } = $props();

    let message   = t('loading');
    let templates = $state(null);

    async function loadTemplates(){
        const url = api('document/templates');
        var resp = await post(url,{company:company});
        if (resp.ok){
            templates = await resp.json();
        } else {
            message   = await resp.text();
        }
    }

    onMount(loadTemplates)
</script>

{#if templates}
<select bind:value onchange={onchange}>
    <option value={0}>{caption}</option>
    {#each templates as template}
    <option value={template}>{template}</option>
    {/each}
</select>
{:else}
<span>{message}</span>
{/if}

