<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">
    <div *ngIf="showHeader">
        <h2 class="activiti-task-details__header" (click)="toggleHeaderContent()">
            <md-icon *ngIf="!showHeaderContent">expand_more</md-icon>
            <md-icon *ngIf="showHeaderContent">expand_less</md-icon>
            <span>{{taskDetails.name || 'No name'}}</span>
        </h2>
        <activiti-task-header *ngIf="showHeaderContent"
            [taskDetails]="taskDetails"
            [formName]="taskFormName"
            (claim)="onClaimTask($event)">
        </activiti-task-header>
        <div *ngIf="showHeaderContent" class="mdl-grid">
            <div *ngIf="showInvolvePeople" class="mdl-cell mdl-cell--4-col">
                <activiti-people
                    [iconImageUrl]="peopleIconImageUrl"
                    [people]="taskPeople"
                    [readOnly]="readOnlyForm"
                    [taskId]="taskDetails.id">
                </activiti-people>
            </div>
            <div *ngIf="showComments" class="mdl-cell mdl-cell--4-col">
                <activiti-comments #activiticomments
                    [readOnly]="readOnlyForm"
                    [taskId]="taskDetails.id">
                </activiti-comments>
            </div>
            <div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
                <activiti-checklist #activitichecklist
                    [readOnly]="readOnlyForm"
                    [taskId]="taskDetails.id"
                    [assignee]="taskDetails?.assignee?.id"
                    (checklistTaskCreated)="onChecklistTaskCreated($event)">
                </activiti-checklist>
            </div>
        </div>
    </div>
    <div *ngIf="isAssignedToMe()">
        <activiti-form *ngIf="hasFormKey()" #activitiForm
            [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)'>
        </activiti-form>
    </div>
    <div *ngIf="!isAssignedToMe()">
        {{ 'TASK_DETAILS.MESSAGES.CLAIM' | translate }}
    </div>
    <button md-raised-button class="activiti-task-details__action-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>
