<div *ngIf="operationsDisplay.length > 0" layoutDirection="column">
  <ng-container *ngFor="let opDisplay of operationsDisplay">
    <div class="operation-row fl-cursor-pointer" layoutAlign="start center" layoutAlign-xs="start start"
         layoutDirection="row" layoutDirection-xs="column">
      <app-status-line [direction]="statusLineDirection"
                       [type]="opDisplay.status.type | lineType" [color]="opDisplay.status.value | lineColor">
      </app-status-line>
      <div appFlex="59" xsFlex="100" class="fl-ellipsis-text" [ngClass]="{'indent': indent}"
           (click)="opDisplay.expanded = !opDisplay.expanded" i18n>
        <mat-icon class="operation-expand-icon">{{opDisplay.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>
        Operation {{opDisplay.operation.id}}
      </div>
      <div appFlex="auto" class="fl-ellipsis-text operation-type" (click)="opDisplay.expanded = !opDisplay.expanded">
        {{opDisplay.operation.operation_type}}
      </div>
      <div class="operation-actions" layoutAlign="end">
        <app-object-actions [objectActions]="opDisplay.actions" maxVisibleActions="2">
        </app-object-actions>
      </div>
    </div>
    <app-object-details [ngClass]="{'indent': indent}" *ngIf="opDisplay.expanded"
                        [objectController]="opDisplay.objectController">
    </app-object-details>
  </ng-container>
</div>
