<div class="row">
  <div
    class="form-group"
    ng-class="{
      'has-error': invalid('username'),
      'col-sm-12': hideActive,
      'col-sm-8': !hideActive
    }"
    ng-hide="hideUsername"
  >
    <label>{{ 'Username' | translate }}</label>
    <input
      class="form-control"
      placeholder="{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}"
      name="username"
      required
      ng-model="user.userName"
      ng-pattern="userNamePattern"
      ng-maxlength="254"
      ng-trim="false"
      ng-disabled="user.id || disabledEdit"
      c8y-autocomplete="off"
      c8y-username-validator
    />
    <div
      class="c8y-messages"
      data-cy="c8y-users--invalid-username-message"
      ng-if="invalid('username')"
    >
      <small
        class="form-control-feedback-message small"
        ng-bind-html="getErrorFeedback('username') | translate"
      ></small>
    </div>
  </div>

  <div
    class="form-group col-sm-4"
    ng-hide="hideActive"
  >
    <label>{{ 'Status' | translate }}</label>
    <button
      class="btn btn-default m-b-0"
      aria-label="{{ 'Status' | translate }}"
      type="button"
      ng-model="user.enabled"
      uib-btn-checkbox="user.enabled"
      ng-disabled="disabledEdit"
    >
      <i
        class="text-danger"
        c8y-icon="minus-circle"
        ng-hide="user.enabled"
      ></i>
      <i
        class="text-success"
        c8y-icon="check-circle"
        ng-show="user.enabled"
      ></i>
      <span
        title="{{ 'Enabled' | translate }}"
        ng-show="user.enabled"
      >
        {{ 'Enabled' | translate }}
      </span>
      <span
        title="{{ 'Disabled' | translate }}"
        ng-hide="user.enabled"
      >
        {{ 'Disabled' | translate }}
      </span>
    </button>
  </div>
</div>

<div class="row">
  <div
    class="form-group"
    ng-class="{
      'has-error': invalid('displayName'),
      'col-sm-12': hideActive,
      'col-sm-8': !hideActive
    }"
  >
    <label>{{ 'Login alias' | translate }}</label>
    <input
      class="form-control"
      placeholder="{{ 'e.g. joe.doe`LOCALIZE`' | translate }}"
      name="displayName"
      ng-model="user.displayName"
      ng-pattern="loginAliasPattern"
      ng-maxlength="254"
      ng-trim="false"
      ng-disabled="disabledEdit"
      c8y-autocomplete="off"
    />
    <div
      class="c8y-messages"
      ng-if="invalid('displayName')"
    >
      <small
        class="form-control-feedback-message small"
        ng-bind-html="getErrorFeedback('displayName') | translate"
      ></small>
    </div>
  </div>
</div>

<div
  class="form-group"
  ng-class="{ 'has-error': invalid('email') }"
  ng-hide="hideEmail"
>
  <label>
    {{ 'Email' | translate }}
    <span ng-show="user.sendPasswordResetEmail"></span>
    <button
      class="btn-help btn-help--sm"
      aria-label="{{ 'Help' | translate }}"
      type="button"
      uib-popover="{{
        'You are not allowed to change the email addresses of other users. SSO-managed users are also not allowed to change their own email.'
          | translate
      }}"
      popover-trigger="'focus'"
      popover-placement="right"
      popover-append-to-body="true"
      ng-show="!userCanChangePasswordAndEmail"
      ng-click="$event.preventDefault()"
    ></button>
  </label>

  <input
    class="form-control"
    placeholder="{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}"
    name="email"
    type="email"
    ng-model="user.email"
    ng-maxlength="254"
    c8y-autocomplete="off"
    ng-disabled="disabledEdit || !userCanChangePasswordAndEmail"
    ng-required="true"
  />
  <div
    class="c8y-messages"
    ng-show="invalid('email')"
    data-cy="c8y-messages--invalid-email"
  >
    <small
      class="form-control-feedback-message small"
      ng-bind-html="getErrorFeedback('email') | translate"
    ></small>
  </div>
</div>

