<script>
    import { t } from '../../translations.svelte';

    import Address from './Address.svelte';
    import Email from './Email.svelte';
    import ExtraField from './ExtraField.svelte';
    import FN from './FN.svelte';
    import Name from './Name.svelte';
    import Org from './Org.svelte';

    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 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>