<table class="table table-striped bg-inherit">
  <thead class="bg-inherit">
    <tr class="bg-inherit">
      <th
        class="sticky-top has-sticky-card-header"
        translate
      >
        Type
      </th>
      <th class="sticky-top has-sticky-card-header text-center">
        <span translate>Read</span>
        <br />
        <label
          class="c8y-checkbox d-inline-block"
          ng-if="!vm.readOnly"
        >
          <input
            type="checkbox"
            ng-click="::vm.selectAll('READ')"
            ng-checked="vm.allSelected('READ')"
          />
          <span></span>
          <span class="sr-only">{{ 'Read' | translate }}</span>
        </label>
      </th>
      <th class="sticky-top has-sticky-card-header text-center">
        <span translate>Admin</span>
        <button
          class="btn-help btn-help--sm"
          aria-label="{{ 'Help' | translate }}"
          type="button"
          uib-popover="{{::vm.STRINGS.ADMIN | translate}}"
          popover-placement="top"
          popover-trigger="'focus'"
          popover-append-to-body="true"
        ></button>
        <br />
        <label
          class="c8y-checkbox d-inline-block"
          ng-if="!vm.readOnly"
        >
          <input
            type="checkbox"
            ng-click="::vm.selectAll('ADMIN')"
            ng-checked="vm.allSelected('ADMIN')"
          />
          <span></span>
          <span class="sr-only">{{ 'Admin' | translate }}</span>
        </label>
      </th>
      <th class="sticky-top has-sticky-card-header text-center">
        <span translate>Create</span>
        <br />
        <label
          class="c8y-checkbox d-inline-block"
          ng-if="!vm.readOnly"
        >
          <input
            type="checkbox"
            ng-click="::vm.selectAll('CREATE')"
            ng-checked="vm.allSelected('CREATE')"
          />
          <span></span>
          <span class="sr-only">{{ 'Create' | translate }}</span>
        </label>
      </th>
      <th
        class="sticky-top has-sticky-card-header text-center"
        ng-if="::vm.hasPermissionWithAccess('UPDATE')"
      >
        <span translate>Update</span>
        <br />
        <label
          class="c8y-checkbox d-inline-block"
          ng-if="!vm.readOnly"
        >
          <input
            type="checkbox"
            ng-click="::vm.selectAll('UPDATE')"
            ng-checked="vm.allSelected('UPDATE')"
          />
          <span></span>
          <span class="sr-only">{{ 'Update' | translate }}</span>
        </label>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="group in vm.groupedPermissions | orderBy:'category'">
      <td>
        {{::vm.categoryLabel(group) | translate}}
        <button
          class="btn-help btn-help--sm"
          aria-label="{{ 'Help' | translate }}"
          type="button"
          uib-popover="{{::vm.STRINGS.PERMISSIONS_GLOBAL[group.category] | translate}}"
          popover-placement="right"
          popover-append-to-body="true"
          popover-trigger="'focus'"
          ng-show="::vm.STRINGS.PERMISSIONS_GLOBAL[group.category]"
        ></button>
      </td>
      <td class="text-center">
        <label
          class="c8y-checkbox d-inline-block"
          ng-class="{ disabled: vm.readOnly }"
          ng-show="::vm.hasPermission(group.permissions, 'READ')"
        >
          <input
            type="checkbox"
            ng-model="::vm.selectedPermissions[vm.permissionId(group.permissions, 'READ')]"
            ng-disabled="vm.readOnly"
          />
          <span></span>
          <span class="sr-only">{{ 'Read' | translate }}</span>
        </label>
      </td>
      <td class="text-center">
        <label
          class="c8y-checkbox d-inline-block"
          ng-class="{ disabled: vm.readOnly }"
          ng-show="::vm.hasPermission(group.permissions, 'ADMIN')"
        >
          <input
            type="checkbox"
            ng-model="::vm.selectedPermissions[vm.permissionId(group.permissions, 'ADMIN')]"
            ng-disabled="vm.readOnly"
          />
          <span></span>
          <span class="sr-only">{{ 'Admin' | translate }}</span>
        </label>
      </td>
      <td class="text-center">
        <label
          class="c8y-checkbox d-inline-block"
          ng-class="{ disabled: vm.readOnly }"
          ng-show="::vm.hasPermission(group.permissions, 'CREATE')"
        >
          <input
            type="checkbox"
            ng-model="::vm.selectedPermissions[vm.permissionId(group.permissions, 'CREATE')]"
            ng-disabled="vm.readOnly"
          />
          <span></span>
          <span class="sr-only">{{ 'Create' | translate }}</span>
        </label>
      </td>
      <td
        class="text-center"
        ng-if="vm.hasPermissionWithAccess('UPDATE')"
      >
        <label
          class="c8y-checkbox d-inline-block"
          ng-class="{ disabled: vm.readOnly }"
          ng-show="::vm.hasPermission(group.permissions, 'UPDATE')"
        >
          <input
            type="checkbox"
            ng-model="::vm.selectedPermissions[vm.permissionId(group.permissions, 'UPDATE')]"
            ng-disabled="vm.readOnly"
          />
          <span></span>
          <span class="sr-only">{{ 'Update' | translate }}</span>
        </label>
      </td>
    </tr>
  </tbody>
</table>
