@if (showTitle) {
  <h3 class="adf-task-title">{{ taskDetails?.name }}</h3>
}

<div class="adf-task-header-container">
  @if (isTaskValid()) {
    <mat-card appearance="outlined" class="adf-card-container">
      <mat-card-content>
        @if (!isLoading) {
          <adf-card-view
            [displayNoneOption]="false"
            [properties]="properties"
            [editable]="isTaskEditable()"
            [displayClearAction]="displayDateClearAction" />
        } @else {
          <div class="adf-task-header-loading">
            <mat-spinner />
          </div>
        }
      </mat-card-content>
    </mat-card>
  }
</div>