<div class="row">
  <div
    class="col-sm-6 form-group"
    ng-class="{ 'has-error': invalid('firstName') }"
    ng-hide="hideFirstName"
  >
    <label id="FirstName">{{ 'First name' | translate }}</label>
    <input
      class="form-control"
      aria-labelledby="FirstName"
      placeholder="{{ 'e.g. Joe`LOCALIZE`' | translate }}"
      name="firstName"
      ng-model="user.firstName"
      ng-maxlength="50"
      c8y-autocomplete="off"
      ng-disabled="disabledEdit"
    />
    <div
      class="c8y-messages"
      ng-if="invalid('firstName')"
    >
      <small
        class="form-control-feedback-message small"
        ng-bind-html="getErrorFeedback('firstName') | translate"
      ></small>
    </div>
  </div>

  <div
    class="col-sm-6 form-group"
    ng-class="{ 'has-error': invalid('lastName') }"
    ng-hide="hideLastName"
  >
    <label id="LastName">{{ 'Last name' | translate }}</label>
    <input
      class="form-control"
      aria-labelledby="LastName"
      placeholder="{{ 'e.g. Doe`LOCALIZE`' | translate }}"
      name="lastName"
      ng-model="user.lastName"
      ng-maxlength="50"
      c8y-autocomplete="off"
      ng-disabled="disabledEdit"
    />
    <div
      class="c8y-messages"
      ng-if="invalid('lastName')"
    >
      <small
        class="form-control-feedback-message small"
        ng-bind-html="getErrorFeedback('lastName') | translate"
      ></small>
    </div>
  </div>
</div>

<div
  class="form-group"
  ng-hide="hideTelephone"
>
  <label>
    {{ 'Telephone' | translate }}
    <span ng-if="user.twoFactorAuthenticationEnabled"></span>
  </label>
  <input
    class="form-control"
    placeholder="{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}"
    name="phone"
    ng-model="user.phone"
    c8y-autocomplete="off"
    ng-maxlength="254"
    maxlength="254"
    ng-required="(user.twoFactorAuthenticationEnabled || topLevelTfaEnforced) && vm.tfaStrategy === 'SMS'"
    ng-disabled="disabledEdit"
    c8y-phone-number
  />
  <div class="c8y-messages">
    <small
      class="form-control-feedback-message small"
      data-cy="c8y-users--invalid-phone-message"
      ng-bind-html="getErrorFeedback('phone') | translate"
    ></small>
  </div>
</div>

