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

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

{% block body %}
    <main class="container">
        <h1>My mailbox</h1>

        <section class="panel">
            <h2><i data-feather="mail"></i> {{ mailboxIdentity | default('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 %}