<form *ngIf="createOptions" appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="monitorForm">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="monitorForm"></app-form-errors>
  <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
  <div layoutDirection="column">
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="33%">
        <mat-label i18n>Name</mat-label>
        <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name">
        <mat-error>{{fieldErrors['name']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Type</mat-label>
        <mat-select placeholder="Type" i18n-placeholder formControlName="type" required>
          <mat-option *ngFor="let type of createOptions.monitor_types | keyvalue"
                      [value]="type.key">
            {{type.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Max retries down</mat-label>
        <input matInput type="number" placeholder="Max retries down" i18n-placeholder
               formControlName="max_retries_down" min="1" required>
        <mat-error>{{fieldErrors['max_retries_down']}}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="33%">
        <mat-label i18n>Delay(sec)</mat-label>
        <input matInput type="number" placeholder="Delay(sec)" i18n-placeholder
               formControlName="delay" min="0" required>
        <mat-error>{{fieldErrors['delay']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Max retries</mat-label>
        <input matInput type="number" placeholder="Max retries" i18n-placeholder
               formControlName="max_retries" min="1" required>
        <mat-error>{{fieldErrors['max_retries']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Timeout(sec)</mat-label>
        <input matInput type="number" placeholder="Timeout(sec)" i18n-placeholder
               formControlName="timeout" min="0">
        <mat-error>{{fieldErrors['timeout']}}</mat-error>
      </mat-form-field>
    </div>
    <div *ngIf="['HTTP', 'HTTPS'].includes(monitorForm.controls.type.value)"
         layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="33%">
        <mat-label i18n>HTTP method</mat-label>
        <mat-select placeholder="HTTP method" i18n-placeholder formControlName="http_method">
          <mat-option *ngFor="let type of createOptions.monitor_http_methods | keyvalue"
                      [value]="type.key">
            {{type.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Expected codes</mat-label>
        <input matInput placeholder="Expected codes" i18n-placeholder type="text"
               formControlName="expected_codes">
        <mat-error>{{fieldErrors['expected_codes']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>URL path</mat-label>
        <input matInput placeholder="URL path" i18n-placeholder type="text"
               formControlName="url_path">
        <mat-error>{{fieldErrors['url_path']}}</mat-error>
      </mat-form-field>
    </div>
    <mat-checkbox formControlName="admin_state_up" color="primary" class="fl-margin-top" i18n>Admin state up</mat-checkbox>
  </div>
</form>
