{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% block page_title %}
    {% translate "Permissions Overview" %}
{% endblock page_title %}
{% block content %}
    <div class="col-sm-12">
        <h1 class="page-header">{% translate "Permissions Overview" %}</h1>
        <p>
            {% if request.GET.all != 'yes' %}
                {% translate "Showing only applied permissions" %}
                <a href="{% url 'permissions_tool:overview' %}?all=yes" class="btn btn-primary">{% translate "Show All" %}</a>
            {% else %}
                {% translate "Showing all permissions" %}
                <a href="{% url 'permissions_tool:overview' %}?all=no" class="btn btn-primary">{% translate "Show Applied" %}</a>
            {% endif %}
        </p>
        <div class="table-responsive">
            <table class="table table-striped" id="tab_permissions_overview">
                <thead>
                    <tr>
                        <th scope="col">{% translate "App" %}</th>
                        <th scope="col">{% translate "Model" %}</th>
                        <th scope="col">{% translate "Code Name" %}</th>
                        <th scope="col">{% translate "Name" %}</th>
                        <th scope="col">{% translate "Users" %}</th>
                        <th scope="col">{% translate "Groups" %}</th>
                        <th scope="col">{% 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-end">{{ perm.users }}</td>
                            <td class="{% if perm.groups > 0 %}info{% endif %}text-end">{{ perm.groups }} ({{ perm.group_users }})</td>
                            <td class="{% if perm.states > 0 %}info{% endif %}text-end">{{ perm.states }} ({{ perm.state_users }})</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock content %}
{% block extra_javascript %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "bundles/filterdropdown-js.html" %}
{% endblock extra_javascript %}
{% block extra_css %}
    {% include "bundles/datatables-css-bs5.html" %}
{% endblock extra_css %}
{% 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,
    },
    "stateSave": true,
    "stateDuration": 0,
    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="h4 table-secondary">
        <td colspan="6">' + group + '</td>
    </tr>
    '
    );
    last = group;
    }
    });
    }
    });
    });
{% endblock extra_script %}
