<div class="alert alert-warning">
  <span translate>
    This feature is deprecated. You should rather use
    <a href="/apps/administration#roles">Roles</a>
    to set permissions.
  </span>
</div>

<div ng-show="allowEdit && newPermission">
  <div class="form-group p-relative">
    <label>{{ 'Managed object' | translate }}</label>
    <input
      type="text"
      class="form-control"
      maxlength="100"
      ng-model="newPermission.deviceSearch"
      ng-model-options="{debounce: 300}"
      placeholder="{{ 'Select managed object from list' | translate }}"
      uib-typeahead="device.id+' - '+device.name for device in getDevices($viewValue)"
      typeahead-on-select="setDevice($item)"
    />
    <div class="help-block">
      {{ 'Enter starting fragment of device id or name to search.' | translate }}
    </div>
  </div>
  <c8y-device-permission
    data-scope="newPermission.scopeType"
    data-permission-type="newPermission.type"
    data-access="newPermission.permissionType"
    data-device="newPermission.device"
  ></c8y-device-permission>
  <div class="p-t-16 p-b-16">
    <button
      title="{{ 'Add' | translate }}"
      type="button"
      class="btn btn-primary"
      ng-disabled="!isValidPermission(newPermission)"
      ng-click="add(newPermission)"
    >
      {{ 'Add' | translate }}
    </button>
  </div>
</div>

<table class="table table-condensed table-permissions" ng-show="allowView">
  <thead>
    <tr>
      <th translate>Device</th>
      <th translate>Permissions</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody ng-repeat="(deviceId, permissions) in acl">
    <tr ng-repeat="permission in permissions track by $index">
      <td ng-if="$first" style="width: 200px" rowspan="{{ permissions.length }}">
        {{ deviceId }}
      </td>
      <td>
        {{ translatePermissionString(permission) }}
      </td>
      <td class="text-right">
        <button
          ng-show="allowEdit"
          class="btn btn-danger btn-xs showOnHover"
          title="{{ 'Remove permission' | translate }}"
          ng-click="remove(deviceId, permission)"
        >
          <i c8y-icon="minus-circle"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>
