<ng-form name="vm.permissionsListForm">
  <ul class="c8y-list__group no-border-last">
    <li ng-show="vm.scopedPermissions.length === 0" class="c8y-list__item bg-level-1">
      <div class="d-flex">
        <div class="c8y-list__item__block flex-grow">
          <div class="c8y-list__item__body text-truncate-wrap p-l-0">
            <span class="text-muted"><em translate>No permissions for this scope.</em></span>
            <button
              class="btn-clean p-8"
              type="button"
              title="{{ 'Add' | translate }}"
              ng-click="vm.add()"
            >
              <i c8y-icon="plus-circle" class="text-primary m-r-4 m-l-4 text-16"></i>
            </button>
          </div>
        </div>
      </div>
    </li>
    <li
      class="c8y-list__item c8y-list__item--double-actions bg-level-1"
      ng-repeat="permission in vm.scopedPermissions"
    >
      <div class="c8y-list__item__block d-flex a-i-center">
        <div class="c8y-list__item__body text-truncate-wrap p-l-0">
          <div class="row">
            <div class="col-sm-8">
              <div class="d-flex-md a-i-center p-b-xs-8">
                <label class="m-b-0 m-r-4">{{ 'Type' | translate }}</label>
                <input
                  type="text"
                  class="form-control"
                  ng-model="permission.type"
                  ng-change="vm.removeId(permission)"
                  placeholder="{{ 'e.g. * or specific fragment type' | translate }}"
                  required
                />
              </div>
            </div>
            <div class="col-sm-4">
              <div class="d-flex-md a-i-center">
                <label class="m-b-0 m-r-4">{{ 'Permission' | translate }}</label>
                <div class="flex-grow d-flex a-i-center">
                  <div class="c8y-select-wrapper flex-grow">
                    <select
                      class="form-control text-normal"
                      name="permission"
                      aria-label="{{ 'Permission' | translate }}"
                      ng-options="access.value as (access.label | translate) for access in vm.accessTypes.values()"
                      ng-model="permission.permission"
                      ng-change="vm.removeId(permission)"
                    ></select>
                  </div>
                  <button
                    class="btn-dot m-l-8"
                    type="button"
                    aria-label="{{ 'Help' | translate }}"
                    uib-popover="{{
                      'This permission is overridden by a more generic one in this role.'
                        | translate
                    }}"
                    popover-trigger="'focus'"
                    popover-placement="right"
                    popover-append-to-body="true"
                    ng-show="vm.isOverridden(permission)"
                  >
                    <i c8y-icon="exclamation-triangle" class="text-warning"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c8y-list__item__actions d-flex a-i-center">
          <button
            class="btn-dot m-l-auto"
            type="button"
            title="{{ 'Remove' | translate }}"
            ng-click="vm.remove(permission)"
          >
            <i c8y-icon="minus-circle" class="text-danger"></i>
          </button>
          <button
            class="btn-dot"
            type="button"
            title="{{ 'Add' | translate }}"
            ng-click="vm.add()"
            ng-show="$index === vm.scopedPermissions.length - 1"
          >
            <i c8y-icon="plus-circle" class="text-primary"></i>
          </button>
        </div>
      </div>
    </li>
  </ul>
</ng-form>
