@if (!taskDetails) {
  <div data-automation-id="adf-tasks-details--empty">
    @if (noTaskDetailsTemplateComponent) {
      @for ( of [data]; track ) {
        <ng-template [ngForOf]="[data]"
          [ngForTemplate]="noTaskDetailsTemplateComponent">
          {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.NONE' | translate }}
        </ng-template>
      }
    }
    @if (!noTaskDetailsTemplateComponent) {
      <div>
        {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.NONE' | translate }}
      </div>
    }
  </div>
}
@if (taskDetails) {
  <div class="adf-task-details">
    @if (showHeader) {
      <div class="adf-task-details-header">
        <h2 class="adf-activiti-task-details__header">
          <span>{{taskDetails.name || 'No name'}}</span>
        </h2>
      </div>
    }
    <div class="adf-task-details-core">
      <div class="adf-task-details-core-form">
        @if (isAssigned()) {
          <div>
            <adf-task-form #taskForm
              [taskId]="taskDetails.id"
              [showFormTitle]="showFormTitle"
              [showFormRefreshButton]="showFormRefreshButton"
              [showCancelButton]="true"
              [fieldValidators]="fieldValidators"
              (formSaved)='onFormSaved($event)'
              (formCompleted)='onFormCompleted($event)'
              (formContentClicked)='onFormContentClick($event)'
              (formLoaded)='onFormLoaded($event)'
              (completed)="onComplete()"
              (showAttachForm)="onShowAttachForm()"
              (executeOutcome)='onFormExecuteOutcome($event)'
              (taskClaimed)="onClaimAction($event)"
              (taskUnclaimed)="onUnclaimAction($event)"
              (error)="onFormError($event)" />
            @if (showAttachForm) {
              <adf-attach-form
                [taskId]="taskDetails.id"
                [formKey]="taskDetails.formKey"
                (cancelAttachForm)="onCancelAttachForm()"
                (success)="onCompleteAttachForm()" />
            }
          </div>
        }
        @if (!isAssigned()) {
          <div id="claim-message-id">
            {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.CLAIM' | translate }}
          </div>
        }
      </div>
      <div class="adf-task-details-core-sidebar">
        @if (showHeaderContent) {
          <adf-info-drawer title="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE" id="adf-task-details-core-sidebar-drawer" class="adf-task-details-core-sidebar-drawer">
            <adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE">
              @if (showAssignee) {
                <div class="adf-assignment-container">
                  <adf-people-search
                    [headerTitle]="'ADF_TASK_LIST.DETAILS.LABELS.ADD_ASSIGNEE'"
                    [actionLabel]="'ADF_TASK_LIST.PEOPLE.ADD_ASSIGNEE'"
                    (searchPeople)="searchUser($event)"
                    (success)="assignTaskToUser($event)"
                    (closeSearch)="onCloseSearch()"
                    [results]="peopleSearch" />
                </div>
              }
              <adf-task-header
                [class]="getTaskHeaderViewClass()"
                [taskDetails]="taskDetails"
                [formName]="taskFormName"
                (claim)="onClaimAction($event)"
                (unclaim)="onUnclaimAction($event)" />
              @if (showInvolvePeople) {
                <adf-people
                  [people]="taskPeople"
                  [readOnly]="internalReadOnlyForm"
                  [taskId]="taskDetails.id" />
              }
            </adf-info-drawer-tab>
            <adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE">
              @if (showComments) {
                <mat-card appearance="outlined">
                  <mat-card-content>
                    <adf-task-comments
                      [readOnly]="isReadOnlyComment()"
                      [taskId]="taskDetails.id"
                      />
                  </mat-card-content>
                </mat-card>
              }
            </adf-info-drawer-tab>
          </adf-info-drawer>
        }
        @if (showHeaderContent) {
          <div class="adf-task-details-core-sidebar-checklist">
            @if (showChecklist) {
              <div>
                <adf-checklist
                  [readOnly]="internalReadOnlyForm"
                  [taskId]="taskDetails.id"
                  [assignee]="taskDetails.assignee?.id"
                  (checklistTaskCreated)="onChecklistTaskCreated($event)"
                  (checklistTaskDeleted)="onChecklistTaskDeleted($event)" />
              </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>
}