@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="tertiary" (click)="toggleShowDisabledChallenges()">
      @if (filterSetting().showDisabledChallenges === true) {
        {{ 'HIDE_DISABLED_CHALLENGES' | translate }}
      } @else {
        {{ 'SHOW_DISABLED_CHALLENGES' | translate }}
      }
    </button>
  </warning-card>
}