<form id="admin-backend-permissions-form">
    {% if roles is not empty and functions is not empty %}
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th class="text-center align-bottom" scope="col" rowspan="2"><h5 class="m-0">Funktionen</h5></th>
                    <th class="px-0 py-2 text-center align-middle bg-light" scope="col" colspan="{{ roles|length+1}}"><h5 class="m-0">Rollen</h5><span class="text-muted font-weight-normal">Die Anordnung der Rollen entspricht der Reihenfolge zur Auswahl. Je weiter links eine Rolle steht, desto früher kommt sie in der Auswahl.</span></th>
                </tr>
                <tr>
                    <th class="text-center align-bottom" scope="col">
                        <span data-toggle="tooltip" data-placement="bottom" title="Administratoren dürfen alles.">Administrator</span>
                    </th>
                    {% for role in roles %}
                        <th class="align-top text-center" scope="col">
                            <div class="w-100 d-flex justify-content-between mb-2 align-items-center">
                                {% if not loop.first %}
                                    <button type="button" class="btn btn-sm btn-secondary admin-backend-permissions-role-prio {% if not isAdmin %}pointerdisabled{% endif %}" data-roleid="{{ role.getId() }}" data-priodir="left" data-toggle="tooltip" data-placement="bottom" title="Position in Reihenfolge erhöhen" {% if not isAdmin %}disabled{% endif %}><i class="fas fa-arrow-left"></i></button>
                                {% else %}
                                    <button type="button" class="btn btn-sm invisible">&nbsp;</button>
                                {% endif %}
                                <div class="d-flex justify-content-center align-items-center mx-2">
                                    <button class="btn btn-secondary btn-sm admin-backend-permissions-role-edit mr-1 {% if not isAdmin %}pointerdisabled{% endif %}" data-roleid="{{ role.getId() }}" data-roletitle="{{ role.getTitle() }}" data-roledesc="{{ role.getDescription() }}" type="button" data-toggle="tooltip" data-placement="bottom" title="Rolle bearbeiten" {% if not isAdmin %}disabled{% endif %}><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-danger btn-sm admin-backend-permissions-role-delete {% if not isAdmin %}pointerdisabled{% endif %}" data-roleid="{{ role.getId() }}" data-roletitle="{{ role.getTitle() }}" type="button" data-toggle="tooltip" data-placement="bottom" title="Rolle löschen" {% if not isAdmin %}disabled{% endif %}><i class="fas fa-trash-alt"></i></button>
                                </div>
                                {% if not loop.last %}
                                    <button type="button" class="btn btn-sm btn-secondary admin-backend-permissions-role-prio {% if not isAdmin %}pointerdisabled{% endif %}" data-roleid="{{ role.getId() }}" data-priodir="right" data-toggle="tooltip" data-placement="bottom" title="Position in Reihenfolge verringern" {% if not isAdmin %}disabled{% endif %}><i class="fas fa-arrow-right"></i></button>
                                {% else %}
                                    <button type="button" class="btn btn-sm invisible">&nbsp;</button>
                                {% endif %}
                            </div>
                            <span data-toggle="tooltip" data-placement="bottom" title="{{ role.getDescription() }}">{{ role.getTitle() }}</span>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for function in functions %}
                    <tr>
                        <th class="align-middle text-right" scope="row"><span data-toggle="tooltip" data-placement="right" title="{{ function.getDescription() }}">{{ function.getTitle() }}</span></th>
                        <td class="align-middle text-center">
                            <i data-toggle="tooltip" data-placement="top" title="Die Rolle „Administrator“ hat standardmäßig Zugriff auf die Funktion „{{ function.getTitle() }}“." class="fas fa-check-square" style="font-size: 16px;"></i>
                        </td>
                        {% for role in roles %}
                            <td class="align-middle text-center">
                                <input type="checkbox" id="permission_{{ role.getId() }}_{{ function.getId() }}" class="formc-control" {% if role.hasPermission(function.getId()) %}checked{% endif %}
                                    data-toggle="tooltip" data-placement="top" title="Der Rolle „{{ role.getTitle() }}“ Zugriff auf die Funktion „{{ function.getTitle() }}“ erteilen." {% if not isAdmin %}disabled{% endif %}>
                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
        {% if roles is empty %}
            <div class="alert alert-info" role="alert">
                <h5 class="alert-heading"><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                <p class="mb-0">
                    Es wurde noch keine Rolle angelegt. 
                </p>
            </div>
        {% endif %}
        {% if functions is empty %}
            <div class="alert alert-info" role="alert">
                <h5 class="alert-heading"><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                <p class="mb-0">
                    Es wurde noch keine Funktion angelegt. 
                </p>
            </div>
        {% endif %}
    {% endif %}
</form>