<div *ngIf="!taskDetails">
    <ng-template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]"
                 [ngForTemplate]="noTaskDetailsTemplateComponent">
        {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.NONE' | translate }}
    </ng-template>
    <div *ngIf="!noTaskDetailsTemplateComponent">
        {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.NONE' | translate }}
    </div>
</div>
<div *ngIf="taskDetails" class="adf-task-details">

    <div *ngIf="showHeader" class="adf-task-details-header">
        <h2 class="activiti-task-details__header">
            <span>{{taskDetails.name || 'No name'}}</span>
        </h2>
    </div>

    <div class="adf-task-details-core"
        fxLayout="column"
        fxLayoutGap="8px"
        fxLayout.lt-lg="column">

        <div class="adf-task-details-core-form">
            <div *ngIf="isAssigned()">
                <adf-form *ngIf="hasFormKey()" #activitiForm
                          [showDebugButton]="debugMode"
                          [taskId]="taskDetails.id"
                          [showTitle]="showFormTitle"
                          [showRefreshButton]="showFormRefreshButton"
                          [showCompleteButton]="showFormCompleteButton"
                          [disableCompleteButton]="!isCompleteButtonVisible()"
                          [showSaveButton]="isSaveButtonVisible()"
                          [readOnly]="readOnlyForm"
                          [fieldValidators]="fieldValidators"
                          (formSaved)='onFormSaved($event)'
                          (formCompleted)='onFormCompleted($event)'
                          (formContentClicked)='onFormContentClick($event)'
                          (formLoaded)='onFormLoaded($event)'
                          (error)='onFormError($event)'
                          (executeOutcome)='onFormExecuteOutcome($event)'>
                    <div empty-form><h3 class="adf-task-title">Please select a Task</h3></div>
                </adf-form>
            </div>
            <div *ngIf="!isAssigned()">
                {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.CLAIM' | translate }}
            </div>
            <button mat-raised-button class="activiti-task-details__action-button"
                    *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
                {{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}
            </button>
        </div>
        <div class="adf-task-details-core-sidebar">
            <adf-info-drawer *ngIf="showHeaderContent" title="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE' | translate }}" class="adf-task-details-core-sidebar-drawer">
                <adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE' | translate }}">
                    <div class="assignment-container" *ngIf="showAssignee">
                        <adf-people-search
                            (searchPeople)="searchUser($event)"
                            (success)="assignTaskToUser($event)"
                            (closeSearch)="onCloseSearch()"
                            [results]="peopleSearch$">
                            <ng-container people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_ASSIGNEE' | translate }}
                            </ng-container>
                            <ng-container people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_ASSIGNEE' | translate }}
                            </ng-container>
                        </adf-people-search>
                    </div>
                    <adf-task-header
                        [class]="getTaskHeaderViewClass()"
                        [taskDetails]="taskDetails"
                        [formName]="taskFormName"
                        (claim)="onClaimAction($event)"
                        (unclaim)="onClaimAction($event)">
                    </adf-task-header>
                    <adf-people *ngIf="showInvolvePeople" #people
                                [people]="taskPeople"
                                [readOnly]="readOnlyForm"
                                [taskId]="taskDetails.id">
                    </adf-people>
                </adf-info-drawer-tab>

                <adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE' | translate }}">
                    <mat-card *ngIf="showComments">
                        <mat-card-content>
                            <adf-comments #activiticomments
                                          [readOnly]="isReadOnlyComment()"
                                          [taskId]="taskDetails.id">
                            </adf-comments>
                        </mat-card-content>
                    </mat-card>
                </adf-info-drawer-tab>

            </adf-info-drawer>

            <div *ngIf="showHeaderContent" class="adf-task-details-core-sidebar-checklist">
                <div *ngIf="showChecklist">
                    <adf-checklist #activitichecklist
                                   [readOnly]="readOnlyForm"
                                   [taskId]="taskDetails.id"
                                   [assignee]="taskDetails?.assignee?.id"
                                   (checklistTaskCreated)="onChecklistTaskCreated($event)"
                                   (checklistTaskDeleted)="onChecklistTaskDeleted($event)">
                    </adf-checklist>
                </div>
            </div>
        </div>
    </div>

    <ng-template #errorDialog>
        <h3 matDialogTitle>{{'ADF_TASK_LIST.DETAILS.ERROR.TITLE'|translate}}</h3>
        <mat-dialog-content>
            <p>{{'ADF_TASK_LIST.DETAILS.ERROR.DESCRIPTION'|translate}}</p>
        </mat-dialog-content>
        <mat-dialog-actions>
            <button mat-button type="button" (click)="closeErrorDialog()">{{'ADF_TASK_LIST.DETAILS.ERROR.CLOSE'|translate}}
            </button>
        </mat-dialog-actions>
    </ng-template>

</div>
