<table class="table">
  <tr>
    <th style="width: 40%">For</th>
    <th style="width: 40%">Permission</th>
  </tr>

  <tr ng-repeat="(id, acl) in acls">
    <td><em>{{ acl[0].type == 'SHARE' ? 'Shared' : 'User' }}</em> {{ acl[0].name }}</td>
    <td>
            <span class="label label-default" style="margin-right: 6px;" ng-repeat="a in acl | orderBy: 'perm'">
              {{ a.perm }}
              <span ng-show="(document.creator != a.name && a.type == 'USER' || a.type != 'USER') && document.writable"
                    class="glyphicon glyphicon-remove pointer"
                    ng-click="deleteAcl(a)"></span>
            </span>
    </td>
  </tr>
</table>

<div ng-show="document.writable">
  <h4>Add a permission</h4>

  <form name="aclForm" class="form-horizontal">
    <div class="form-group">
      <label class=" col-sm-2 control-label" for="inputTarget">User</label>
      <div class="col-sm-3">
        <input required ng-maxlength="50" class="form-control" type="text" id="inputTarget"
               placeholder="Type a username" name="username" ng-model="acl.username" autocomplete="off"
               typeahead="username for username in getTargetAclTypeahead($viewValue) | filter: $viewValue"
               typeahead-wait-ms="200" />
      </div>
    </div>

    <div class="form-group">
      <label class=" col-sm-2 control-label" for="inputPermission">Permission</label>
      <div class="col-sm-3">
        <select class="form-control" ng-model="acl.perm" id="inputPermission">
          <option value="READ">Can read</option>
          <option value="READWRITE">Can edit</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="!aclForm.$valid" ng-click="addAcl()">
          <span class="glyphicon glyphicon-plus"></span>
          Add
        </button>
      </div>
    </div>
  </form>
</div>