<div class="c8y-list--group" *ngIf="operation">
  <a class="c8y-list__item">
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon">
        <button
          class="btn-clean"
          type="button"
          [attr.aria-label]="operation.status?.toString() | translate"
          [tooltip]="operation.status?.toString() | translate"
          [delay]="500"
          placement="right"
          container="body"
        >
          <i
            [c8yIcon]="statusIcons[operation.status]"
            [ngClass]="statusClasses[operation.status]"
          ></i>
        </button>
      </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"
              type="button"
              title="{{ operation.description | translate }}"
              (click)="openDetails()"
              c8yProductExperience
              inherit
              [actionData]="{ action: ACTIONS.OPEN_OPERATION_DETAILS }"
            >
              {{ 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>