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

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

{% block content %}
    <div class="clearfix">
        <h1 class="page-header">{% translate "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">{% translate "Show All" %}</a>
        {% else %}
            {% blocktrans %}Showing all permissions{% endblocktrans %}
            <a href="{% url 'permissions_tool:overview' %}?all=no" class="btn btn-primary">{% translate "Show Applied" %}</a>
        {% endif %}
        </p>
        <div class="panel panel-default">
            <div class="panel-heading aa-fleetpings-ping-header">
                <div class="panel-title">{% translate "Permissions" %}</div>
            </div>
            <div class="panel-body">
                <table class="table table-striped table-hover" id="tab_permissions_overview" style="width:100%">
                    <thead>
                        <tr>
                            <th>
                                {% translate "App" %}
                            </th>
                            <th>
                                {% translate "Model" %}
                            </th>
                            <th>
                                {% translate "Code Name" %}
                            </th>
                            <th>
                                {% translate "Name" %}
                            </th>
                            <th class="col-md-1">
                                {% translate "Users" %}
                            </th>
                            <th class="col-md-1">
                                {% translate "Groups" %}
                            </th>
                            <th class="col-md-1">
                                {% translate "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>
    </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() {
        var groupColumn = 0;
        var table = $('#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 ) {
                var api = this.api();
                var rows = api.rows( {page:'current'} ).nodes();
                var 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 %}