<div class="row">
  <div
    class="form-group col-sm-6"
    ng-if="!hideOwner"
  >
    <label>{{ 'Owner' | translate }}</label>
    <input
      class="form-control"
      disabled
      ng-show="disabledEdit || ownerEditDisabled"
      ng-value="user.owner"
    />

    <div
      class="form-control p-0 dropup"
      ng-hide="disabledEdit || ownerEditDisabled"
      is-open="vm.isParentDropDownOpen"
      on-toggle="vm.onToggleDropdown(open)"
      uib-dropdown
      dropdown-append-to-body="true"
    >
      <button
        class="btn dropdown-toggle fit-w"
        title="{{ 'Select owner' | translate }}…"
        aria-haspopup="true"
        type="button"
        data-toggle="dropdown"
        uib-dropdown-toggle
        data-cy="c8y-edit-user--select-owner"
      >
        <span class="d-flex">
          <span
            class="text-truncate"
            title="{{ user.owner }}"
            ng-if="user.owner"
          >
            {{ user.owner }}
          </span>
          <span
            class="text-muted"
            title="{{ 'Select owner' | translate }}…"
            ng-if="!user.owner"
          >
            {{ 'Select owner' | translate }}…
          </span>
          <span class="caret m-l-auto"></span>
        </span>
      </button>

      <div
        class="dropdown-menu"
        role="menu"
        ng-click="$event.stopPropagation();"
        uib-dropdown-menu
      >
        <span
          ng-if="vm.isParentDropDownOpen"
          ng-init="vm.currentOwner=user.owner"
        ></span>
        <div class="p-t-16 bg-level-0">
          <c8y-ui-user-picker
            ng-if="vm.ownerDropDownInitialized"
            include-root="true"
            default-user="vm.defaultOwner"
            root-users="vm.rootOwner"
            hidden-users="user"
            ng-model="vm.currentOwner"
          ></c8y-ui-user-picker>

          <button
            class="btn btn-primary btn-block"
            title="{{ 'Done' | translate }}"
            type="button"
            ng-click="setOwner(vm.currentOwner)"
          >
            {{ 'Done' | translate }}
          </button>
          <ng-form name="vm.ownerHiddenForm"></ng-form>
        </div>
      </div>
    </div>
  </div>

  <div
    class="form-group col-sm-6"
    ng-hide="hideDelegate"
  >
    <label>{{ 'Delegated by' | translate }}</label>
    <div class="form-control-static">
      <ng-form name="delegationHiddenForm"></ng-form>

      <div
        class="input-group"
        ng-show="user.delegatedBy"
      >
        <a
          class="form-control d-flex a-i-center"
          ng-href="#/users/{{ user.delegatedBy }}"
        >
          <i
            class="m-r-4"
            c8y-icon="c8y-user"
          ></i>
          {{ user.delegatedBy }}
        </a>
        <div class="input-group-btn">
          <button
            class="btn btn-default"
            aria-label="{{ 'Undelegate' | translate }}"
            uib-tooltip="{{ 'Undelegate' | translate }}"
            tooltip-popup-delay="500"
            type="button"
            ng-click="undelegate()"
          >
            <i c8y-icon="times"></i>
          </button>
        </div>
      </div>
      <div
        class="input-group"
        ng-hide="user.delegatedBy"
      >
        <em
          class="form-control d-flex a-i-center"
          translate
        >
          No delegation
        </em>
        <div class="input-group-btn">
          <button
            class="btn btn-default"
            aria-label="{{ 'Delegate' | translate }}"
            uib-tooltip="{{ 'Delegate' | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
            type="button"
            ng-click="delegateTo()"
            ng-disabled="disabledEdit"
          >
            <i
              class="text-16"
              c8y-icon="batch-assign"
            ></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="form-group"
  ng-hide="!tfaAvailable && hideTfaOption && hidePasswordReset"
