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

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

{% block body %}
    <h1>Mailbox manager</h1>

    <div class="container">
        <section class="panel">
            <h2>Domains</h2>

            <form action="{{ route('backend-add-domain') }}" method="POST" class="sub-panel">
                <h3>Add domain</h3>
                {{ macros.field(_locals, 'text', 'name', null, 'Domain name', null, 'required') }}

                {{ macros.field(_locals, 'select', 'user_id', undefined, 'Owner', null, 'required', users) }}

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

                {{ macros.csrf(getCSRFToken) }}
            </form>

            <table class="data-table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Owner</th>
                    <th>Identities</th>
                    <th>Actions</th>
                </tr>
                </thead>

                <tbody>
                {% for domain in domains %}
                    <tr>
                        <td>{{ domain.id }}</td>
                        <td>{{ domain.name }}</td>
                        <td>{{ domain.owner_name | default('Public') }}</td>
                        <td>{{ domain.identity_count }}</td>
                        <td class="actions">
                            <form action="{{ route('backend-remove-domain') }}" method="POST">
                                <input type="hidden" name="id" value="{{ domain.id }}">

                                <button class="danger" onclick="return confirm('Are you sure you want to delete {{ domain.name }}?')">
                                    <i data-feather="trash"></i> Remove
                                </button>

                                {{ macros.csrf(getCSRFToken) }}
                            </form>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </section>

        <section class="panel">
            <h2>Mailboxes</h2>

            <table class="data-table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>User name</th>
                    <th>Name</th>
                    <th>Identities</th>
                    <th>Owned domains</th>
                </tr>
                </thead>

                <tbody>
                {% for box in mailboxes %}
                    <tr>
                        <td>{{ box.id }}</td>
                        <td>{{ box.username }}</td>
                        <td><a href="{{ route('backend-mailbox', box.id) }}">{{ box.name }}</a></td>
                        <td>{{ box.identity_count }}</td>
                        <td>{{ box.domain_count }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </section>
    </div>
{% endblock %}