<div ng-controller="permissionsCtrl as vm">
  <c8y-ui-title-set title="vm.application.name | humanizeAppName"></c8y-ui-title-set>
  <div class="card card--grid content-fullpage grid__col--6-6--md">
    <div class="inner-scroll bg-level-0">
      <div class="card-header separator sticky-top large-padding">
        <div class="card-title" translate>Required permissions</div>
      </div>
      <div class="card-block large-padding bg-inherit overflow-visible p-t-0">
        <div ng-if="!vm.requiredRoles.length" class="alert alert-info m-t-16">
          <translate>No permissions required.</translate>
        </div>
        <c8y-roles-matrix
          ng-if="vm.requiredRoles.length"
          available-roles="vm.requiredRoles"
          selected-roles="vm.application.requiredRoles"
          read-only="true"
          class="bg-inherit"
        ></c8y-roles-matrix>
      </div>
    </div>

    <div class="inner-scroll bg-level-1">
      <div class="card-header separator sticky-top large-padding">
        <div class="card-title" translate>Provided roles</div>
      </div>
      <div class="card-block large-padding overflow-visible p-t-0 bg-inherit">
        <div ng-if="!vm.roles.length" class="alert alert-info m-t-16">
          <translate>No roles provided.</translate>
        </div>
        <c8y-roles-matrix
          ng-if="vm.roles.length"
          available-roles="vm.roles"
          selected-roles="vm.application.roles"
          read-only="true"
          class="bg-inherit"
        ></c8y-roles-matrix>
      </div>
    </div>
  </div>
</div>
