<div *ngIf="!hasForm()">
    <ng-content select="[empty-form]">
    </ng-content>
</div>
<div *ngIf="hasForm()" class="{{form.className}} adf-form-container">
    <mat-card>
        <mat-card-header>
            <mat-card-title>
                <h4 *ngIf="isTitleEnabled()">
                    <div *ngIf="showRefreshButton" class="adf-form-reload-button">
                        <button mat-icon-button (click)="onRefreshClicked()">
                            <mat-icon>refresh</mat-icon>
                        </button>
                    </div>
                    <span class="adf-form-title">{{form.taskName}}</span>

                </h4>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <div *ngIf="form.hasTabs()">
                <tabs-widget [tabs]="form.tabs" (formTabChanged)="onFieldChanged($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-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
            <!--[class.mdl-button--colored]="!outcome.isSystem"-->
            <button [id]="'adf-form-'+ outcome.name  | lowercase" *ngFor="let outcome of form.outcomes"
                    [color]="getColorForOutcome(outcome.name)"
                    mat-button
                    [disabled]="!isOutcomeButtonEnabled(outcome)"
                    [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                    (click)="onOutcomeClicked(outcome, $event)">
                {{outcome.name | uppercase}}
            </button>
        </mat-card-actions>
    </mat-card>
</div>
<!--
For debugging and data visualisation purposes,
will be removed during future revisions
-->
<div *ngIf="showDebugButton" class="adf-form-debug-container">
    <mat-slide-toggle [(ngModel)]="debugMode">Debug mode</mat-slide-toggle>
    <div *ngIf="debugMode && hasForm()">
        <h4>Values</h4>
        <pre>{{form.values | json}}</pre>

        <h4>Form</h4>
        <pre>{{form.json | json}}</pre>
    </div>
</div>
