working on vcard display

frontend/src/routes/contact/Card.svelte

@@ -11,24 +11,64 @@
     let { contact } = $props();
 
     let addresses = $derived(contact.vcard.match(/^ADR.*:.+$/gm));
+    let code = $state(false);
     let emails = $derived(contact.vcard.match(/^EMAIL.*:.+$/gm));
     let extra_fields = $derived(contact.vcard.match(/^X-.*:.+/gm));
+
+    function toggleCode(){
+        code = !code;
+    }
 </script>
 
-<fieldset>
-    <legend>{t('contact_number',{number:contact.id})}</legend>
-    <FN vcard={contact.vcard} />
-    <Org vcard={contact.vcard} />
-    <Name vcard={contact.vcard} />
-    {#each addresses as code}
-    <Address {code} />
-    {/each}
-    {#each emails as code}
-    <Email {code} />
-    {/each}
-    {#each extra_fields as code}
-    <ExtraField {code} />
-    {/each}
-    <hr/>
-    <pre>{contact.vcard}</pre>
+<fieldset class="vcard">
+    <legend>
+        {t('contact_number',{number:contact.id})}
+        <button class="symbol" onclick={toggleCode}>C</button>
+    </legend>
+    <table>
+        <thead></thead>
+        <tbody>
+            <tr>
+                <td>
+                    <FN vcard={contact.vcard} />
+                </td>
+                {#if code}
+                <td rowspan="6">
+                    <pre>{contact.vcard}</pre>
+                </td>
+                {/if}
+            </tr>
+            <tr>
+                <td>
+                    <Org vcard={contact.vcard} />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <Name vcard={contact.vcard} />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {#each addresses as code}
+                    <Address {code} />
+                    {/each}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {#each emails as code}
+                    <Email {code} />
+                    {/each}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {#each extra_fields as code}
+                    <ExtraField {code} />
+                    {/each}
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </fieldset>

frontend/src/routes/contact/FN.svelte

@@ -8,5 +8,5 @@
 </script>
 
 {#if name}
-<span class="formatted name"><span>{t('formatted name')}:&nbsp;</span>{name}</span>
+<span class="formatted name">{name}</span>
 {/if}

frontend/src/routes/contact/Org.svelte

@@ -8,5 +8,5 @@
 </script>
 
 {#if o}
-<span class="organization"><span>{t('organization')}:&nbsp;</span>{o}</span>
+<span class="organization">{o}</span>
 {/if}