<c8y-ui-title-set title="::vm.getRoleName(vm.role)"></c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    path="#roles/global_roles"
    label="{{ vm.tabName }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    label="{{ 'Roles' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-accounts"
    label="{{ 'Accounts' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<div class="card content-fullpage card--grid grid__col--8-4--sm">
  <form
    class="d-contents"
    name="vm.globalRoleDetailForm"
  >
    <div class="d-flex d-col inner-scroll bg-level-0">
      <div class="card-header large-padding separator">
        <div
          class="card-title"
          translate
        >
          Global role
        </div>
      </div>
      <div class="card-block large-padding p-b-0 flex-no-shrink">
        <div class="form-group">
          <label translate>Name</label>
          <input
            class="form-control"
            placeholder="{{ 'e.g. My global role' | translate }}"
            name="name"
            required
            ng-maxlength="254"
            ng-model="vm.role.name"
          />
          <c8y-error-feedback field="vm.globalRoleDetailForm.name"></c8y-error-feedback>
        </div>
        <div class="form-group">
          <label translate>Description</label>
          <textarea
            class="form-control"
            aria-label="{{ 'Description' | translate }}"
            aria-multiline="true"
            name="description"
            rows="3"
            ng-maxlength="1000"
            ng-model="vm.role.description"
          ></textarea>
          <c8y-error-feedback field="vm.globalRoleDetailForm.description"></c8y-error-feedback>
        </div>
      </div>
      <div class="inner-scroll">
        <div class="card-header large-padding separator-top-bottom sticky-top">
          <div class="card-title">
            {{ 'Permissions' | translate }}
          </div>
          <button
            class="btn-help"
            aria-label="{{ 'Help' | translate }}"
            type="button"
            uib-popover-template="'helpContent.html'"
            popover-trigger="'focus'"
            popover-append-to-body="true"
            popover-placement="right"
          ></button>
          <script
            id="helpContent.html"
            type="text/ng-template"
          >
            <div>
              <p translate>
                  A <strong>global role</strong> contains generally applicable permissions. For example,
                  select "Read" in the "Inventory" row to allow users with this role to read all objects in
                  inventory.
              </p>
              <small title="{{ 'Help and documentation' | translate }}" ng-show="::vm.helpLink">
                <a ng-href="{{::vm.helpLink}}" target="_blank" rel="noopener noreferrer">
                  <i c8y-icon="question-circle-o" class="text-info"></i>
                  <span translate>Help and documentation</span>
                </a>
              </small>
            </div>
          </script>
        </div>
        <div class="card-block large-padding bg-inherit overflow-visible p-b-0">
          <c8y-roles-matrix
            class="bg-inherit"
            available-roles="vm.permissions"
            selected-roles="vm.selectedPermissions"
            on-selected-roles-change="vm.onSelectedRolesChange(selectedRoles)"
          ></c8y-roles-matrix>
        </div>
      </div>
    </div>
    <div class="inner-scroll bg-level-1">
      <div class="card-header large-padding separator sticky-top">
        <div class="card-title">
          {{ 'Application access' | translate }}
        </div>

        <button
          class="btn-help"
          aria-label="{{ 'Help' | translate }}"
          type="button"
          uib-popover="{{ 'This role has access to the applications selected below' | translate }}"
          popover-trigger="'focus'"
          popover-placement="right"
          popover-append-to-body="true"
        ></button>
      </div>
      <div class="card-block large-padding p-t-0">
        <p
          class="alert alert-info"
          ng-show="vm.hasAppPermissions()"
          translate
        >
          This role already has access to all applications. Revoke all "Application management"
          permissions to grant access only to some applications.
        </p>

        <c8y-application-access
          allowed-applications="vm.role.applications"
          disabled-edit="vm.hasAppPermissions()"
          c8y-check-dirty="vm.role.applications"
        ></c8y-application-access>
      </div>
    </div>
  </form>
  <div class="card-footer large-padding separator-top grid__col-fullspan">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      ng-click="vm.cancel()"
      c8y-key-shortcut="Escape"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="button"
      ng-click="vm.save()"
      ng-disabled="vm.saving || vm.globalRoleDetailForm.$invalid || (vm.role.id && vm.globalRoleDetailForm.$pristine)"
      c8y-key-shortcut="Enter"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</div>
