<form #userForm="ngForm" (ngSubmit)="userForm.form.valid && save()">
  <div class="d-block p-24 p-b-0">
    <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 (for example, 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">
      <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
        [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-16 separator-top" *ngIf="showProductUsageSetting">
      <label translate>Product experience</label>
      <label class="c8y-switch" for="productUsageTracking">
        <input
          id="productUsageTracking"
          name="productUsageTracking"
          type="checkbox"
          (change)="onEnablingProductUsageTracking(isUsageTrackingEnabled)"
          [(ngModel)]="isUsageTrackingEnabled"
        />
        <span></span>
        {{ 'Enable tracking to enhance the product experience' | translate }}
      </label>
      <ng-container *ngIf="isUsageTrackingEnabled">
        <label class="c8y-switch m-l-0" for="gainsightEngagements">
          <input
            id="gainsightEngagements"
            name="gainsightEngagements"
            type="checkbox"
            [(ngModel)]="isGainsightEngagementsEnabled"
          />
          <span></span>
          {{ 'Enable in-product information & communication' | translate }}
        </label>
      </ng-container>
    </c8y-form-group>

    <div class="form-group p-t-16 separator-top" *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>
  <div class="modal-footer separator-top bg-level-0 sticky-bottom">
    <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>