<c8y-ui-empty-state
  [icon]="'c8y-energy'"
  [title]="'No recent operations found.' | translate"
  ng-if="!operations?.data || !operations?.data?.length"
  [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 | date: 'medium' }}
    <c8y-li
      #li
      (click)="li.toggleCollapsed()"
    >
      <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" />
            <ng-container
              *ngIf="bodyTemplate; else defaultBody"
              [ngTemplateOutlet]="bodyTemplate"
              [ngTemplateOutletContext]="{ $implicit: op }"
            ></ng-container>
            <ng-template #defaultBody>
              <small>{{ op.description }}</small>
            </ng-template>
          </div>
          <div
            class="m-l-auto showOnHover"
            *ngIf="op.status === 'PENDING'"
          >
            <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>
        <div
          class="legend form-block"
          translate
        >
          Details
        </div>
        <ul class="list-unstyled small">
          <li
            class="p-t-4 p-b-4 d-flex separator-bottom"
            *ngFor="let prop of operationsService.getStandardKeys(op) | keyvalue"
          >
            <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>
          <li
            class="p-t-4 p-b-4 d-flex separator-bottom"
            *ngFor="let key of operationsService.getNonStandardKeys(op, propertiesToHide)"
          >
            <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>
        <ng-container
          *ngFor="let footer of footerTemplates"
          [ngTemplateOutlet]="footer"
          [ngTemplateOutletContext]="{ $implicit: op }"
        ></ng-container>
      </c8y-li-collapse>
    </c8y-li>
  </c8y-li-timeline>
</c8y-list-group>