<script>
    import { useTinyRouter } from 'svelte-tiny-router';
    import { onMount } from 'svelte';
    import { t } from '../../translations.svelte.js';
    import LineEditor from '../../Components/LineEditor.svelte';
    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
    import PriceEditor from '../../Components/PriceEditor.svelte';
    var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {} } = $props();
    let prefix = `pos.${pos.number}`
</script>
{#if pos}
    <tr>
        <td>{pos.number}</td>
        <td class="item">
            <LineEditor bind:value={pos.item} editable={editable} onSet={(val) => submit(`${prefix}.item`,val)} />
        </td>
        <td class="title">
            <LineEditor bind:value={pos.title} editable={editable} onSet={(val) => submit(`${prefix}.title`,val)} />
        </td>
        <td class="amount">
            <LineEditor bind:value={pos.amount} editable={editable} onSet={(val) => submit(`${prefix}.amount`,val)} />
        </td>
        <td class="unit">
            <LineEditor bind:value={pos.unit} editable={editable} onSet={(val) => submit(`${prefix}.unit`,val)} />
        </td>
        <td class="price">
            <PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} onSet={(val) => submit(`${prefix}.unit_price`,val)} /></td>
        <td class="price">
            {Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}
        </td>
        <td class="tax">
            {pos.tax}&nbsp;%
        </td>
    </tr>
    <tr>
        <td class="move">⏫<br/>⏬</td>
        <td colspan="6" class="description">
            <MarkdownEditor bind:value={pos.description} editable={editable} onSet={(val) => submit(`${prefix}.description`,val)} />
        </td>
        <td></td>
    </tr>
{/if}