<div *ngIf="object">
  <p class="fl-detail" i18n>Operation type: {{object.operation_type}}</p>
  <p class="fl-detail" i18n>Created at:
    <app-date-displayer [date]="object.created_at" withTime></app-date-displayer>
  </p>
  <ng-container *ngIf="authSvc.feature('ui.utilities.operations.extra-info')">
    <p class="fl-detail" i18n>
      <ng-container *ngIf="object.extra_info && object.extra_info.primary_object_type; else noObjectType">
        {{object.extra_info.primary_object_type}} ID:
      </ng-container>
      <ng-template #noObjectType>Primary object ID:</ng-template>
      <ng-container *ngIf="object.extra_info && object.extra_info.primary_object_url; else noUrl">
        <a [routerLink]="config.getPanelUrl(object.extra_info.primary_object_url)" class="active-link">
          {{object.primary_object_id | nullValue}}
        </a>
      </ng-container>
      <ng-template #noUrl>{{object.primary_object_id | nullValue}}</ng-template>
    </p>
    <p *ngFor="let extra_info of object.extra_info | keyvalue" class="fl-detail">
      <span *ngIf="['primary_object_url', 'primary_object_type'].indexOf(extra_info.key) < 0">
        {{extra_info.key}}: {{extra_info.value | nullValue}}
      </span>
    </p>
  </ng-container>
  <p *ngIf="authSvc.feature('ui.utilities.operations.user')" class="fl-detail" i18n>
    Created by:
    <a class="active-link" *ngIf="object.initiating_user"
       [routerLink]="[config.getPanelUrl('clients-users/users'), object.initiating_user.id]">
      {{object.initiating_user.full_name || object.initiating_user.email}}
    </a>
    <span *ngIf="!object.initiating_user">n/a</span>
  </p>
  <p class="fl-detail" i18n>Completed: {{object.completed | yesNo}}</p>

  <h2 class="fl-heading-md" i18n>Progress</h2>
  <p class="fl-detail" i18n>Steps completed: {{object.progress.completed_steps}}/{{object.progress.total_steps}}</p>
  <div layoutDirection="row" *ngFor="let step of object.progress.steps_details">
    <span class="fl-detail">
      <mat-icon *ngIf="step.status === 'in progress'"
                [title]="capitalizedStatus(step.status)"
                class="vertical-align-middle fl-margin-right-small">
        restore
      </mat-icon>
      <mat-icon *ngIf="step.status === 'succeeded'"
                [title]="capitalizedStatus(step.status)"
                class="vertical-align-middle fl-margin-right-small active-link">
        done_all
      </mat-icon>
      <mat-icon *ngIf="step.status === 'failed' || step.status === 'aborted'"
                [title]="capitalizedStatus(step.status)"
                class="vertical-align-middle fl-margin-right-small fl-red-color">
        clear
      </mat-icon>
      <span class="vertical-align-middle">
        {{step.display}}
        <div *ngIf="step.error_message"
             [class]="object.status === 'failed'? 'fl-red-color':'fl-orange-color'">
          {{step.error_message}}
        </div>
      </span>
    </span>
  </div>
</div>
