<h2 mat-dialog-title style="text-align: center">Active Processes</h2>
<div *ngIf="data.service.activeProcesses?.size; else display_empty" class="mat-typography" style="text-align: left; margin-left: 3em; overflow-y: auto; height: 70%;">
  <span *ngFor="let process of data.service.activeProcesses | keyvalue">
    <p><span style="color: #33cc33; font-weight: bold;"> {{ process.value.action }}</span>: <i>{{ process.value.name }}</i></p>
    <p><strong>Start Time:</strong> {{ process.value.startTime }}</p>
  </span>
</div>

<ng-template #display_empty>
  <div class="mat-typography" style="text-align: center; margin-top: 10em; margin-bottom: 10em; overflow-y: auto;">
    No active processes
  </div>
</ng-template>

<mat-dialog-actions align="center">
  <button mat-raised-button mat-dialog-close color="primary">
    <mat-icon>
      close
    </mat-icon>
  </button>
</mat-dialog-actions>
