{% extends "base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n %}
{% load render_table from django_tables2 %}

{% block content %}
    {% if user.is_authenticated %}
        <div class="card bg-light mb-3">
            <h3 class="card-header text-center">
                {% trans "Users that have surnormal rights" %}
            </h3>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fa fa-info-circle"></i> {% trans "Superusers have all rights on everything, to manage the website." %}
                </div>
                <div class="card">
                    <div class="card-head">
                        <h4 class="card-header text-center">
                            <a href="#" data-toggle="collapse" data-target="#card-superusers">{% trans "Superusers" %}</a>
                        </h4>
                    </div>
                    <div class="card-body collapse show" id="card-superusers">
                        {% render_table superusers %}
                    </div>
                </div>
                <hr>
                <div class="card">
                    <div class="card-head">
                        <h4 class="card-header text-center">
                            <a href="#" data-toggle="collapse" data-target="#card-clubs">{% trans "Club managers" %}</a>
                        </h4>
                    </div>
                    <div class="card-body collapse show" id="card-clubs">
                        {% render_table special_memberships_table %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="card bg-light">
        <h3 class="card-header text-center">
            {% trans "Roles description" %}
        </h3>
        <div class="card-body">
            {% if user.is_authenticated %}
                <div class="form-check">
                    <label for="owned_only" class="form-check-label">
                        <input id="owned_only" name="owned_only" type="checkbox" class="checkboxinput form-check-input">
                        {% trans "Filter with roles that I have in at least one club" %}
                    </label>
                </div>
            {% endif %}
        </div>
        <div class="accordion" id="accordionRoles">
            {% regroup active_memberships by roles as memberships_per_role %}
            {% for role in roles %}
                <div class="card {% if not role.clubs %}no-club{% endif %}">
                    <div class="card-header py-1" id="{{ role|slugify }} ">
                        <a href="#" class="text-decoration-none" data-toggle="collapse"
                           data-target="#collapse{{ role|slugify }}"
                           aria-expanded="true" aria-controls="collapse{{ role|slugify }}">
                            {{ role }}
                            {% if role.weirole %}(<em>Pour le WEI</em>){% endif %}
                            {% if role.for_club %}(<em>Pour le club {{ role.for_club }} uniquement</em>){% endif %}
                            {% if role.clubs %}
                                <small><span class="badge badge-success">{% trans "Owned" %} :
                                    {{ role.clubs|join:", " }}</span></small>
                            {% endif %}
                        </a>
                    </div>

                    <div id="collapse{{ role|slugify }}" class="collapse" aria-labelledby="{{ role|slugify }}"
                         data-parent="#accordionRoles">
                        <div class="card-body">
                            {% if role.clubs %}
                                <div class="alert alert-success">
                                    {% trans "Own this role in the clubs" %} {{ role.clubs|join:", " }}
                                </div>
                            {% endif %}
                            <ul>
                                {% for permission in role.permissions.all %}
                                    <li data-toggle="tooltip"
                                        title="{% trans "Mask:" %} {{ permission.mask }}, {% trans "Query:" %} {{ permission.query }}">
                                        <b>{{ permission }}</b> ({{ permission.get_type_display }}
                                        {{ permission.model }}{% if permission.permanent %},
                                            {% trans "permanent" %}{% endif %})
                                    </li>
                                    {% empty %}
                                    <em>{% trans "No associated permission" %}</em>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block extrajavascript %}
    <script>
        $(document).ready(function () {
            let checkbox = $("#owned_only");

            function update() {
                if (checkbox.is(":checked"))
                    $(".no-club").addClass('d-none');
                else
                    $(".no-club").removeClass('d-none');
            }

            checkbox.change(update);
            update();
        });
    </script>
{% endblock %}