<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="users.user.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
      <a os-perms="users.can_manage" class="btn btn-primary btn-sm"
        ng-click="openDialog()" title="add new group">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
    </div>
    <h1 translate>Groups</h1>
  </div>
</div>

<div class="details">
  <p translate>
    All your changes are saved immediately. Changes you make are only effective once you (or the users concerned) reload the page.
  </p>
  <table id="multi-table" class="table table-bordered">
    <thead>
      <tr>
        <th class="info-head">
          <h4 translate>Permissions</h4>
        <th ng-repeat="group in groups" ng-mouseover="group.hover=true" ng-mouseleave="group.hover=false">
          <span class="optional">
            {{ group.name | translate }}
          </span>
          <span class="optional-show" uib-tooltip="{{ group.name | translate }}">
            {{ group.name | translate | limitTo: 1 }}...
          </span>
          <i class="fa fa-info-circle" ng-if="group.id == 1"
            uib-tooltip="{{ 'Users without any assigned group gain the permissions from this group.' | translate }}"></i>
          <div os-perms="users.can_manage" ng-hide="group.id == 1" class="hoverActions text-center"
            ng-class="{'hiddenDiv': !group.hover}">
            <!--edit name-->
            <a href="" ng-click="openDialog(group)">
              <i class="fa fa-pencil fa-lg"></i></a>
                &nbsp;
            <!--delete-->
            <a href="" class="text-danger"
              ng-if="group_danger.id != group.id"
              ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
              <b>{{ group.name | translate }}</b>"
              ng-bootbox-confirm-action="delete(group)">
                <i class="fa fa-trash fa-lg"></i>
            </a>
          </div>
      <tbody ng-repeat="app in apps" os-perms="users.can_manage">
          <tr class="pointer bg-grey" ng-click="app.app_visible=!app.app_visible">
            <td>
              <b>{{ app.app_name | translate}}</b>
              <i class="fa" ng-class="app.app_visible ? 'fa-minus-square' : 'fa-plus-square'">
            <td ng-repeat="group in groups">
              <!-- empty, just filling the table -->
          <tr ng-repeat="permission in app.permissions" ng-class="{'collapse': !app.app_visible}">
            <td>
              {{ permission.display_name | translate }}
            <td class="pointer" ng-repeat="group in groups"
              ng-click="changePermission(group, permission)">
              <!-- Simulating a checkbox with FontAwesome icons. -->
              <i class="fa"
                ng-if="!danger(group, permission)"
                ng-class="hasPerm(group, permission) ? 'fa-check-square-o' : 'fa-square-o'"></i>
              <span class="fa fa-stack"
                 ng-if="danger(group, permission)"
                 uib-tooltip="{{ 'You are not allowed to lock yourself out of the configuration!' | translate }}">
                <i class="fa fa-check-square-o fa-stack-1x"></i>
                <i class="fa fa-ban fa-stack-2x text-danger"></i>
              </span>
  </table>
</div>
