<div class="adf-start-form-container" *ngIf="hasForm()">
    <mat-card>
        <mat-card-header>
            <mat-card-title>
                <h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <div *ngIf="form.hasTabs()">
                <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
            </div>

            <div *ngIf="!form.hasTabs() && form.hasFields()">
                <div *ngFor="let field of form.fields">
                    <form-field [field]="field.field"></form-field>
                </div>
            </div>
        </mat-card-content>
        <mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
             <ng-content select="[form-custom-button]"></ng-content>
            <button *ngFor="let outcome of form.outcomes"
                    mat-button
                    [disabled]="!isOutcomeButtonEnabled(outcome)"
                    [class.mdl-button--colored]="!outcome.isSystem"
                    [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                    (click)="onOutcomeClicked(outcome, $event)">
                {{outcome.name}}
            </button>
        </mat-card-content>
        <mat-card-actions *ngIf="showRefreshButton">
            <button mat-button
                    (click)="onRefreshClicked()">
                <mat-icon>refresh</mat-icon>
            </button>
        </mat-card-actions>
    </mat-card>
</div>
