<mat-card appearance="outlined">
    <mat-card-title>
        {{ modelName }} #{{ pk }}
    </mat-card-title>
    <mat-card-content *ngIf="model">
        <div [formGroup]="formGroup" class='form'>
            <ng-container *ngFor="let field of fields">
                <mat-checkbox
                    matInput
                    *ngIf="field.isCheckbox"
                    [formControlName]="field.name"
                    >
                    {{ field.name }}
                </mat-checkbox>
                <mat-form-field *ngIf="field.isTextArea">
                    <mat-label>{{ field.name }}</mat-label>
                    <textarea matInput
                              [formControlName]="field.name"
                              >
                    </textarea>
                </mat-form-field>
                <mat-form-field
                    *ngIf="!field.isTextArea && !field.isCheckbox"
                    [class]="'field-' + field.name"
                    >
                    <mat-label>{{ field.name }}</mat-label>
                    <input matInput
                           [type]="field.inputType"
                           [formControlName]="field.name"
                           />
                </mat-form-field>
            </ng-container>
            <ng-container *ngFor="let join of model.inspection.joins">
                <join-select
                    [join]='join'
                    [formGroup]='formGroup'
                    >
                </join-select>
            </ng-container>
        </div>
    </mat-card-content>
    <mat-card-footer>
        <button mat-raised-button color='primary' (click)="submit()" [disabled]="!formGroup.valid">
            <mat-icon aria-label="submit">done</mat-icon>
            Submit
        </button>
        <button mat-raised-button routerLink="..">
            <mat-icon aria-label="cancel">cancel</mat-icon>
            Cancel
        </button>
    </mat-card-footer>
</mat-card>
