<div class="card" *ngIf="!operations?.data || !operations?.data?.length">
  <div class="c8y-empty-state text-left">
    <h1 class="c8y-icon c8y-icon-energy c8y-icon-duocolor m-l-8"></h1>
    <p>{{ 'No recent operations found.' | translate }}</p>
  </div>
</div>

<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"
          [ngClass]="OPERATION_STATUS_OPTIONS_MAP[op.status].styleClass"
          [tooltip]="op.status | translate"
        ></i>
      </c8y-li-icon>
      <c8y-li-body>
        <div class="flex-row">
          <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="flex-item-right showOnHover" *ngIf="op.status === 'PENDING'">
            <button
              class="btn btn-clean"
              title="{{ 'Cancel operation' | translate }}"
              (click)="$event.stopPropagation(); operationsService.cancel(op)"
            >
              <i c8yIcon="minus-circle" class="text-danger"></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 flex-row separator-bottom"
            *ngFor="let prop of operationsService.getStandardKeys(op) | keyvalue"
          >
            <label class="small m-b-0 m-r-8 flex-item-v-start">
              {{ prop.value | translate }}
            </label>
            <span class="flex-item-right">
              {{ op[prop.key] | translate }}
            </span>
          </li>
          <li
            class="p-t-4 p-b-4 flex-row separator-bottom"
            *ngFor="let key of operationsService.getNonStandardKeys(op, propertiesToHide)"
          >
            <label class="small m-b-0 m-r-8 flex-item-v-start">
              {{ key | humanize | translate }}
            </label>
            <span class="flex-item-right 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>