{% extends 'squads/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block squads_menu %}
    {% include 'squads/manage/menu.html' %}
{% endblock %}

{% block squads_block %}

<div class="bg-primary rounded-top px-2 py-2 mb-4">
    <h3 class="text-white">{% translate "Manage Pendings" %}</h3>
</div>
<div class="card-body">
    <div class="row">
        <table class="table table-striped table-hover" id="groups" style="width: 100%;">
            <br>
            <thead>
                <th class="col-user" style="width: 20%;">User</th>
                <th class="col-group" style="width: 20%;">Group</th>
                <th class="col-filter" style="width: 20%;">Filters Met</th>
                <th class="col-application" style="width: 20%;">Application ID</th>
                <th class="col-comment" style="width: 20%;">Comment</th>
                <th class="col-actions" style="width: 10%;">Actions</th>
            </thead>

            <tbody>
            </tbody>
        </table>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
{% include 'bundles/datatables-js-bs5.html' %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    // Initialize DataTable
    var Groups = $('#groups').DataTable({
        ajax: {
            url: '/squads/api/groups/0/pendings/',
            dataSrc: function (data) {
                return data;
            },
        },
        processing: true,
        columns: [
            {data: 'user'},
            {data: 'group'},
            {data: 'req_filters', render: function(data, type, row) {
                if (data) {
                    return '<button class="btn btn-success btn-sm" disabled><i class="fa-solid fa-check"></i></button>';
                } else {
                    return '<button class="btn btn-danger btn-sm" disabled><i class="fa-solid fa-ban"></i></button>';
                }
            }},
            {data: 'application_id'},
            {data: 'comment'},
        ],
        columnDefs: [
            {
                targets: 5,
                className: 'text-end',
                sortable: false,
                render: function (data, type, row) {
                    var applyTemplate = "{% url 'squads:accept_group' '0' %}";
                    var declineTemplate = "{% url 'squads:decline_group' '0' %}";
                    var applyUrl = applyTemplate.replace('0', row.application_id);
                    var declineUrl = declineTemplate.replace('0', row.application_id);
                    return '<a href="'+ applyUrl +'"><button class="btn btn-success btn-sm" title="Approve"><i class="fa-solid fa-check"></i></button></a> <a href="'+ declineUrl +'"><button class="btn btn-warning btn-sm" title="Decline"><i class="fa-solid fa-ban"></i></button></a>';
                },
            }
        ]
    });
});
</script>
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
