{% extends "allianceauth/base.html" %}
{% load bootstrap %}
{% load static %}
{% load i18n %}

{% block page_title %}{% trans "Permissions Overview" %}{% endblock page_title %}

{% block content %}
    <div class="col-sm-12">
        <h1 class="page-header">{% trans "Permissions Overview" %}</h1>
        <p>
        {% if request.GET.all != 'yes' %}
            {% blocktrans %}Showing only applied permissions{% endblocktrans %}
            <a href="{% url 'permissions_tool:overview' %}?all=yes" class="btn btn-primary">{% trans "Show All" %}</a>
        {% else %}
            {% blocktrans %}Showing all permissions{% endblocktrans %}
            <a href="{% url 'permissions_tool:overview' %}?all=no" class="btn btn-primary">{% trans "Show Applied" %}</a>
        {% endif %}
        </p>
        <div class="table-responsive">
            <table class="table table-striped" id="tab_permissions_overview" style="width:100%">
                <thead>
                    <tr>
                        <th>
                            {% trans "App" %}
                        </th>
                        <th>
                            {% trans "Model" %}
                        </th>
                        <th>
                            {% trans "Code Name" %}
                        </th>
                        <th>
                            {% trans "Name" %}
                        </th>
                        <th class="col-md-1">
                            {% trans "Users" %}
                        </th>
                        <th class="col-md-1">
                            {% trans "Groups" %}
                        </th>
                        <th class="col-md-1">
                            {% trans "States" %}
                        </th>
                    </tr>
                </thead>
                <tbody>
                {% for perm in permissions %}
                    <tr>
                        <td>
                            {{ perm.permission.content_type.app_label }}
                        </td>
                        <td>
                            {{ perm.permission.content_type.model }}
                        </td>
                        <td>
                            <a href="{% url "permissions_tool:audit" app_label=perm.permission.content_type.app_label model=perm.permission.content_type.model codename=perm.permission.codename %}">
                                {{ perm.permission.codename }}
                            </a>
                        </td>
                        <td>
                            {{ perm.permission.name }}
                        </td>
                        <td class="{% if perm.users > 0 %}info {% endif %}text-right">
                            {{ perm.users }}
                        </td>
                        <td class="{% if perm.groups > 0 %}info {% endif %}text-right">
                            {{ perm.groups }} ({{ perm.group_users }})
                        </td>
                        <td class="{% if perm.states > 0 %}info {% endif %}text-right">
                            {{ perm.states }} ({{ perm.state_users }})
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock content %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    <script type="application/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
{% endblock %}

{% block extra_script %}
    $(document).ready(function() {
        let groupColumn = 0;

        $('#tab_permissions_overview').DataTable({
            columnDefs: [
                { "visible": false, "targets": groupColumn }
            ],
            order: [[ groupColumn, 'asc' ], [ 1, 'asc' ], [ 2, 'asc' ] ],
            filterDropDown:
            {
                columns: [
                    {
                        idx: 0
                    },
                    {
                        idx: 1
                    }
                ],
                bootstrap: true
            },
            drawCallback: function ( settings ) {
                let api = this.api();
                let rows = api.rows( {page:'current'} ).nodes();
                let last = null;

                api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                    if ( last !== group ) {
                        $(rows).eq( i ).before(
                            '<tr class="tr-group"><td colspan="6">' + group + '</td></tr>'
                        );

                        last = group;
                    }
                } );
            }
        } );
    } );
{% endblock %}
