@if (taskDetails) {
  <mat-card appearance="outlined" class="adf-card-container">
    <mat-card-content>
      <adf-card-view [properties]="properties" [editable]="!readOnly && !isCompleted()" [displayClearAction]="displayDateClearAction"/>
    </mat-card-content>
    @if (showClaimRelease) {
      <mat-card-actions class="adf-controls">
        @if (isTaskClaimedByCandidateMember()) {
          <button
            mat-button
            data-automation-id="header-unclaim-button"
            id="unclaim-task"
            class="adf-claim-controls"
            adf-unclaim-task
            [taskId]="taskDetails.id"
            (success)="onUnclaimTask($event)">
            {{ 'ADF_TASK_LIST.DETAILS.BUTTON.UNCLAIM' | translate }}
          </button>
        }
        @if (isTaskClaimable()) {
          <button
            mat-button
            data-automation-id="header-claim-button"
            id="claim-task"
            class="adf-claim-controls"
            adf-claim-task
            [taskId]="taskDetails.id"
            (success)="onClaimTask($event)">
            {{ 'ADF_TASK_LIST.DETAILS.BUTTON.CLAIM' | translate }}
          </button>
        }
      </mat-card-actions>
    }
  </mat-card>
}