<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link"
       routerLink="/monitoring/active-alerts"
       routerLinkActive="active"
       ariaCurrentWhenActive="page"
       [routerLinkActiveOptions]="{exact: true}"
       i18n>Active Alerts
    <small *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
        class="badge badge-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</small>
    <small *ngIf="prometheusAlertService.activeWarningAlerts > 0"
        class="badge badge-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</small></a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       routerLink="/monitoring/alerts"
       routerLinkActive="active"
       ariaCurrentWhenActive="page"
       [routerLinkActiveOptions]="{exact: true}"
       i18n>Alerts</a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       routerLink="/monitoring/silences"
       routerLinkActive="active"
       ariaCurrentWhenActive="page"
       [routerLinkActiveOptions]="{exact: true}"
       i18n>Silences</a>
  </li>
</ul>
