@if (!events()?.data || !events()?.data?.length) {
  <c8y-ui-empty-state
    [icon]="'online'"
    [title]="'No recent events found.' | translate"
    [horizontal]="true"
  ></c8y-ui-empty-state>
}

<c8y-list-group>
  <c8y-li-timeline
    *c8yFor="
      let event of events();
      pipe: filterPipe();
      realtime: realtime;
      realtimeOptions: { entityOrId: sourceId() };
      loadMore: loadMoreMode()
    "
  >
    {{ event.creationTime | c8yDate: 'medium' }}

    <c8y-li>
      <c8y-li-icon>
        <i [c8yIcon]="'online'"></i>
      </c8y-li-icon>

      <c8y-li-body>
        <div class="d-flex text-break-word">
          <div data-cy="c8y-events-timeline--body-template">
            @if (bodyTemplate(); as tmpl) {
              <ng-container
                [ngTemplateOutlet]="tmpl"
                [ngTemplateOutletContext]="$any({ $implicit: event })"
              ></ng-container>
            } @else {
              <small>{{ event.text }}</small>
            }
          </div>
        </div>
      </c8y-li-body>

      <c8y-li-collapse #collapseEl>
        <div
          class="legend form-block"
          translate
        >
          Details
        </div>

        <ul class="list-unstyled small">
          @for (prop of eventsService.getStandardKeys(event) | keyvalue; track prop.key) {
            <li class="p-t-4 p-b-4 d-flex separator-bottom">
              <label class="small m-b-0 m-r-8 a-s-start">
                {{ $any(prop).value | translate }}
              </label>
              <span class="m-l-auto text-break-word">
                {{ $any(event)[$any(prop).key] | translate }}
              </span>
            </li>
          }

          @for (key of eventsService.getNonStandardKeys(event, propertiesToHide()); track key) {
            <li class="p-t-4 p-b-4 d-flex separator-bottom">
              <label class="small m-b-0 m-r-8 a-s-start">
                {{ key | humanize | translate }}
              </label>
              <span class="m-l-auto text-code">
                {{ event[key] | json }}
              </span>
            </li>
          }
        </ul>

        @for (footer of footerTemplates(); track footer) {
          <ng-container
            [ngTemplateOutlet]="footer"
            [ngTemplateOutletContext]="$any({ $implicit: event })"
          ></ng-container>
        }
      </c8y-li-collapse>
    </c8y-li>
  </c8y-li-timeline>
</c8y-list-group>