<div class="c8y-list--group" *ngIf="operation">
  <a class="c8y-list__item">
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon">
        <i
          [c8yIcon]="statusIcons[operation.status]"
          [ngClass]="statusClasses[operation.status]"
          [tooltip]="operation.status?.toString() | translate"
          placement="right"
          container="body"
        ></i>
      </div>
      <div class="c8y-list__item__body p-r-16">
        <div class="content-flex-40">
          <div class="col-8">
            <button
              class="btn-clean text-truncate"
              (click)="openDetails()"
              title="{{ operation.description | translate }}"
            >
              {{ operation.description | translate }}
            </button>
          </div>
          <div class="col-4 text-muted">
            <small class="icon-flex">
              <i c8yIcon="calendar" class="m-r-4"></i>
              <span>{{ operation.creationTime | c8yDate }}</span>
            </small>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>