@if (numberOfDisabledChallenges > 0) {
  <warning-card>
    <ng-container warning-icon>
      @if (disabledBecauseOfEnv === 'Windows') {
        <i class="env-icon" [ngClass]="'fab fa-' + disabledBecauseOfEnv.toString().toLowerCase()"></i>
      } @else {
        <i class="env-icon" [ngClass]="'icon-' + disabledBecauseOfEnv.toString().toLowerCase()"></i>
      }
    </ng-container>
    @if (disabledBecauseOfEnv ==='Safety Mode') {
      <span warning-text [innerHTML]="'INFO_DISABLED_CHALLENGES' | translate: {num: numberOfDisabledChallenges,env:'safety mode being turned on'}"></span>
    } @else {
      <span warning-text [innerHTML]="'INFO_DISABLED_CHALLENGES' | translate: {num: numberOfDisabledChallenges, env: disabledBecauseOfEnv}"></span>
    }
    <button warning-action mat-button color="accent" (click)="toggleShowDisabledChallenges()">
      @if (filterSetting.showDisabledChallenges === true) {
        {{ 'HIDE_DISABLED_CHALLENGES' | translate }}
      } @else {
        {{ 'SHOW_DISABLED_CHALLENGES' | translate }}
      }
    </button>
  </warning-card>
}