>
  <label>{{ 'Login options' | translate }}</label>
  <div ng-if="tfaAvailable && !hideTfaOption">
    <label
      class="c8y-checkbox"
      ng-class="{ disabled: vm.twoFactorAuthenticationCheckboxDisabled() }"
      title="{{ 'Two-factor authentication' | translate }}"
    >
      <input
        type="checkbox"
        ng-model="user.twoFactorAuthenticationEnabled"
        ng-checked="user.twoFactorAuthenticationEnabled || topLevelTfaEnforced"
        ng-disabled="vm.twoFactorAuthenticationCheckboxDisabled()"
      />
      <span></span>
      <span>
        {{ 'Two-factor authentication' | translate }}
        <small
          class="text-muted"
          title="{{ vm.tfaStrategy || 'SMS' }}"
        >
          ({{ vm.tfaStrategy || 'SMS' }})
        </small>
      </span>

      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover="{{
          'When enabled, a verification code sent by SMS is required to complete authentication'
            | translate
        }}"
        popover-trigger="'focus'"
        popover-placement="right"
        popover-append-to-body="true"
        ng-click="$event.preventDefault()"
        ng-show="vm.tfaStrategy === 'SMS' && notCurrentUser"
      ></button>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover="{{
          'Authentication by SMS - cannot be changed for your own user.' | translate
        }}"
        popover-trigger="'focus'"
        popover-placement="right"
        popover-append-to-body="true"
        ng-click="$event.preventDefault()"
        ng-show="vm.tfaStrategy === 'SMS' && !notCurrentUser"
      ></button>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover="{{
          'TOTP secret activated. It can be revoked using the button below.' | translate
        }}"
        popover-trigger="'focus'"
        popover-placement="right"
        popover-append-to-body="true"
        ng-click="$event.preventDefault()"
        ng-show="vm.tfaStrategy === 'TOTP' && user.twoFactorAuthenticationEnabled"
      ></button>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover="{{
          'TOTP secret is not activated. It can only be activated from the user menu.' | translate
        }}"
        popover-trigger="'focus'"
        popover-placement="right"
        popover-append-to-body="true"
        ng-click="$event.preventDefault()"
        ng-show="vm.tfaStrategy === 'TOTP' && !user.twoFactorAuthenticationEnabled"
      ></button>
      <button
        class="btn-clean"
        aria-label="{{ smsWarningPopover | translate }}"
        type="button"
        uib-popover-html="smsWarningPopover | translate"
        popover-placement="right"
        popover-trigger="'focus'"
        popover-append-to-body="true"
        ng-show="vm.messagingWarningVisible()"
        ng-click="$event.preventDefault()"
      >
        <i
          class="text-danger"
          c8y-icon="exclamation-triangle"
        ></i>
      </button>
    </label>
  </div>
  <div ng-show="vm.tfaStrategy === 'TOTP' && tfaAvailable">
    <label
      class="c8y-checkbox"
      ng-class="{ disabled: vm.enforceTfaCheckboxDisbaled() }"
      title="{{ 'Enforce TOTP setup for the user' | translate }}"
    >
      <input
        type="checkbox"
        ng-model="userTfaEnforced"
        ng-checked="topLevelTfaEnforced"
        ng-disabled="vm.enforceTfaCheckboxDisbaled()"
      />
      <span></span>
      <span>{{ 'Enforce TOTP setup for the user' | translate }}</span>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover="{{ 'TOTP cannot be enforced for your own user.' | translate }}"
        popover-trigger="'focus'"
        popover-placement="right"
        popover-append-to-body="true"
        ng-click="$event.preventDefault()"
        ng-show="!notCurrentUser"
      ></button>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover="{{
          'TOTP is enforced for the user based on the platform-level settings.' | translate
        }}"
        popover-trigger="'focus'"
        popover-placement="right"
        popover-append-to-body="true"
        ng-click="$event.preventDefault()"
        ng-show="topLevelTfaEnforced"
      ></button>
    </label>
  </div>

  <div ng-show="user.id">
    <div ng-hide="hidePasswordReset || disabledEdit || !notCurrentUser">
      <label
        class="c8y-checkbox"
        ng-class="{ disabled: user.sendPasswordResetEmail }"
        title="{{ 'User must change password on the next login' | translate }}"
      >
        <input
          name="shouldResetPassword"
          type="checkbox"
          ng-model="user.shouldResetPassword"
          ng-disabled="user.sendPasswordResetEmail"
        />
        <span></span>
        <span>{{ 'User must change password on the next login' | translate }}</span>
      </label>
    </div>
  </div>

  <div name="changePassword" class="m-t-16" ng-show="isChangePasswordVisible()">
    <label>{{ 'Password' | translate }}</label>
    <button class="btn btn-default" ng-click="changePassword()">{{ 'Change password' | translate }}</button>
  </div>

  <div
    class="m-t-16"
    ng-hide="isChangePasswordVisible() || !user.id || !user.email || vm.userHasExternalOrigin"
  >
    <label>{{ 'Reset password' | translate }}</label>
    <button class="btn btn-default" ng-disabled="!user.enabled" ng-click="sendPasswordResetEmailToUser()">{{ 'Send link to
      user' | translate }}</button>
  </div>

  <div
    class="m-t-16"
    ng-hide="user.id"
  >
    <label class="control-label">{{ 'Password options' | translate }}</label>
    <label
      class="c8y-radio input-sm"
      title="{{ 'Send password reset link as email' | translate }}"
    >
      <input
        id="sendPasswordByEmailRadio"
        name="setUserPasswordRadio"
        type="radio"
        ng-value="'sendPasswordByEmail'"
        ng-model="userPasswordAction"
      />
      <span></span>
      <span>{{ 'Send password reset link as email' | translate }}</span>
    </label>
    <label
      class="c8y-radio input-sm"
      title="{{ 'Set temporary password (user must change it on the first login)' | translate }}"
    >
      <input
        id="setPasswordAndForceToResetRadio"
        name="setUserPasswordRadio"
        type="radio"
        ng-value="'setUserPasswordAndForceToReset'"
        ng-model="userPasswordAction"
      />
      <span></span>
      <span>
        {{ 'Set temporary password (user must change it on the first login)' | translate }}
      </span>
    </label>
    <label
      class="c8y-radio input-sm"
      title="{{ 'Set password (not recommended)' | translate }}"
    >
      <input
        id="setUserPasswordRadio"
        name="setUserPasswordRadio"
        type="radio"
        ng-value="'setUserPassword'"
        ng-model="userPasswordAction"
      />
      <span></span>
      <span>{{ 'Set password (not recommended)' | translate }}</span>
    </label>
  </div>
</div>

<div ng-hide="hideCustomProperties || noCustomPropertiesToDisplay">
  <div class="p-t-8 p-b-8">
    <button ng-click="customPropertiesCollapsed = !customPropertiesCollapsed" class="btn-clean d-block text-medium fit-w p-t-8 p-b-8">
      <i c8y-icon="{{!customPropertiesCollapsed ? 'forward' : 'expand-arrow'}}" class="m-r-4"></i>
      {{ 'Custom properties' | translate }}
    </button>
  </div>

  <div
    class="p-t-16"
    ng-hide="!customPropertiesCollapsed"
  >
    <div
      class="form-group"
      ng-repeat="(key, val) in getUserCustomProperties(user)"
    >
      <label id="key">{{ key }}</label>
      <pre class="inner-scroll p-16">{{ val }}</pre>
    </div>
  </div>
</div>

<div
  class="form-group p-relative"
  style="z-index: 1000"
  ng-if="!hideLanguage"
>
  <label>{{ 'Language' | translate }}</label>
  <ui-select ng-model="user.language">
    <ui-select-match placeholder="{{ 'Select language' | translate }}">
      {{ $select.selected.name }}
    </ui-select-match>
    <ui-select-choices repeat="lang in languages | filter: $select.search | orderBy:'name'">
      <div ng-bind="lang.name"></div>
    </ui-select-choices>
  </ui-select>
</div>

<c8y-measurement-unit-preference
  ng-if="unitsConversionActive"
  user="user"
></c8y-measurement-unit-preference>

<div class="form-group m-t-16">
  <c8y-user-totp-revoke
    ng-if="vm.shouldEnableRevokeTOTPSecretButton()"
    [user]="user"
    (revoke)="user.twoFactorAuthenticationEnabled = false"
  ></c8y-user-totp-revoke>
</div>

<div
  class="row content-flex-50"
  ng-if="
    !disabledEdit &&
    password.showPassword &&
    !user.sendPasswordResetEmail &&
    userCanChangePasswordAndEmail
  "
>
  <div class="col-6">
    <div
      class="form-group"
      ng-class="{ 'has-error': invalid('password') }"
    >
      <label for="password">{{ 'Password' | translate }}</label>
      <c8y-password-input
        name="password"
        required
        [id]="'password'"
        ng-model="user.password"
        ng-pattern="passwordRegex"
        ng-change="changePasswordConfirm()"
        [autocomplete]="'new-password'"
      ></c8y-password-input>
      <div
        class="c8y-messages"
        ng-if="invalid('password')"
      >
        <div
          class="form-control-feedback-message small"
          ng-bind-html="getErrorFeedback('password') | translate"
        ></div>
      </div>
    </div>
    <div
      class="form-group"
      ng-class="{ 'has-error': isInvalidConfirmPassword() }"
    >
      <label for="confirmPassword">{{ 'Confirm password' | translate }}</label>
      <c8y-password-input
        name="confirmPassword"
        required
        [id]="'confirmPassword'"
        ng-model="$parent.confirmPassword"
        ng-change="changePasswordConfirm()"
        [autocomplete]="'new-password'"
      ></c8y-password-input>
      <div
        class="c8y-messages"
        ng-if="isInvalidConfirmPassword()"
      >
        <div
          class="form-control-feedback-message small"
          ng-bind-html="getErrorFeedback('confirmPassword') | translate"
        ></div>
      </div>
    </div>
  </div>

  <div class="col-6">
    <c8y-password-strength-checklist
      strength-enforced="passwordStrengthEnforced"
      password="$parent.forms.userForm.password.$viewValue"
      requirements-fulfilled="onRequirementsFulfilledChange(value)"
    ></c8y-password-strength-checklist>
  </div>
</div>
