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

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

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

            <p class="center">{{ mailbox.name }}</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('backend-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>
                {% endfor %}
                </tbody>
            </table>

            <form action="{{ route('backend-create-mail-identity', mailbox.id) }}" method="POST" class="sub-panel">
                <h3>{% if mailboxIdentity == null %}Create a 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>

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

                {{ macros.csrf(getCSRFToken) }}
            </form>
        </main>
    </div>
{% endblock %}