<div [hidden]="!controllerOptionsVisibility" class="content">
    <div class="default-header">
        <div class="row">
            <h1 class="col">Add new controller</h1>
        </div>
    </div>
    <div class="default-content">
        <mat-card class="matCard">
            <form [formGroup]="controllerForm">
                <mat-form-field>
                    <input matInput tabindex="1" formControlName="name" placeholder="Name" />
                    <mat-error *ngIf="controllerForm.get('name').hasError('required')">You must enter a value</mat-error>
                </mat-form-field>

                <mat-form-field>
                    <mat-select placeholder="Location" formControlName="location">
                      <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
                    </mat-select>
                </mat-form-field>

                <mat-form-field>
                    <mat-select placeholder="Protocol" formControlName="protocol">
                        <mat-option *ngFor="let protocol of protocols" [value]="protocol.key"> {{ protocol.name }} </mat-option>
                    </mat-select>
                </mat-form-field>
            </form>
        </mat-card>
        <div class="buttons-bar">
            <button mat-raised-button color="primary" (click)="createController()">Add controller</button>
        </div>
    </div>
</div>
