<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="addRuleForm" layoutDirection="column" class="fl-content">
  <app-form-errors #formErrors [formGroup]="addRuleForm"></app-form-errors>
  <mat-form-field>
    <mat-label i18n>Rule protocol</mat-label>
    <mat-select formControlName="ruleType" placeholder="Rule protocol" i18n-placeholder
                (selectionChange)="changedRuleType()" required>
      <mat-option *ngFor="let ruleType of ruleTypes | keyvalue" [value]="ruleType.key">
        {{ruleType.key}}
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['ruleType']}}</mat-error>
  </mat-form-field>
  <mat-form-field *ngIf="protocolField">
    <mat-label i18n>Protocol</mat-label>
    <input matInput placeholder="Protocol" i18n-placeholder type="number" min="1" max="255" name="protocol"
           formControlName="protocol" required>
    <mat-error>{{fieldErrors['protocol']}}</mat-error>
  </mat-form-field>
  <mat-form-field *ngIf="portField">
    <mat-label i18n>Port or range</mat-label>
    <input matInput placeholder="Port or range" i18n-placeholder type="text" maxlength="11" name="port_range"
           formControlName="port_range" pattern="([0-9]{1,5})([:][0-9]{1,5})?" [required]="portRequired">
    <mat-error>{{fieldErrors['port_range']}}</mat-error>
    <mat-hint i18n>Enter one port or port range as such: port_min:port_max</mat-hint>
  </mat-form-field>
  <mat-checkbox color="primary" *ngIf="portField" (change)="changedAllPorts($event)" i18n>
      All ports
  </mat-checkbox>
  <div layoutDirection="row" appFlex="100" appLayoutGap="10px" *ngIf="icmpTypeField && icmpCodeField">
    <mat-form-field appFlex="100">
      <mat-label i18n>ICMP type</mat-label>
      <input matInput placeholder="ICMP type" i18n-placeholder type="number" min="0" max="255" name="icmp_type"
             formControlName="icmp_type">
      <mat-error>{{fieldErrors['icmp_type']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="100">
      <mat-label i18n>ICMP code</mat-label>
      <input matInput placeholder="ICMP code" i18n-placeholder type="number" min="0" max="255" name="icmp_code"
             formControlName="icmp_code">
      <mat-error>{{fieldErrors['icmp_code']}}</mat-error>
    </mat-form-field>
  </div>
  <mat-form-field>
    <mat-label i18n>Description</mat-label>
    <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Select source type</mat-label>
    <mat-select formControlName="direction" placeholder="Select source type" i18n-placeholder required>
      <mat-option value="ingress" i18n>
        Ingress - Incoming
      </mat-option>
      <mat-option value="egress" i18n>
        Egress - Outgoing
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Remote source of traffic</mat-label>
    <mat-select formControlName="remote" placeholder="Remote source of traffic" i18n-placeholder
                (selectionChange)="changedRemoteSource()" required>
      <mat-option value="cidr" i18n>
        IP Addresses
      </mat-option>
      <mat-option value="secgroup" i18n>Security group</mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['remote']}}</mat-error>
  </mat-form-field>
  <mat-form-field *ngIf="addRuleForm.controls.remote.value === 'cidr'">
    <mat-label i18n>Remote IP prefix</mat-label>
    <input matInput placeholder="Remote IP prefix" i18n-placeholder type="text" formControlName="remote_ip_prefix">
    <mat-error>{{fieldErrors['remote_ip_prefix']}}</mat-error>
  </mat-form-field>
  <mat-form-field *ngIf="addRuleForm.controls.remote.value === 'secgroup'">
    <mat-label i18n>Remote security group</mat-label>
    <mat-select formControlName="remote_group_id" placeholder="Remote security group" i18n-placeholder required>
      <mat-option *ngFor="let remoteGroup of securityGroups" [value]="remoteGroup.id">
        {{remoteGroup.name || remoteGroup.id}}
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['remote_group_id']}}</mat-error>
  </mat-form-field>
  <mat-form-field *ngIf="addRuleForm.controls.remote.value === 'secgroup'">
    <mat-label i18n>Ether type</mat-label>
    <mat-select formControlName="ethertype" placeholder="Ether type" i18n-placeholder required>
      <mat-option value="IPv4" i18n>
        IPv4
      </mat-option>
      <mat-option value="IPv6" i18n>
        IPv6
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['ethertype']}}</mat-error>
  </mat-form-field>
</form>
