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

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    path="#roles/inventory_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>

<form
  class="card content-fullpage d-grid grid__col--4-8--md"
  name="vm.inventoryRoleDetailForm"
>
  <div class="inner-scroll">
    <div class="card-header separator sticky-top">
      <div class="card-title">{{ 'Inventory role' | translate }}</div>
    </div>
    <div class="card-block flex-no-shrink">
      <div class="form-group">
        <label
          for="roleName"
          translate
        >
          Name
        </label>
        <input
          class="form-control"
          id="roleName"
          placeholder="{{ 'e.g. My inventory role' | translate }}"
          name="name"
          required
          ng-maxlength="50"
          ng-model="vm.role.name"
        />
        <c8y-error-feedback field="vm.inventoryRoleDetailForm.name"></c8y-error-feedback>
      </div>
      <div class="form-group">
        <label
          for="roleDescription"
          translate
        >
          Description
        </label>
        <textarea
          class="form-control"
          title="{{ 'Description' | translate }}"
          id="roleDescription"
          aria-multiline="true"
          name="description"
          rows="12"
          ng-maxlength="1000"
          ng-model="vm.role.description"
        ></textarea>
        <c8y-error-feedback field="vm.inventoryRoleDetailForm.description"></c8y-error-feedback>
      </div>
    </div>
  </div>
  <div class="inner-scroll bg-level-1">
    <div class="card-header bg-level-1 separator 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-placement="right"
        popover-append-to-body="true"
      ></button>
      <script
        id="helpContent.html"
        type="text/ng-template"
      >
        <div>
          <p translate>
            An <strong>inventory role</strong> contains permissions that can be attached to groups of
            devices.<br />
            Click <i c8y-icon="plus-circle" class="text-primary"></i> to add a new permission. In the
            permission drop-down, you can further restrict the access to objects containing the
            defined type.
          </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">
      <fieldset
        class="c8y-fieldset m-b-32"
        ng-repeat="scope in vm.permissionScopes"
      >
        <legend class="text-14">
          {{ scope.label | translate }}
          <button
            class="btn-help btn-help--sm"
            aria-label="{{ 'Help' | translate }}"
            type="button"
            uib-popover="{{::vm.STRINGS.PERMISSIONS_SCOPES[scope.value] | translate}}"
            popover-placement="right"
            popover-trigger="'focus'"
            ng-show="::vm.STRINGS.PERMISSIONS_SCOPES[scope.value]"
          ></button>
        </legend>

        <c8y-role-inventory-permission-list
          scope="::scope.value"
          permissions="vm.role.permissions"
        ></c8y-role-inventory-permission-list>
      </fieldset>
    </div>
  </div>
  <div class="card-footer separator sticky-bottom grid__col--fullspan">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      ng-click="vm.cancel()"
      ng-disabled="vm.saving"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="button"
      ng-click="vm.save()"
      ng-disabled="vm.saving || vm.inventoryRoleDetailForm.$invalid || (vm.role.id && vm.inventoryRoleDetailForm.$pristine)"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>
