<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    type="button"
    title="{{ 'Request diagnostic file' | translate }}"
    (click)="onDiagnosticRequest()"
  >
    <i c8yIcon="stethoscope"></i>
    <span translate>Request diagnostic file</span>
  </button>
</c8y-action-bar-item>

<div
  class="page-sticky-header hidden-xs c8y-list__item c8y-list--timeline"
  *ngIf="operationCount > 0"
>
  <div class="d-flex">
    <div class="c8y-list--timeline__item__date a-s-center">
      <label>{{ 'Date' | translate }}</label>
    </div>
    <div class="c8y-list__item__block flex-grow">
      <div class="c8y-list__item__icon">
        <i class="p-l-24"></i>
      </div>
      <div class="c8y-list__item__body">
        <div class="content-flex-40">
          <div class="col-4">{{ 'Event' | translate }}</div>
          <div class="col-5 m-l-8">{{ 'File' | translate }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

<c8y-list-group>
  <ng-template
    c8yFor
    let-operation
    [c8yForOf]="operations$"
    [c8yForPipe]="operationsPipe"
    [c8yForRealtime]="operationRealtime"
    [c8yForRealtimeOptions]="realtimeOptions"
    (c8yForCount)="operationCount = $event"
  >
    <c8y-li-timeline>
      {{ operation.creationTime | c8yDate }}
      <c8y-li>
        <c8y-li-icon>
          <i
            [c8yIcon]="statusIcons[operation.status]"
            [ngClass]="statusClasses[operation.status]"
            [tooltip]="operation.status?.toString() | translate"
          ></i>
        </c8y-li-icon>
        <c8y-li-body class="content-flex-40">
          <div class="col-4">
            <p class="text-truncate-wrap" title="{{ operation.description | translate }}">
              {{ operation.description | translate }}
            </p>
          </div>
          <div class="col-5" *ngIf="operation.c8y_DiagnosticReport?.file">
            <div class="text-truncate-wrap m-t-xs-8">
              <span class="text-label-small visible-xs" translate>File</span>
              <span title="{{ operation.c8y_DiagnosticReport.file }}">
                <c8y-file-download
                  url="{{ operation.c8y_DiagnosticReport.file }}"
                ></c8y-file-download>
              </span>
            </div>
          </div>
        </c8y-li-body>
        <c8y-li-action
          (click)="onCancel(operation)"
          *ngIf="operation.status === 'PENDING'"
          icon="times"
          label="{{ 'Cancel' | translate }}"
        ></c8y-li-action>
        <c8y-li-action
          (click)="onDelete(operation)"
          *ngIf="operation.status === 'SUCCESSFUL'"
          icon="delete"
          label="{{ 'Delete' | translate }}"
        ></c8y-li-action>
      </c8y-li>
    </c8y-li-timeline>
  </ng-template>
</c8y-list-group>

<!-- EMPTY STATE -->

<c8y-ui-empty-state
  *ngIf="operationCount === 0"
  [icon]="'stethoscope'"
  [title]="'No diagnostic files available.' | translate"
></c8y-ui-empty-state>