<c8y-sv-list
  [emptyStateIcon]="'c8y-alert-idle'"
  [title]="'Alarms list' | translate"
  [emptyStateTitle]="'No alarms to display.' | translate"
  [loading]="isInitialLoading || isEmptyListLoading"
  [showEmptyState]="isEmptyListLoading && !isInitialLoading && hasPermissions"
  [docsUrl]="
    '/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'
  "
  data-cy="c8y-alarms-list"
  #scrollWrapper
>
  <c8y-sv-header-actions>
    <ng-content></ng-content>
  </c8y-sv-header-actions>

  <c8y-sv-alerts>
    @if (
      !isEmptyListLoading &&
      (activeChildParam$ | async) &&
      (activeAlarm$ | async)?.id !== (activeChildParam$ | async)
    ) {
      <div
        class="alert alert-warning m-b-0"
        role="alert"
        translate
      >
        The selected alarm is not currently in the list, change your filter.
      </div>
    }
  </c8y-sv-alerts>

  <c8y-list-group class="c8y-list--timeline d-block p-r-16 p-t-16">
    <c8y-li-timeline
      class="pointer c8y-list--timeline__item"
      role="button"
      data-cy="c8y-alarms-list--timeline-repeat"
      *c8yFor="let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode"
      [routerLink]="navigationOptions.allowNavigationToAlarmsView ? alarm.link : null"
      routerLinkActive="active"
      [queryParamsHandling]="navigationOptions.queryParamsHandling"
      (isActiveChange)="activeRouteChanged($event, liScrollAnchor, alarm)"
      (click)="onAlarmOpen(alarm)"
      [queryParams]="
        navigationOptions.includeClearedQueryParams
          ? { showCleared: alarm.status === 'CLEARED' }
          : {}
      "
    >
      <span
        [attr.aria-label]="alarmLastOccurrenceLabel | translate"
        [tooltip]="alarmLastOccurrenceLabel | translate"
        placement="right"
        container="body"
        data-cy="c8y-alarms-list--last-occurrence-date"
        [delay]="500"
      >
        {{ alarm.time | c8yDate: 'mediumDate' }}
        {{ alarm.time | c8yDate: 'mediumTime' }}
      </span>
      <c8y-li
        style="scroll-margin-top: 56px"
        #liScrollAnchor
      >
        <c8y-li-icon class="a-s-start">
          <div class="alarm-icons">
            <c8y-alarms-icon
              [typeFilters]="typeFilters"
              [alarm]="alarm"
            ></c8y-alarms-icon>
          </div>
          @if (alarm.firstOccurrenceTime) {
            <button
              class="btn-clean text-center"
              [attr.aria-label]="
                alarmBadgeTooltip
                  | translate
                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }
              "
              [tooltip]="
                alarmBadgeTooltip
                  | translate
                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }
              "
              placement="right"
              container="body"
              type="button"
              data-cy="c8y-alarms-list--badge"
              (click)="$event.stopPropagation()"
              [delay]="500"
            >
              @if (alarm.count > 1) {
                <span class="badge badge-info">
                  {{ alarm.count }}
                </span>
              }
            </button>
          }
        </c8y-li-icon>
        <c8y-li-body class="a-s-stretch">
          <div class="d-flex a-i-start fit-h">
            <div class="min-width-0 flex-grow">
              <p
                class="text-truncate-wrap p-b-4"
                data-cy="c8y-alarms-list--alarm-text"
              >
                {{ alarm.text | translate }}
              </p>
              <div class="d-flex">
                <p
                  class="small text-muted text-truncate flex-grow"
                  [title]="alarm.source.name"
                  data-cy="c8y-alarms-list--alarm-source-name"
                >
                  <i [c8yIcon]="'exchange'"></i>
                  {{ alarm.source.name }}
                </p>
                <div class="d-flex">
                  @for (item of alarm | alarmListIndicator | async; track $index) {
                    <div [title]="item.title | translate">
                      <i
                        [class]="item.class"
                        [c8yIcon]="item.icon"
                      ></i>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        </c8y-li-body>
      </c8y-li>
    </c8y-li-timeline>
  </c8y-list-group>
</c8y-sv-list>

<ng-template #alertsA>
  <c8y-dynamic-component-alerts [alerts]="alertAggregator"></c8y-dynamic-component-alerts>
</ng-template>