<script>
    import {locals} from "../../../ts/stores";
    import BaseTemplate from "../../templates/BaseTemplate.svelte";
    import Message from "../../components/Message.svelte";
    import NamePanel from "./NamePanel.svelte";
    import PasswordPanel from "./PasswordPanel.svelte";
    import Form from "../../utils/Form.svelte";
    import Field from "../../utils/Field.svelte";
    import {hasRoute, route} from "../../../../common/Routing";
    import Icon from "../../utils/Icon.svelte";

    const mainEmail = $locals.main_email?.email;
    const personalInfoFields = $locals.user_personal_info_fields || [];
    const emails = $locals.emails || [];
</script>

<BaseTemplate title="Account" description="Manage your account settings and data.">
    <section class="panel">
        <h2>
            <Icon name="user"/>
            Personal information
        </h2>

        {#if $locals.display_email_warning && $locals.emails.length <= 0}
            <Message type="warning" content="To avoid losing access to your account, please add an email address."/>
        {/if}

        {#each personalInfoFields as field}
            <p>{field.name}: {field.value}</p>
        {/each}

        {#if mainEmail}
            <p>Contact email: {mainEmail} <a href="#emails">More...</a></p>
        {/if}
    </section>

    {#if $locals.has_name_component}
        <NamePanel/>
    {/if}

    {#if $locals.has_password_component}
        <PasswordPanel/>
    {/if}

    <section class="panel">
        <h2 id="emails">
            <Icon name="shield"/>
            Email addresses
        </h2>

        <div class="data-table-container">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Type</th>
                    <th>Address</th>
                    <th>Actions</th>
                </tr>
                </thead>

                <tbody>
                {#each emails as email}
                    {#if email.id === $locals.user.main_email_id}
                        <tr>
                            <td>Main</td>
                            <td>{email.email}</td>
                            <td></td>
                        </tr>
                    {/if}
                {/each}

                {#each emails as email}
                    {#if email.id !== $locals.user.main_email_id}
                        <tr>
                            <td>Secondary</td>
                            <td>{email.email}</td>
                            <td class="actions">
                                <Form action={route('set-main-email')} button
                                      submitIcon="refresh-ccw" submitText="Set as main address"
                                      submitClass="warning"
                                      confirm="Are you sure you want to set {email.email} as your main address?">
                                    <Field type="hidden" name="id" value={email.id}/>
                                </Form>

                                <Form action={route('remove-email')} button
                                      submitIcon="trash" submitText="Remove" submitClass="danger"
                                      confirm="Are you sure you want to delete {email.email}?">
                                    <Field type="hidden" name="id" value={email.id}/>
                                </Form>
                            </td>
                        </tr>
                    {/if}
                {/each}
                </tbody>
            </table>
        </div>

        {#if hasRoute('add-email')}
            <Form action={route('add-email')} class="sub-panel"
                  submitIcon="plus" submitText="Add email address">
                <h3>Add an email address:</h3>

                <Field type="email" name="email" icon="at-sign" placeholder="Choose a safe email address"
                       hint="An email address we can use to identify you in case you lose access to your account"
                       required/>
            </Form>
        {/if}
    </section>
</BaseTemplate>
