{% extends "index.html.twig" %}

{% block searchBtn %}{% endblock %}

{% block breadcrumbMenu %}
    {% if is_granted('group_create') %}
        <a class="btn" href="{{ path('groups_create') }}">
            <i class="fas fa-plus"></i>
            Neue Benutzergruppe erstellen
        </a>
    {% endif %}
{% endblock %}

{% block breadcrumb %}
    Benutzergruppen
{% endblock %}

{% block body %}
    <div class="Rtable Rtable--collapse">
        <div class="Rtable-row Rtable-row--head">
            <div class="Rtable-cell rw-5 column-heading"></div>
            <div class="Rtable-cell rw-25 column-heading">Name</div>
            <div class="Rtable-cell rw-30 column-heading">Beschreibung</div>
            <div class="Rtable-cell rw-10 column-heading">Berechtigungen</div>
            <div class="Rtable-cell rw-15 column-heading">Benutzer in Gruppe</div>
            <div class="Rtable-cell rw-10 column-heading"></div>
        </div>
        {% set sortable = false %}
        {% for group in groups %}
        {% if group.editable == true and sortable == false %}
        <div class="Rtable-row-divider my-2 d-md-down-none"></div>
        <div id="sortable" class="w-100">
            {% set sortable = true %}
            {% endif %}
            <div class="Rtable-row" data-id="{{ group.group.id }}">
                <div class="Rtable-cell Rtable-cell-heading rw-5">
                    {% if group.editable == true %}
                        <div class="Rtable-cell--content p-0 d-md-down-none">
                            <button class="btn btn-secondary btn-sm noload">
                                <i class="fas fa-arrows-alt handle"></i>
                            </button>
                        </div>
                    {% endif %}
                </div>
                <div data-heading="Name" class="Rtable-cell Rtable-cell-heading rw-25">
                    <div class="Rtable-cell--content ">
                        {{ group.group.name }}
                        {% if app.user.usergroup.id == group.group.id %}
                            <b>(eingeloggt)</b>
                        {% endif %}
                    </div>
                </div>
                <div data-heading="Beschreibung" class="Rtable-cell rw-30">
                    <div class="Rtable-cell--content">
                        {{ group.group.description }}
                    </div>
                </div>
                <div data-heading="Berechtigungen" class="Rtable-cell rw-10">
                    <div class="Rtable-cell--content">
                        <button class="btn btn-sm btn-primary noload showPermissions w-100" type="button" data-permissions=" <div class='grid'>{% for permissions in permissiongroups %} <div class='grid-item mb-2'>{% for perm, description in permissions %}{% if perm in group.group.permissions or '*' in group.group.permissions %} <i class='fas fa-check fa-fw text-success'></i>{% else %} <i class='fas fa-times fa-fw text-danger'></i>{% endif %}{{ description }}<br>{% endfor %}</div>{% endfor %} </div>">
                            Anzeigen
                        </button>
                    </div>
                </div>
                <div data-heading="Benutzer in Gruppe" class="Rtable-cell rw-15">
                    <div class="Rtable-cell--content">
                        <button class="btn btn-sm btn-primary noload showUsers w-100" type="button" data-users="{% for user in group.group.users %}<div><b>{{ user.username }}</b> ({{ user.firstname }} {{ user.lastname }})</div>{% endfor %}">
                            {{ group.group.users|length }} Benutzer anzeigen
                        </button>
                    </div>
                </div>
                <div class="Rtable-cell Rtable-cell--actions rw-10" style="text-overflow:unset">
                    {% if is_granted('group_edit') %}
                        {% if group.editable==true %}
                            <a href="{{ path('groups_edit',{'id':group.group.id}) }}"
                               data-toggle="tooltip" title="Benutzergruppe {{ group.group.name }} bearbeiten">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{{ path('groups_settings',{'id':group.group.id}) }}"
                               data-toggle="tooltip" title="Einstellungen für Benutzergruppe {{ group.group.name }} bearbeiten">
                                <i class="fas fa-cog"></i>
                            </a>
                        {% else %}
                            <a class="text-muted noload" data-toggle="tooltip" title="Benutzergruppe {{ group.group.name }} kann nicht bearbeitet werden">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a class="text-muted noload" data-toggle="tooltip" title="Einstellungen für Benutzergruppe {{ group.group.name }} können nicht bearbeitet werden">
                                <i class="fas fa-cog"></i>
                            </a>
                        {% endif %}
                    {% endif %}
                    {% if is_granted('group_delete') %}
                        {% if group.editable==true %}
                            {% if group.group.users|length == 0 %}
                                <a class="text-danger requestModal noload" href="#"
                                   data-title="Benutzergruppe löschen"
                                   data-message="Wollen Sie diese Benutzergruppe wirklich löschen?"
                                   data-successbtn="Benutzergruppe löschen"
                                   data-path="{{ path('groups_delete',{'id':group.group.id}) }}"
                                   data-toggle="tooltip" title="Benutzergruppe {{ group.group.name }} löschen">
                                    <i class="fas fa-minus-circle"></i>
                                </a>
                            {% else %}
                                <a class="text-muted noload" data-toggle="tooltip" title="Benutzergruppe {{ group.group.name }} kann nicht gelöscht werden. Sie enthält noch Benutzer.">
                                    <i class="fas fa-minus-circle"></i>
                                </a>
                            {% endif %}
                        {% else %}
                            <a class="text-muted noload" data-toggle="tooltip" title="Benutzergruppe {{ group.group.name }} kann nicht gelöscht werden">
                                <i class="fas fa-minus-circle"></i>
                            </a>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            {% if sortable == true %}
        </div>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('_resources/js/sortable.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('_resources/js/jquery-sortable.js') }}" type="text/javascript"></script>
    <script>
        let sorter;
        $(function () {
            let options = {
                handle    : '.handle',
                animation : 150,
                ghostClass: 'sortable-ghost',
                onEnd     : function (evt) {
                    let ids = [];
                    $('.Rtable .Rtable-row').each(function (i, row) {
                        if ($(row).data('id')) {
                            ids.push($(row).data('id'));
                        }
                    });
                    $.ajax({
                        url : '{{ path('groups_hierarchy') }}',
                        data: {
                            ids: ids
                        }
                    }).done(function () {
                        toastr.success("Die neue Hierarchie wurde gespeichert");
                    });
                }
            };
            sorter = new Sortable(sortable, options);

            $('.showPermissions').on('click keydown touch', function () {
                alertify.dialog('alert').set({
                    transition: 'fade',
                    message   : $(this).data('permissions'),
                    title     : 'Berechtigungen'
                }).show();
            });

            $('.showUsers').on('click keydown touch', function () {
                alertify.dialog('alert').set({
                    transition: 'fade',
                    message   : $(this).data('users'),
                    title     : 'Benutzer in Gruppe'
                }).show();
            });
        });
    </script>
{% endblock %}