working on document editor

frontend/src/routes/document/Position.svelte

@@ -2,25 +2,36 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
-
-    var { currency, pos = $bindable(null) } = $props();
+    import LineEditor from '../../Components/LineEditor.svelte';
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
+    import PriceEditor from '../../Components/PriceEditor.svelte';
+    var { currency, editable, pos = $bindable(null) } = $props();
 
     console.log(pos);
 </script>
 {#if pos}
     <tr>
         <td>{pos.number}</td>
-        <td>{pos.item}</td>
-        <td class="title">{pos.title}</td>
-        <td>{pos.amount}</td>
-        <td>{pos.unit}</td>
-        <td>{pos.unit_price/100}&nbsp;{currency}</td>
-        <td>{pos.net_price/100}&nbsp;{currency}</td>
+        <td>
+            <LineEditor bind:value={pos.item} editable={editable} />
+        </td>
+        <td class="title">
+            <LineEditor bind:value={pos.title} editable={editable} />
+        </td>
+        <td>
+            <LineEditor bind:value={pos.amount} editable={editable} />
+        </td>
+        <td>
+            <LineEditor bind:value={pos.unit} editable={editable} />
+        </td>
+        <td>
+            <PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} /></td>
+        <td>{Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}</td>
         <td>{pos.tax}&nbsp;%</td>
     </tr>
     <tr>
         <td class="error">⏫<br/>⏬</td>
-        <td colspan="6">{@html pos.description}</td>
+        <td colspan="6"><MarkdownEditor bind:value={pos.description} editable={editable} /></td>
         <td></td>
     </tr>
 {/if}

frontend/src/routes/document/PositionList.svelte

@@ -5,7 +5,10 @@
     import { t } from '../../translations.svelte.js';
 
     var { document = $bindable(null) } = $props();
+
+    let editable = $derived(document.state == 1);
 </script>
+
 {#if document.positions}
 <table class="positions">
     <thead>
@@ -22,7 +25,7 @@
     </thead>
     <tbody>
         {#each Object.entries(document.positions) as [id,pos]}
-        <Position currency={document.currency} bind:pos={document.positions[id]} />
+        <Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} />
         {/each}
         <tr class="sums">
             <td colspan="2"></td>