<ng-container *ngIf="(activatedRoute.data | async)?.title">
  <c8y-title>{{ TITLE | translate }}</c8y-title>
</ng-container>

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form"
>
  <c8y-alarms-filter
    [contextSourceId]="contextSourceId"
    (onFilterApplied)="applyFormFilters($event)"
    class="d-block fit-w"
  ></c8y-alarms-filter>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form"
>
  <c8y-alarms-type-filter
    [alarms]="alarms$ | async"
    (onFilterChanged)="applyTypeFilters($event)"
    class="d-block fit-w"
  ></c8y-alarms-type-filter>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'right'"
  [priority]="0"
>
  <button
    class="btn btn-link"
    [title]="'Clear all alarms' | translate"
    type="button"
    (click)="clearAll()"
    data-cy="c8y-alarms-view--clear-all-button"
  >
    <i c8yIcon="c8y-alert-idle"></i>
    {{ 'Clear all`alarms`' | translate }}
  </button>
</c8y-action-bar-item>

<!--Realtime button-->
<ng-template #realtimeRefresh>
  <div class="input-group-btn">
    <button
      class="btn btn-default btn-sm"
      [attr.aria-label]="'Refresh' | translate"
      [tooltip]="
        (isRealtimeActive | async)
          ? (NEW_REALTIME_ALARM_MESSAGE | translate)
          : (REFRESH_LABEL | translate)
      "
      placement="left"
      container="body"
      type="button"
      [adaptivePosition]="false"
      [delay]="500"
      [disabled]="isLoading$ | async"
      (click)="refresh()"
    >
      <span
        class="tag tag--info m-r-8"
        *ngIf="isRealtimeActive | async"
      >
        {{ 'New alarms' | translate }}
      </span>
      <i
        c8yIcon="refresh"
        [ngClass]="{ 'icon-spin': isLoading$ | async }"
      ></i>
    </button>
    <button
      class="c8y-realtime btn btn-default btn-sm"
      [attr.aria-label]="realtimeIconTitle"
      [tooltip]="realtimeIconTitle"
      placement="bottom"
      type="button"
      [container]="'body'"
      (click)="toggleRealtimeState()"
    >
      <span
        class="c8y-pulse m-0"
        [ngClass]="{
          active: isRealtimeToggleOn,
          inactive: !isRealtimeToggleOn
        }"
      ></span>
    </button>
  </div>
</ng-template>

<c8y-help
  src="/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms"
></c8y-help>

<div class="card content-fullpage split-view--5-7 grid__row--1">
  <c8y-alarms-list
    class="d-contents"
    [isInitialLoading]="isLoading$ | async"
    [alarms]="alarms$ | async"
    [typeFilters]="typeFilters"
    (onScrollingStateChange)="changeInterval(!$event)"
    (onSelectedAlarm)="changeInterval(false)"
    [splitView]="true"
    [hasPermissions]="!isDisabled"
  >
    <ng-container *ngIf="isIntervalRefresh; else realtimeRefresh">
      <c8y-alarms-interval-refresh
        [alarmsListLoading$]="isLoading$"
        [isIntervalToggleEnabled]="shouldShowIntervalToggle$ | async"
        (onCountdownEnded)="refresh()"
        [isDisabled]="isDisabled"
      ></c8y-alarms-interval-refresh>
    </ng-container>
  </c8y-alarms-list>

  <router-outlet class="d-contents"></router-outlet>
</div>