<c8y-title>{{ TITLE | translate }}</c8y-title>
<c8y-help
  src="/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms"
></c8y-help>

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

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form min-width-fit"
>
  <c8y-alarms-date-filter (dateFilterChange)="applyFormFilters($event)"></c8y-alarms-date-filter>
</c8y-action-bar-item>

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

<c8y-sv [resizableConfig]="{ trackId: 'alarms-split-view', collapsible: false }">
  <c8y-alarms-list
    [isInitialLoading]="isLoading$ | async"
    [alarms]="alarms$ | async"
    [typeFilters]="typeFilters"
    (onScrollingStateChange)="changeInterval(!$event); isListScrolled.set($event)"
    (onSelectedAlarm)="changeInterval(false)"
    [hasPermissions]="!isDisabled"
  >
    @if (isIntervalRefresh) {
      <c8y-alarms-interval-refresh
        [alarmsListLoading$]="isLoading$"
        [isIntervalToggleEnabled]="shouldShowIntervalToggle$ | async"
        (onCountdownEnded)="refresh()"
        [isDisabled]="isDisabled"
      ></c8y-alarms-interval-refresh>
    } @else {
      <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()"
        >
          @if (isRealtimeActive | async) {
            <span class="tag tag--info m-r-8">
              {{ '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"
          data-cy="c8y-alarms--realtime-button"
          [container]="'body'"
          (click)="toggleRealtimeState()"
        >
          <span
            class="c8y-pulse m-0"
            [ngClass]="{
              active: isRealtimeToggleOn,
              inactive: !isRealtimeToggleOn
            }"
          ></span>
        </button>
      </div>
    }
  </c8y-alarms-list>

  <c8y-sv-details
    emptyStateIcon="alarm"
    [emptyStateTitle]="'No alarm selected' | translate"
    [emptyStateSubtitle]="'Select an alarm from the list to view its details.' | translate"
    (backClick)="handleBackClick()"
  >
    <router-outlet></router-outlet>
  </c8y-sv-details>
</c8y-sv>