<div>
  <table class="table">
    <tr>
      <th style="width: 40%">{{ 'directive.acledit.acl_target' | translate }}</th>
      <th style="width: 40%">{{ 'directive.acledit.acl_permission' | translate }}</th>
    </tr>

    <tr ng-repeat="(id, acl) in groupedAcls">
      <td><acl data="acl[0]"></acl></td>
      <td>
        <span class="label label-default" style="margin-right: 6px;" ng-repeat="a in acl | orderBy: 'perm'">
          {{ 'acl.' + a.perm | translate }}
          <span ng-show="(creator != a.name && a.type == 'USER' || a.type != 'USER') && writable"
                class="fas fa-times pointer"
                ng-click="deleteAcl(a)"></span>
        </span>
      </td>
    </tr>
  </table>

  <div ng-show="writable">
    <h4>{{ 'directive.acledit.add_permission' | translate }}</h4>

    <form name="aclForm" class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label" for="inputTarget">{{ 'directive.acledit.acl_target' | translate }}</label>
        <div class="col-sm-4">
          <input required ng-maxlength="50" class="form-control" type="text" id="inputTarget"
                 ng-attr-placeholder="{{ 'directive.acledit.search_user_group' | translate }}" name="target" ng-model="acl.target" autocomplete="off"
                 uib-typeahead="target as target.name for target in getTargetAclTypeahead($viewValue)"
                 typeahead-template-url="partial/docs/directive.typeahead.acl.html"
                 typeahead-wait-ms="200" />
        </div>
        <div class="col-sm-4">
          <span class="btn btn-primary" ng-if="acl.target.type" ng-click="acl.target = null">
            <acl data="acl.target"></acl>
          </span>
        </div>
      </div>

      <div class="form-group">
        <label class=" col-sm-2 control-label" for="inputPermission">{{ 'directive.acledit.acl_permission' | translate }}</label>
        <div class="col-sm-4">
          <select class="form-control" ng-model="acl.perm" id="inputPermission">
            <option value="READ">{{ 'acl.READ' | translate }}</option>
            <option value="READWRITE">{{ 'acl.READWRITE' | translate }}</option>
          </select>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary"  ng-disabled="!acl.target.type" ng-click="addAcl()">
            <span class="fas fa-plus"></span>
            {{ 'add' | translate }}
          </button>
        </div>
      </div>
    </form>
  </div>
</div>