{% extends 'base.html' %}

{% load bootstrap_toolkit %}
{% load django_bootstrap_breadcrumbs %}
{% load i18n %}
{% load astrobin_apps_users_tags %}
{% load common_tags %}

{% block title %}{{object.name}}: {% trans "Moderate join requests" %}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    {% breadcrumb 'Explore' None %}
    {% breadcrumb 'Groups' 'group_list' %}
    {% breadcrumb group.name 'group_detail' group.pk %}
    {% breadcrumb 'Moderate join requests' None %}
{% endblock %}

{% block content %}
    <table class="table table-striped requesting-users">
        <thead>
            <tr>
                <th class="user">{% trans "Name" %}</th>
                <th class="actions"></th>
            </tr>
        </thead>
        <tbody>
            {% for user in object.join_requests.all %}
                <tr>
                    <td class="user">{% astrobin_username user %}</td>
                    <td class="actions">
                        <a
                            href="#"
                            class="handle-request btn btn-success {% button_loading_class %}"
                            data-no-instant
                            data-user="{{user.pk}}"
                            data-url="{% url 'group_approve_join_request' object.pk %}">
                            <i class="icon icon-thumbs-up"></i>
                            {% trans "Approve" %}
                            {% button_loading_indicator %}
                        </a>

                        <a
                            href="#"
                            class="handle-request btn btn-danger {% button_loading_class %}"
                            data-no-instant
                            data-user="{{user.pk}}"
                            data-url="{% url 'group_reject_join_request' object.pk %}">
                            <i class="icon icon-thumbs-down"></i>
                            {% trans "Reject" %}
                            {% button_loading_indicator %}
                        </a>

                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td class="empty-table" colspan="2">{% trans "This group has no join requests." %}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

{% block extra_js %}
    <script type="text/javascript">
        $(document).ready(function() {
            $("a.handle-request").live('click', function(e) {
                e.preventDefault();

                const $button = $(this),
                    user = $button.data('user'),
                    $row = $button.parents('tr'),
                    $table = $row.parents('table');

                $button.addClass('running')

                $.ajax({
                    url: $button.data('url'),
                    type: 'POST',
                    cache: false,
                    timeout: 10000,
                    data: {'user': user},
                    dataType: 'json'
                }).done(function() {
                    $row.remove();
                    if ($table.find('tbody tr').length === 0) {
                        $table.find('tbody').append(
                            $('<tr>' +
                                '<td class="empty-table" colspan="2">' +
                                '{{ _("This group has no join requests.") | escapejs }}' +
                                '</td>' +
                                '</tr>')
                        );
                    }
                }).fail(function () {
                    alert("{{ _('Something went wrong, Please try again later.') | escapejs }}");
                }).always(function() {
                    $button.removeClass('running');
                });
            });
        });
    </script>
{% endblock %}
