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

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

    import Item        from '../../Components/Item.svelte';

    let {
        company_id,
        onSelect = (item) => {}
    } = $props();

    let items = $state(null);

    async function loadItems(){
        const url  = api('stock/list');
        let data   = { company_id };
        const resp = await post(url,data);
        if (resp.ok){
            items = await resp.json();
            yikes();
        } else {
            error(resp);
        }
    }

    onMount(loadItems);

</script>

<div>
    <h1>{t('items')}</h1>
    {#if items}
    {#each items as item,idx}
    <Item item={item} onclick={() => onSelect(item)} />
    {/each}
    {/if}
</div>
