<div class="nsi-password-input">
  <div
    class="pa-field"
    [style.--label-width]="labelWidth">
    <div
      class="pa-field-container"
      [class.pa-focus]="hasFocus"
      [class.pa-disabled]="disabled || readonly"
      [class.pa-readonly]="readonly"
      [class.pa-field-error]="control.dirty && control.invalid">
      <input
        #htmlInput
        class="pa-field-control"
        [class.pa-field-control-filled]="isFilled"
        [formControl]="control"
        [id]="id"
        [attr.name]="name"
        [type]="type"
        [attr.aria-describedby]="describedById"
        [attr.placeholder]="placeholder"
        [readonly]="readonly"
        autocomplete="off"
        (blur)="onBlur()"
        (keyup)="onKeyUp($event)"
        (focus)="onFocus($event)" />
      <label
        class="pa-field-label"
        [for]="id">
        <ng-content></ng-content>
      </label>

      <pa-button
        class="nsi-password-input-button"
        size="small"
        aspect="basic"
        [icon]="type === 'password' ? 'eye-closed' : 'eye'"
        [disabled]="disabled"
        (click)="toggleInputType()">
        {{ (type === 'password' ? 'Show' : 'Hide') + ' password' }}
      </pa-button>
    </div>

    <pa-form-field-hint
      [id]="describedById"
      [help]="help"
      [errors]="control.errors"
      [showErrors]="control.dirty"
      [showAllErrors]="showAllErrors"
      [errorMessages]="errorMessages"></pa-form-field-hint>
  </div>
</div>
