<div data-ng-controller="deviceUserDetailCtrl">
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item label="{{ user.userName }}" icon="card-security1"></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      path="#deviceusers"
      label="{{ 'Device credentials' | translate }}"
      icon="card-security1"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      label="{{ 'Management' | translate }}"
      icon="c8y-management"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>

  <form name="userForm" ng-submit="save(user)" novalidate>
    <div class="card content-fullpage d-grid grid__col--6-6--md">
      <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">
          <div class="form-group" ng-class="{ 'has-error': invalid('username') }">
            <label>{{ 'Username' | translate }}</label>
            <input
              class="form-control"
              name="username"
              ng-model="user.userName"
              placeholder="{{ 'e.g. device_user' | translate }}"
              required
              ng-disabled="user.id"
              c8y-autocomplete="off"
            />
            <div class="c8y-messages">
              <div class="form-control-feedback-message">
                {{ getErrorFeedback('username') }}
              </div>
            </div>
          </div>

          <div class="form-group">
            <label translate>Active</label>
            <div>
              <button
                type="button"
                class="btn btn-default"
                on
                ng-model="user.enabled"
                uib-btn-checkbox="user.enabled"
              >
                <i c8y-icon="minus-circle" class="text-danger" ng-show="!user.enabled"></i>
                <i c8y-icon="check-circle" class="text-success" ng-show="user.enabled"></i>
                <span title="{{ 'Enabled' | translate }}" ng-show="user.enabled">
                  {{ 'Enabled' | translate }}
                </span>
                <span title="{{ 'Disabled' | translate }}" ng-show="!user.enabled">
                  {{ 'Disabled' | translate }}
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-level-1 inner-scroll">
        <div class="card-header large-padding sticky-top separator">
          <div class="card-title" translate>Global roles</div>
        </div>
        <div class="card-block p-t-0">
          <ul class="c8y-list__group large-padding no-border-last">
            <li class="c8y-list__item bg-inherit" ng-repeat="group in groups">
              <div class="c8y-list__item__block">
                <div class="c8y-list__item__radio p-l-0">
                  <label class="c8y-checkbox text-center">
                    <input
                      type="checkbox"
                      id="{{ 'groupcheckbox' + $index }}"
                      ng-model="_groups[group.id]"
                    />
                    <span></span>
                  </label>
                </div>
                <div class="c8y-list__item__body">
                  <label for="{{ 'groupcheckbox' + $index }}" class="text-normal">
                    {{::getGroupName(group) | translate}}
                  </label>
                  <p class="small text-muted">{{::group.description | translate}}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="card-footer large-padding separator grid__col--fullspan">
        <button
          title="{{ 'Cancel' | translate }}"
          type="button"
          ng-click="cancel()"
          class="btn btn-default"
        >
          {{ 'Cancel' | translate }}
        </button>
        <button
          title="{{ 'Save' | translate }}"
          ng-class="{ 'btn-save': showPassword }"
          class="btn btn-primary"
          type="submit"
          ng-disabled="userForm.$invalid || userForm.$pristine || saving"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </div>
  </form>
</div>
