<div *ngIf="activityLog.tasks_count > 0 && tasksDetails" class="task-list" layoutDirection="column">
  <ng-container *ngFor="let taskDetails of tasksDetails; trackBy: taskTrackBy">
    <div *ngIf="taskDetails.visible" class="task-row task-row-xs fl-cursor-pointer"
         layoutAlign="start center" layoutAlign-xs="start start" layoutDirection="row" layoutDirection-xs="column"
         (click)="toggleTaskLog(taskDetails, $event)">
      <app-status-line [direction]="statusLineDirection"
                       [type]="taskDetails.status.type | lineType" [color]="taskDetails.status.value | lineColor">
      </app-status-line>
      <div
        [ngStyle]="{ 'padding-left': appBreakpoint !== 'xs' ? (taskDetails.task.depth * 20 + 10).toString() + 'px' : '0' }"
        [title]="taskDetails.tooltip" layoutDirection="column"
        appFlex="30" xsFlex="100" class="fl-ellipsis-text">
        <div i18n>
          <span>
            <mat-icon
              class="task-expanding-icon">{{ taskDetails.taskLogVisible ? 'arrow_drop_down' : 'arrow_right' }}</mat-icon>
          </span>
          Task {{ taskDetails.task.id }}
        </div>
        <div *ngIf="taskDetails.subtext" class="task-subtext">{{ taskDetails.subtext }}</div>
      </div>
      <div appFlex="30" xsFlex="100" class="fl-ellipsis-text">
        <app-date-displayer [date]="taskDetails.task.created_at" withTime></app-date-displayer>
      </div>
      <div layoutDirection="row" appFlex="100" class="full-width-description">
        <div appFlex="auto" class="fl-ellipsis-text task-name">
          {{ taskDetails.task.description }}
        </div>
        <div class="action-container-class" layoutAlign="end">
          <app-object-actions [objectActions]="taskDetails.actions" maxVisibleActions="2">
          </app-object-actions>
        </div>
      </div>
    </div>
    <ng-container *ngIf="taskDetails.taskLogVisible">
      <div *ngIf="!taskDetails.taskLogLoaded">
        <app-flashing-dots class="fl-block fl-margin-left fl-margin-bottom fl-margin-top"></app-flashing-dots>
      </div>
      <app-activity-log-operations [indent]="taskDetails.depth"
                                   [operations]="taskDetails.task.operations"></app-activity-log-operations>
      <div *ngIf="taskDetails.taskLogLoaded"
           id="container-{{taskDetails.task.id}}"
           class="task-log-container wrap-pre-text">
        <pre class="task-log" [innerHTML]="taskDetails.taskLog"></pre>
        <app-flashing-dots *ngIf="!taskDetails.taskFinished"
                           class="fl-block fl-margin-left fl-margin-bottom"></app-flashing-dots>
      </div>
    </ng-container>
  </ng-container>
</div>
