<script>
    import Position from './Position.svelte';
    import { useTinyRouter } from 'svelte-tiny-router';
    import { onMount } from 'svelte';
    import { t } from '../../translations.svelte.js';

    var { document = $bindable(null), submit = (key,newVal) => {} } = $props();

    let editable = $derived(document.state == 1);
</script>

{#if document.positions}
<table class="positions">
    <thead>
        <tr>
            <th>{t('document.pos')}</th>
            <th>{t('document.code')}</th>
            <th>{t('document.title_or_desc')}</th>
            <th>{t('document.amount')}</th>
            <th>{t('document.unit')}</th>
            <th>{t('document.unit_price')}</th>
            <th>{t('document.net_price')}</th>
            <th>{t('document.tax_rate')}</th>
        </tr>
    </thead>
    <tbody>
        {#each Object.entries(document.positions) as [id,pos]}
        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} {submit} />
        {/each}
        <tr class="sums">
            <td colspan="2"></td>
            <td>{t('document.net_sum')}</td>
            <td>{document.net_sum/100}&nbsp;{document.currency}</td>
            <td colspan="2">{t('document.gros_sum')}</td>
            <td>{document.gross_sum/100}&nbsp;{document.currency}</td>
            <td></td>
        </tr>
    </tbody>
</table>
{/if}