<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
    <cds-tag *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
        class="tag-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</cds-tag>
    <cds-tag *ngIf="prometheusAlertService.activeWarningAlerts > 0"
        class="tag-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</cds-tag></a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       routerLink="/monitoring/silences"
       routerLinkActive="active"
       ariaCurrentWhenActive="page"
       [routerLinkActiveOptions]="{exact: true}"
       i18n>Silences</a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       routerLink="/monitoring/alerts"
       routerLinkActive="active"
       ariaCurrentWhenActive="page"
       [routerLinkActiveOptions]="{exact: true}"
       i18n>Alert Rules</a>
  </li>
</ul>
