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

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

{% block body %}
    <h1>Accounts pending review</h1>

    <div class="panel">
        <table class="data-table">
            <thead>
            <tr>
                <th class="shrink-col">#</th>
                {% if has_user_name_component %}
                <th>Name</th>
                {% endif %}
                <th>Main email</th>
                <th>Registered at</th>
                <th class="shrink-col">Action</th>
            </tr>
            </thead>
            <tbody>
            {% for user in accounts %}
                <tr>
                    <td>{{ user.id }}</td>
                    {% if has_user_name_component %}
                    <td>{{ user.name }}</td>
                    {% endif %}
                    <td>{{ user.mainEmail.getOrFail().email | default('No email') }}</td>
                    <td>{{ user.created_at.toISOString() }}</td>
                    <td>
                        <div class="max-content">
                            <form action="{{ route('approve-account') }}" method="POST">
                                <input type="hidden" name="user_id" value="{{ user.id }}">
                                <button class="success"><i data-feather="check"></i> Approve</button>
                                {{ macros.csrf(getCsrfToken) }}
                            </form>

                            <form action="{{ route('reject-account') }}" method="POST"
                                  data-confirm="This will irrevocably delete the {{ user.mainEmail.getOrFail().email | default(user.name | default(user.id)) }} account.">
                                <input type="hidden" name="user_id" value="{{ user.id }}">
                                <button class="danger"><i data-feather="check"></i> Reject</button>
                                {{ macros.csrf(getCsrfToken) }}
                            </form>
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('form[data-confirm]').forEach(el => {
                el.addEventListener('submit', e => {
                    if (!confirm(el.dataset['confirm'])) {
                        e.preventDefault();
                    }
                });
            });
        });
    </script>
{% endblock %}