<div *ngIf="processInstance">
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-started-by">
            <span class="activiti-label">{{ 'DETAILS.LABELS.STARTED_BY' | translate }}</span>:
            <span class="activiti-process-header__value">{{getStartedByFullName()}}</span>
        </div>
        <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-started">
            <span class="activiti-label">{{ 'DETAILS.LABELS.STARTED' | translate }}</span>:
            <span class="activiti-process-header__value">{{getFormatDate(processInstance.started, 'medium')}}</span>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <activiti-process-instance-comments [processInstanceId]="processInstance?.id"></activiti-process-instance-comments>
        </div>
        <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="!isRunning()">
            <span class="activiti-label">{{ 'DETAILS.LABELS.ENDED' | translate }}</span>:
            <span class="activiti-process-header__value">{{getFormatDate(processInstance.ended, 'medium')}}</span>
        </div>
        <button data-automation-id="header-show-diagram" id="show-diagram-button" md-raised-button *ngIf="isShowDiagram()" [attr.disabled]="isDiagramDisabled()" (click)="showDiagramEvent()" >
            {{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}
        </button>
    </div>
</div>
