<div
  class="input-group input-group-password"
  [ngClass]="{ 'input-group-lg': large }"
>
  <input
    class="form-control"
    [ngClass]="{ 'input-lg': large }"
    [type]="type"
    [value]="value"
    [id]="id"
    (input)="onInput($event)"
    (focusout)="onFocusOut()"
    [disabled]="disabled"
    [autocomplete]="autocomplete"
  />
  <span class="input-group-btn">
    @if (type === 'password') {
      <button
        class="btn btn-clean"
        title="{{ 'Show password' | translate }}"
        type="button"
        (click)="type = 'text'"
      >
        <i class="dlt-c8y-icon-eye"></i>
      </button>
    } @else {
      <button
        class="btn btn-clean"
        title="{{ 'Hide password' | translate }}"
        type="button"
        (click)="type = 'password'"
      >
        <i class="dlt-c8y-icon-eye-slash"></i>
      </button>
    }
  </span>
</div>