<form #userForm="ngForm" (ngSubmit)="userForm.form.valid && save()">
  <div class="alert alert-warning" role="alert" *ngIf="userIsExternal" translate>
    Some of the user settings are not editable here because they are managed via your authorization
    server.
  </div>
  <c8y-form-group>
    <label translate for="userName">Username (e.g. email)</label>
    <input
      id="userName"
      class="form-control"
      [(ngModel)]="user.userName"
      name="userName"
      autocomplete="off"
      required
      maxlength="254"
      placeholder="{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}"
      [disabled]="user.id"
      c8yDefaultValidation="user"
    />
  </c8y-form-group>

  <c8y-form-group>
    <label translate for="displayName">Login alias</label>
    <input
      id="displayName"
      class="form-control"
      [(ngModel)]="user.displayName"
      name="displayName"
      autocomplete="off"
      maxlength="254"
      placeholder="{{ 'e.g. joe.doe`LOCALIZE`' | translate }}"
      [disabled]="userIsExternal"
      c8yDefaultValidation="loginAlias"
    />
  </c8y-form-group>

  <c8y-form-group [hasWarning]="!user.email">
    <label translate for="userEmail">Email</label>
    <input
      id="userEmail"
      class="form-control"
      type="email"
      name="email"
      [maxlength]="254"
      autocomplete="off"
      placeholder="{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}"
      [(ngModel)]="user.email"
      email
      [required]="true"
      [disabled]="userIsExternal"
    />
  </c8y-form-group>

  <div class="row" style="margin-left:-15px; margin-right:-15px">
    <div class="col-sm-6">
      <c8y-form-group>
        <label translate for="userFirstName">First name</label>
        <input
          id="userFirstName"
          class="form-control"
          autocomplete="off"
          maxlength="50"
          name="firstName"
          [(ngModel)]="user.firstName"
          [disabled]="userIsExternal"
        />
      </c8y-form-group>
    </div>
    <div class="col-sm-6">
      <c8y-form-group>
        <label translate for="userLastName">Last name</label>
        <input
          id="userLastName"
          class="form-control"
          autocomplete="off"
          maxlength="50"
          name="lastName"
          [(ngModel)]="user.lastName"
          [disabled]="userIsExternal"
        />
      </c8y-form-group>
    </div>
  </div>

  <c8y-form-group>
    <label translate for="userTelephone">Telephone</label>
    <input
      id="userTelephone"
      class="form-control"
      autocomplete="off"
      name="phone"
      maxlength="254"
      [(ngModel)]="user.phone"
      placeholder="{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}"
      c8yPhoneValidation
      c8yDefaultValidation="phoneNumber"
      [required]="isPhoneRequired"
      [disabled]="userIsExternal"
    />
  </c8y-form-group>

  <c8y-form-group>
    <label translate for="userLang">Language</label>
    <div class="c8y-select-wrapper">
      <select
        id="userLang"
        class="form-control"
        #selectLang
        name="lang"
        [(ngModel)]="lang"
        (change)="onLanguage.emit(selectLang.value)"
      >
        <option *ngFor="let lang of langs" [value]="lang">{{
          translate.getNativeLanguage(lang)
        }}</option>
      </select>
      <span></span>
    </div>
  </c8y-form-group>

  <c8y-form-group class="p-t-8 p-b-8 separator-top" *ngIf="showProductUsageSetting">
    <strong translate>Product experience</strong>
    <label class="c8y-switch" for="productUsageTracking">
      <input
        id="productUsageTracking"
        name="productUsageTracking"
        type="checkbox"
        [(ngModel)]="isUsageTrackingEnabled"
      />
      <span></span>
      {{ 'Enable anonymous tracking to enhance the product experience' | translate }}
    </label>
  </c8y-form-group>

  <div class="form-group" *ngIf="!userIsExternal">
    <label class="control-label">{{ 'Login options' | translate }}</label>
    <c8y-new-password (password)="onNewPasswordChanged($event)"></c8y-new-password>
    <button
      title="{{ 'Set up two-factor authentication' | translate }}"
      class="btn btn-default"
      type="button"
      (click)="setupTotp()"
      *ngIf="userCanSetupTotp && !userHasActiveTotp && isTfaEnabled"
    >
      {{ 'Set up two-factor authentication' | translate }}
    </button>
  </div>

  <c8y-form-group *ngIf="!!(state.state$ | async).newsletter">
    <label translate>Newsletter</label>
    <label
      title="{{ 'Send me information about outages, maintenance or updates.' | translate }}"
      class="c8y-checkbox"
    >
      <input
        type="checkbox"
        name="newsletter"
        [(ngModel)]="user.newsletter"
        [disabled]="userIsExternal"
      />
      <span></span>
      <span>
        {{ 'Send me information about outages, maintenance or updates.' | translate }}
      </span>
    </label>
  </c8y-form-group>

  <div class="modal-footer">
    <button
      title="{{ 'Cancel' | translate }}"
      class="btn btn-default"
      type="button"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      title="{{ 'Save' | translate }}"
      class="btn btn-primary"
      type="submit"
      [disabled]="!userForm.form.valid || userForm.form.pristine || loading"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>