<div class="form-group">
  @if (label) {
    <label [for]="id" [class.active]="!!control.value || !!placeholder">{{ label }}</label>
  }
  <input
    #input
    [id]="id"
    type="password"
    class="form-control input-password"
    [class.is-invalid]="isInvalid"
    [class.is-valid]="isValid"
    [formControl]="control"
    [placeholder]="placeholder"
    [attr.aria-describedby]="id + '-description'"
    [autocomplete]="confirmPasswordField ? 'off' : autocomplete" />

  <span class="password-icon" aria-hidden="true">
    <it-icon name="password-visible" size="sm" class="password-icon-visible"></it-icon>
    <it-icon name="password-invisible" size="sm" class="password-icon-invisible d-none"></it-icon>
  </span>

  @if (isInvalid) {
    <div [id]="id + '-error'" class="form-feedback just-validate-error-label">
      <div #customError>
        <ng-content select="[error]"></ng-content>
      </div>
      @if (!customError.hasChildNodes()) {
        {{ invalidMessage | async }}
      }
    </div>
  }

  @if (description !== undefined && !isStrengthMeter) {
    <small [id]="id + '-description'" class="form-text">
      {{ description !== true ? description : (strengthMeterDescription | async) }}
    </small>
  }

  <small class="password-caps form-text text-warning position-absolute bg-white w-100">
    {{ 'it.form.caps-inserted' | translate }}
  </small>

  @if (isStrengthMeter) {
    <div class="password-strength-meter">
      <small
        [id]="id + '-description'"
        class="form-text text-muted"
        [attr.data-bs-short-pass]="'it.form.password-strength-meter.password-short' | translate"
        [attr.data-bs-bad-pas]="'it.form.password-strength-meter.password-bad' | translate"
        [attr.data-bs-good-pass]="'it.form.password-strength-meter.password-good' | translate"
        [attr.data-bs-strong-pass]="'it.form.password-strength-meter.password-strong' | translate">
        {{ description !== undefined && description !== true ? description : (strengthMeterDescription | async) }}
      </small>
      <div class="password-meter progress rounded-0 position-absolute">
        <div class="row position-absolute w-100 m-0">
          <div class="col-3 border-start border-end border-white"></div>
          <div class="col-3 border-start border-end border-white"></div>
          <div class="col-3 border-start border-end border-white"></div>
          <div class="col-3 border-start border-end border-white"></div>
        </div>
        <div class="progress-bar bg-muted" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
  }
</div>
