<div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
<div *ngIf="processInstanceDetails">
    <h2 class="mdl-card__title-text">{{ getProcessNameOrDescription('medium') }}</h2>
    <activiti-process-instance-header
        [processInstance]="processInstanceDetails"
        (showProcessDiagram)="onShowProcessDiagram($event)">
    </activiti-process-instance-header>
    <div class="mdl-card mdl-shadow--2dp activiti-process-container">
        <div class="mdl-cell mdl-cell--12-col">
            <activiti-process-instance-tasks
                [processInstanceDetails]="processInstanceDetails"
                (taskClick)="onTaskClicked($event)">
            </activiti-process-instance-tasks>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="isRunning()">
        <button type="button" (click)="cancelProcess()" class="mdl-button">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
    </div>
</div>
