<div ng-if="vm.strengthEnforced">
  <div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
  <ul class="list-unstyled">
    <li
      class="d-flex small"
      ng-repeat="requirement in vm.combinedChecklist"
    >
      <i
        class="{{ requirement.contextualColor }}"
        c8y-icon="{{ requirement.icon }}"
      ></i>
      <span class="m-l-4 small {{ requirement.textColor }}">
        {{ requirement.getText() | translate }}
      </span>
    </li>
  </ul>
</div>

<div ng-if="!vm.strengthEnforced">
  <div class="m-b-8">{{ 'Password must meet the requirements below:' | translate }}</div>
  <ul class="list-unstyled">
    <li
      class="d-flex small"
      ng-repeat="requirement in vm.basicCheckList"
    >
      <i
        class="{{ requirement.contextualColor }}"
        c8y-icon="{{ requirement.icon }}"
      ></i>
      <span class="m-l-4 small {{ requirement.textColor }}">
        {{ requirement.getText() | translate }}
      </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">
    <li
      class="d-flex small"
      ng-repeat="requirement in vm.enhancedStrengthCheckList"
    >
      <i
        class="{{ requirement.contextualColor }}"
        c8y-icon="{{ requirement.icon }}"
      ></i>
      <span class="m-l-4 small {{ requirement.textColor }}">
        {{ requirement.getText() | translate }}
      </span>
    </li>
  </ul>
</div>
