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

<c8y-list-group>
  <c8y-li-timeline
    *c8yFor="
      let op of operations;
      pipe: filterPipe;
      realtime: realtime;
      realtimeOptions: { entityOrId: sourceId }
    "
  >
    {{ op.creationTime | c8yDate: 'medium' }}

    <c8y-li>
      <c8y-li-icon>
        <i
          [c8yIcon]="OPERATION_STATUS_OPTIONS_MAP[op.status].icon"
          [tooltip]="op.status | translate"
          container="body"
          [ngClass]="OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass"
          [delay]="500"
        ></i>
      </c8y-li-icon>

      <c8y-li-body>
        <div class="d-flex text-break-word">
          <div>
            {{ op.status | translate }}
            <br class="visible-xs visible-sm" />

            @if (bodyTemplate) {
              <ng-container
                [ngTemplateOutlet]="bodyTemplate"
                [ngTemplateOutletContext]="{ $implicit: op }"
              ></ng-container>
            } @else {
              <small>{{ op.description }}</small>
            }
          </div>

          @if (op.status === 'PENDING') {
            <div class="m-l-auto showOnHover">
              <button
                class="btn btn-dot btn-dot--danger"
                [attr.aria-label]="'Cancel operation' | translate"
                tooltip="{{ 'Cancel operation' | translate }}"
                placement="left"
                type="button"
                [delay]="500"
                (click)="$event.stopPropagation(); operationsService.cancel(op)"
              >
                <i c8yIcon="minus-circle"></i>
              </button>
            </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 operationsService.getStandardKeys(op) | 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">
                {{ prop.value | translate }}
              </label>
              <span class="m-l-auto text-break-word">
                {{ op[prop.key] | translate }}
              </span>
            </li>
          }

          @for (key of operationsService.getNonStandardKeys(op, 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">
                {{ op[key] | json }}
              </span>
            </li>
          }
        </ul>

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