@if (hasForm()) {
  <div class="adf-start-form-container">
    <mat-card class="adf-start-form-card">
      <mat-card-header class="adf-start-form-header">
        <mat-card-title>
          @if (isTitleEnabled()) {
            <h2 class="mdl-card__title-text">{{form.taskName}}</h2>
          }
        </mat-card-title>
      </mat-card-header>
      <mat-card-content class="adf-start-form-content">
        <adf-form-renderer [formDefinition]="form" />
      </mat-card-content>
      @if (showOutcomeButtons && form.hasOutcomes()) {
        <mat-card-content class="adf-start-form-actions"
          #outcomesContainer>
          <ng-content select="[adf-form-custom-button], [form-custom-button]" />
          @for (outcome of form.outcomes; track outcome) {
            <button
              mat-button
              class="adf-start-form-actions-button"
              [attr.data-automation-id]="'adf-form-' + outcome.name  | lowercase"
              [disabled]="!isOutcomeButtonEnabled(outcome)"
              [class.mdl-button--colored]="!outcome.isSystem"
              [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
              (click)="onOutcomeClicked(outcome)">
              {{ outcome.name | uppercase | translate | uppercase }}
            </button>
          }
        </mat-card-content>
      }
      @if (showRefreshButton) {
        <mat-card-actions>
          <button mat-button
            (click)="onRefreshClicked()">
            <mat-icon>refresh</mat-icon>
          </button>
        </mat-card-actions>
      }
    </mat-card>
  </div>
}