<div *ngIf="!taskDetails">
    <template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]"
              [ngForTemplate]="noTaskDetailsTemplateComponent">
        {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
    </template>
    <div *ngIf="!noTaskDetailsTemplateComponent">
        {{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
    </div>
</div>
<div *ngIf="taskDetails">
    <h2 class="mdl-card__title-text">{{taskDetails.name}}</h2>
    <activiti-task-header [taskDetails]="taskDetails" [formName]="taskFormName"></activiti-task-header>
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col">
            <activiti-people [people]="taskPeople" [readOnly]="readOnlyForm"
                             [taskId]="taskDetails.id"></activiti-people>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <activiti-comments [readOnly]="readOnlyForm" [taskId]="taskDetails.id"
                               #activiticomments></activiti-comments>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
            <activiti-checklist [readOnly]="readOnlyForm" [taskId]="taskDetails.id"
                                #activitichecklist></activiti-checklist>
        </div>
    </div>
    <activiti-form *ngIf="hasFormKey()" [taskId]="taskDetails.id"
                   [showTitle]="showFormTitle"
                   [showRefreshButton]="showFormRefreshButton"
                   [showCompleteButton]="showFormCompleteButton"
                   [showSaveButton]="showFormSaveButton"
                   [readOnly]="readOnlyForm"
                   (formSaved)='onFormSaved($event)'
                   (formCompleted)='onFormCompleted($event)'
                   (formLoaded)='onFormLoaded($event)'
                   (onError)='onFormError($event)'
                   (executeOutcome)='onFormExecuteOutcome($event)'
                   #activitiForm>
    </activiti-form>
    <button type="button" class="mdl-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
        {{ 'TASK_DETAILS.BUTTON.COMPLETE' | translate }}
    </button>
    <dialog class="mdl-dialog error-dialog" #errorDialog>
        <div class="mdl-dialog__content">
            <h3>{{'TASK_DETAILS.ERROR.TITLE'|translate}}</h3>
            <p>{{'TASK_DETAILS.ERROR.DESCRIPTION'|translate}}</p>
            <button type="button" class="mdl-button" (click)="closeErrorDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
        </div>
    </dialog>
</div>
