@if (strengthEnforced) {
  <div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
  <ul class="list-unstyled">
    @for (requirement of combinedChecklist; track requirement.label) {
      <li class="small d-flex">
        <i
          class="{{ requirement.contextualColor }}"
          [c8yIcon]="requirement.icon"
        ></i>
        <span
          class="m-l-4 small {{ requirement.textColor }}"
          [translate]="requirement.label"
          [translateParams]="this.translateParams"
        ></span>
      </li>
    }
  </ul>
} @else {
  <div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
  <ul class="list-unstyled">
    @for (requirement of basicChecklist; track requirement.label) {
      <li class="small d-flex">
        <i
          class="{{ requirement.contextualColor }}"
          [c8yIcon]="requirement.icon"
        ></i>
        <span
          class="m-l-4 small {{ requirement.textColor }}"
          [translate]="requirement.label"
          [translateParams]="this.translateParams"
        ></span>
      </li>
    }
  </ul>

  <div class="m-b-8">
    {{ 'We recommend you to meet these conditions for a stronger password:' | translate }}
  </div>
  <ul class="list-unstyled">
    @if (recommendedMinLengthCheck) {
      <li class="small d-flex">
        <i
          class="{{ recommendedMinLengthCheck.contextualColor }}"
          [c8yIcon]="recommendedMinLengthCheck.icon"
        ></i>
        <span
          class="m-l-4 small {{ recommendedMinLengthCheck.textColor }}"
          [translate]="recommendedMinLengthCheck.label"
          [translateParams]="this.translateParams"
        ></span>
      </li>
    }
    @for (requirement of enhancedStrengthCheckList; track requirement.label) {
      <li class="small d-flex">
        <i
          class="{{ requirement.contextualColor }}"
          [c8yIcon]="requirement.icon"
        ></i>
        <span
          class="m-l-4 small {{ requirement.textColor }}"
          [translate]="requirement.label"
          [translateParams]="this.translateParams"
        ></span>
      </li>
    }
  </ul>
}