<form>
    <div [formGroup]="formGroup" class='form' fxLayout="row">
        <div fxFlex fxLayout="column" class='seachForm'>
            <mat-form-field fxFlex='0 0 0%'>
                <mat-label>Original ID (search in the raw survey points)</mat-label>
                <input matInput type="text"
                formControlName="originalId"
                required/>
            </mat-form-field>

            <button type="submit" class="submitButton"
                fxFlex='0 0 0%'
                mat-raised-button
                color='secondary'
                (click)="submit()"
                [disabled]="!formGroup.valid">
                Search points
            </button>
        </div>
        <div fxFlex fxLayout="column" class='opForm'>
            <mat-form-field fxFlex class='newStatus'>
                <mat-label>New status</mat-label>
                <input matInput type="text" formControlName="newStatus"/>
            </mat-form-field>

            <mat-form-field class='destination'>
                    <mat-label>Reconciliation destination</mat-label>
                <input matInput type="text" formControlName="destination"
                    [matAutocomplete]="auto"/>
            </mat-form-field>

            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let category of filteredCategories | async" [value]="category.name">
                    {{ category.name }} ({{ category.group }}-{{ category.minor_group_1}}, {{ category.description }}, {{ category.status }})
                </mat-option>
            </mat-autocomplete>

            <mat-checkbox formControlName="canDelete">
                Enable delete buttons
            </mat-checkbox>
        </div>
    </div>
</form>
<hr/>
<div fxLayout="column" fxLayoutAlign="center start" class="points">
    <gisaf-admin-raw-survey-point fxFlex *ngFor="let rawSurveyPoint of rawSurveyPoints"
        [rawSurveyPoint]='rawSurveyPoint'
        [newStatus]="formGroup.value['newStatus']"
        [canDelete]="formGroup.value['canDelete']"
        [category]="formGroup.value['destination']"
    >
    </gisaf-admin-raw-survey-point>
</div>