<c8y-sv-list
  [emptyStateIcon]="'online1'"
  [title]="LIST_TITLE | translate"
  [emptyStateTitle]="EMPTY_STATE_TITLE | translate"
  #scrollWrapper
  [loading]="isLoading()"
  [showEmptyState]="showEmptyState()"
  [docsUrl]="
    '/docs/device-management-application/monitoring-and-controlling-devices/#to-view-events'
  "
  data-cy="c8y-events-list"
>
  <c8y-sv-header-actions>
    <ng-content />
  </c8y-sv-header-actions>

  <c8y-sv-alerts>
    @if (showFilterWarning()) {
      <div
        class="alert alert-warning m-b-0"
        role="alert"
        translate
      >
        The selected event 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">
    @let navOpts = navigationOptions();
    <c8y-li-timeline
      class="pointer c8y-list--timeline__item"
      role="button"
      data-cy="c8y-events-list--timeline-item"
      *c8yFor="let event of events()!; loadMore: loadMoreMode()"
      [routerLink]="
        navOpts.allowNavigationToEventsView
          ? (event | eventRouterLink: navOpts.alwaysNavigateToAllEvents)
          : null
      "
      [queryParamsHandling]="navOpts.queryParamsHandling"
      routerLinkActive="active"
      (isActiveChange)="activeRouteChanged($event, liScrollAnchor, event)"
      (click)="onEventClick(event)"
    >
      <!-- Date column -->
      <span data-cy="c8y-events-list--event-date">
        {{ event.time | c8yDate: 'mediumDate' }}
        {{ event.time | c8yDate: 'mediumTime' }}
      </span>

      <c8y-li
        style="scroll-margin-top: 56px"
        #liScrollAnchor
      >
        <c8y-li-icon class="a-s-start">
          <i [c8yIcon]="event | eventIcon"></i>
        </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">
              <!-- Event column (text) -->
              <p
                class="text-truncate-wrap p-b-4"
                data-cy="c8y-events-list--event-text"
              >
                {{ event.text | translate }}
              </p>

              <!-- Source column -->
              <p
                class="small text-muted text-truncate"
                [title]="event.source?.name"
                data-cy="c8y-events-list--event-source"
              >
                <i [c8yIcon]="'exchange'"></i>
                {{ event.source?.name }}
              </p>
            </div>
            @if (showPreview() && (event | eventIsImage)) {
              <c8y-file-preview
                data-cy="c8y-events-list--image-preview"
                (click)="onPreviewClick($event)"
                [mo]="toBinaryMo(event)"
                [downloadFn]="getEventDownloadFn(event)"
              >
                <button
                  class="btn btn-default btn-icon btn-xs"
                  [title]="'Preview' | translate"
                  type="button"
                  customButton
                  data-cy="c8y-events-list--preview-btn"
                >
                  <i c8yIcon="search"></i>
                </button>
              </c8y-file-preview>
            }
          </div>
        </c8y-li-body>
      </c8y-li>
    </c8y-li-timeline>
  </c8y-list-group>
</c8y-sv-list>