{% extends 'layouts/base.njk' %}

{% set title = app.name + ' - Account' %}

{% block body %}
    <main class="container">
        <div class="panel">
            <i data-feather="user"></i>
            <h1>My account</h1>

            <p>Name: {{ user.name }}</p>
        </div>

        <section class="panel">
            <h2><i data-feather="key"></i> Change password</h2>

            <form action="{{ route('change-password') }}" method="POST">
                {{ macros.field(_locals, 'password', 'current_password', null, 'Current password') }}
                {{ macros.field(_locals, 'password', 'new_password', null, 'New password') }}
                {{ macros.field(_locals, 'password', 'new_password_confirmation', null, 'New password confirmation') }}

                <button type="submit"><i data-feather="save"></i> Save</button>

                {{ macros.csrf(getCsrfToken) }}
            </form>
        </section>

        <section class="panel">
            <h2><i data-feather="shield"></i> Recovery email addresses</h2>

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

                <tbody>
                {% for email in emails %}
                    {% if email.id == user.main_email_id %}
                        <tr>
                            <td>Main</td>
                            <td>{{ email.email }}</td>
                            <td></td>
                        </tr>
                    {% endif %}
                {% endfor %}
                {% for email in emails %}
                    {% if email.id != user.main_email_id %}
                        <tr>
                            <td>Secondary</td>
                            <td>{{ email.email }}</td>
                            <td class="actions">
                                <form action="{{ route('set-main-recovery-email') }}" method="POST">
                                    <input type="hidden" name="id" value="{{ email.id }}">

                                    <button class="warning"
                                            onclick="return confirm('Are you sure you want to set {{ email.email }} as your main address?');">
                                        <i data-feather="refresh-ccw"></i> <span class="tip">Set as main address</span>
                                    </button>
                                    {{ macros.csrf(getCsrfToken) }}
                                </form>

                                <form action="{{ route('remove-recovery-email') }}" method="POST">
                                    <input type="hidden" name="id" value="{{ email.id }}">

                                    <button class="danger"
                                            onclick="return confirm('Are you sure you want to delete {{ email.email }}?');">
                                        <i data-feather="trash"></i> <span class="tip">Remove</span>
                                    </button>
                                    {{ macros.csrf(getCsrfToken) }}
                                </form>
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>

            <form action="{{ route('add-recovery-email') }}" method="POST" class="sub-panel">
                <h3>Add a recovery email address:</h3>

                {{ macros.field(_locals, 'email', 'email', null, 'Choose a safe email address', 'An email we can use to identify you in case you lose access to your account', 'required') }}

                <button><i data-feather="plus"></i> Add recovery email</button>

                {{ macros.csrf(getCsrfToken) }}
            </form>
        </section>

        <section class="panel">
            <h2><i data-feather="mail"></i> Mailbox</h2>

            <p class="center">{% if mailboxIdentity == null %}(Not created yet){% else %}{{ mailboxIdentity }}{% endif %}</p>

            <table class="data-table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
                </thead>

                <tbody>
                {% for identity in identities %}
                    <tr>
                        <td>{{ identity.id }}</td>
                        <td>{{ identity.email }}</td>
                        <td class="actions">
                            <form action="{{ route('delete-mail-identity') }}" method="POST">
                                <input type="hidden" name="id" value="{{ identity.id }}">

                                <button class="danger"
                                        onclick="return confirm('Are you sure you want to delete {{ identity.email }}?')">
                                    <i data-feather="trash"></i> <span class="tip">Delete</span>
                                </button>

                                {{ macros.csrf(getCsrfToken) }}
                            </form>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="3">No identity (yet).</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <form action="{{ route('create-mail-identity') }}" method="POST" class="sub-panel">
                <h3>{% if mailboxIdentity == null %}Create your mailbox{% else %}Create a new mail identity{% endif %}</h3>

                <div class="inline-fields">
                    {{ macros.field(_locals, 'text', 'name', user.name, 'Email name', null, 'required') }}
                    <span>@</span>
                    {{ macros.field(_locals, 'select', 'mail_domain_id', null, 'Choose the email domain', null, 'required', domains) }}
                </div>
                <div class="hint">
                    <i data-feather="info"></i>
                    If using a "public" domain, can only be set to your username.
                </div>

                <button><i data-feather="plus"></i> Create</button>

                {{ macros.csrf(getCsrfToken) }}
            </form>
        </section>
    </main>
{% endblock %}