@if (!hasForm()) {
  <div>
    <ng-content select="[empty-form]" />
  </div>
}

@if (hasForm()) {
  <div class="adf-form-container">
    <mat-card appearance="outlined" class="adf-form-card">
      <mat-card-header>
        <mat-card-title>
          <h4>
            @if (showValidationIcon) {
              <div class="adf-form-validation-button">
                @if (form.isValid) {
                  <i id="adf-valid-form-icon" class="material-icons"
                  >check_circle</i>
                } @else {
                  <i id="adf-invalid-form-icon" class="material-icons adf-invalid-color">error</i>
                }
              </div>
            }
            @if (showRefreshButton) {
              <div class="adf-form-reload-button">
                <button mat-icon-button (click)="onRefreshClicked()">
                  <mat-icon>refresh</mat-icon>
                </button>
              </div>
            }
            @if (isTitleEnabled()) {
              <span class="adf-form-title" [title]="form.taskName">
                {{form.taskName}}
                @if (!form.taskName) {
                  {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
                }
              </span>
            }
          </h4>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content class="adf-form-card-content">
        <adf-form-renderer [formDefinition]="form" />
      </mat-card-content>
      @if (form.hasOutcomes()) {
        <mat-card-actions class="adf-form-mat-card-actions" align="end">
          <ng-content select="adf-form-custom-outcomes" />
          @for (outcome of form.outcomes; track outcome) {
            <button [id]="'adf-form-'+ outcome.name  | formatSpace"
              [color]="getColorForOutcome(outcome.name)" mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
              [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
              (click)="onOutcomeClicked(outcome)">
              {{outcome.name | translate | uppercase }}
            </button>
          }
        </mat-card-actions>
      }
    </mat-card>
  </div>
}