<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-accounts"
    path="#users"
    label="{{ 'Users' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-accounts"
    label="{{ 'Accounts' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<div class="card content-fullpage d-grid grid__col--6-6--md grid__row--auto-min-content">
  <form
    class="d-contents"
    name="forms.userForm"
    novalidate
  >
    <div class="inner-scroll bg-level-0">
      <div class="card-header large-padding separator sticky-top">
        <div
          class="card-title h4"
          translate
        >
          Identification
        </div>
      </div>
      <div class="card-block large-padding">
        <c8y-ui-edit-user
          user="user"
          forms="forms"
          password="password"
          disabled-edit="!canEditUser(currentUser, user) || hasExternalOrigin"
          hide-active="!canActivateUser(currentUser, user)"
          hide-owner="!vm.FEATURE_USER_HIERARCHY"
          hide-delegate="!vm.FEATURE_USER_HIERARCHY"
          hide-language="true"
          user-tfa-enforced="userTfaEnforced"
          top-level-tfa-enforced="topLevelTfaEnforced"
        ></c8y-ui-edit-user>
      </div>
    </div>
  </form>

  <form
    class="d-contents"
    name="forms.rolesForm"
    novalidate
  >
    <div class="bg-level-1 inner-scroll">
      <div class="card-header sticky-top separator">
        <div
          class="h4 card-title"
          translate
        >
          Global roles
        </div>
      </div>
      <ul class="c8y-list__group p-l-16 p-r-16 no-border-last">
        <li
          class="c8y-list__item bg-inherit"
          ng-repeat="group in groups | orderBy: 'name'"
        >
          <div class="c8y-list__item__block">
            <div class="c8y-list__item__body p-l-0">
              <label
                class="c8y-checkbox a-i-start"
                ng-class="{
                  disabled: vm.shouldDisableGlobalRolesCheckbox(group)
                }"
              >
                <input
                  id="{{ 'groupcheckbox' + $index }}"
                  type="checkbox"
                  ng-model="_groups[group.id]"
                  ng-disabled="vm.shouldDisableGlobalRolesCheckbox(group)"
                />
                <span></span>
                <span
                  class="text-normal d-flex"
                  title="{{ ::vm.getRoleName(group) | translate }}"
                >
                  <div>
                    {{::vm.getRoleName(group) | translate}}
                    <p class="small text-muted">{{::group.description | translate}}</p>
                  </div>
                  <button
                    class="m-l-auto btn-clean"
                    aria-label="{{ 'Global roles' | translate }}"
                    type="button"
                    uib-popover="{{
                      'Only global roles defined on the owner can be defined on the owned user.'
                        | translate
                    }}"
                    popover-trigger="'focus'"
                    popover-placement="right"
                    popover-append-to-body="true"
                    ng-click="$event.preventDefault()"
                    ng-show="restrictedByOwner(group)"
                  >
                    <i
                      class="text-warning"
                      c8y-icon="exclamation-circle"
                    ></i>
                  </button>
                </span>
              </label>
            </div>
          </div>
        </li>
      </ul>

      <div
        class="bg-inherit card--grid__separator-top--white"
        ng-if="showAcl()"
      >
        <div class="card-header large-padding sticky-top separator">
          <div
            class="h4"
            translate
          >
            User permissions
          </div>
        </div>
        <div class="card-block large-padding">
          <c8y-acl-editor acl="user.devicePermissions"></c8y-acl-editor>
        </div>
      </div>
    </div>
  </form>

  <div class="card-footer large-padding separator 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"
      ng-class="{ 'btn-save': showPassword }"
      title="{{ 'Save' | translate }}"
      type="button"
      ng-if="canEditUser(currentUser, user)"
      ng-disabled="!vm.canSave()"
      ng-click="checkPassword(user)"
      c8y-key-shortcut="Enter"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</div>
