@if (showRefreshButton) {
  <div  class="process-tasks-refresh" >
    <button mat-icon-button (click)="onRefreshClicked()">
      <mat-icon class="md-24" [attr.aria-label]="'ADF_PROCESS_LIST.DETAILS.LABELS.REFRESH' | translate">refresh</mat-icon>
    </button>
  </div>
}

<!-- ACTIVE FORM -->

<mat-chip-listbox>
  <span class="adf-chip-label">{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASKS_ACTIVE'|translate }}</span>
  <mat-chip-option class="adf-process-badge" color="accent" selected="true">{{activeTasks?.length}}</mat-chip-option>
</mat-chip-listbox>

@if (activeTasks?.length > 0) {
  <div class="menu-container" data-automation-id="active-tasks">
    <mat-list>
      @for (task of activeTasks; track task) {
        <mat-list-item class="process-tasks__task-item" (click)="clickTask(task)">
          <mat-icon matListItemLine>assignment</mat-icon>
          <h3 matLine>{{task.name || 'Nameless task'}}</h3>
          <span matLine>
            {{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user: getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
          </span>
        </mat-list-item>
      }
    </mat-list>
  </div>
}

<!-- START FORM -->

@if (activeTasks?.length === 0) {
  <div data-automation-id="active-tasks-none" class="no-results">
    {{ 'ADF_PROCESS_LIST.DETAILS.TASKS.NO_ACTIVE' | translate }}
  </div>
}

@if (hasStartFormDefined()) {
  <div>
    <span class="adf-activiti-label">{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.START_FORM'|translate }}</span>
    <!--IF START TASK COMPLETED -->
    <div class="menu-container" data-automation-id="start-form">
      <mat-list>
        <mat-list-item class="process-tasks__task-item" (click)="clickStartTask()">
          <mat-icon matListItemLine>assignment</mat-icon>
          <h3 matLine>{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.START_FORM'|translate }}</h3>
          <span matLine>
            {{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }}
          </span>
        </mat-list-item>
      </mat-list>
    </div>
  </div>
}

<!-- COMPLETED FORM -->
<mat-chip-listbox>
  <span class="adf-chip-label">{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASKS_COMPLETED'|translate }}</span>
  <mat-chip-option class="adf-process-badge" color="accent" selected="true">{{completedTasks?.length}}</mat-chip-option>
</mat-chip-listbox>

@if (completedTasks?.length > 0) {
  <div class="menu-container" data-automation-id="completed-tasks">
    <mat-list>
      @for (task of completedTasks; track task) {
        <mat-list-item class="process-tasks__task-item" (click)="clickTask(task)">
          <mat-icon matListItemLine>assignment</mat-icon>
          <h3 matLine>{{task.name || 'Nameless task'}}</h3>
          <span matLine>
            {{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
          </span>
        </mat-list-item>
      }
    </mat-list>
  </div>
}

@if (completedTasks?.length === 0) {
  <div data-automation-id="completed-tasks-none" class="no-results">
    {{ 'ADF_PROCESS_LIST.DETAILS.TASKS.NO_COMPLETED' | translate }}
  </div>
}

@if (hasStartFormDefined()) {
  <ng-template #startDialog>
    <div id="adf-start-process-dialog" class="adf-start-process-dialog">
      <h4 matDialogTitle>{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.START_FORM'|translate }}</h4>
      <div mat-dialog-content class="adf-start-process-dialog-content">
        <adf-start-form [processId]="processId"
          [showRefreshButton]="false" [readOnlyForm]="true"
          (formContentClicked)='onFormContentClick()' />
      </div>
      <div mat-dialog-actions class="adf-start-process-dialog-actions">
        <button mat-button type="button" (click)="closeStartDialog()">{{ 'ADF_PROCESS_LIST.DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
      </div>
    </div>
  </ng-template>
}