<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" class="fl-content"
      *ngIf="createOptions" [formGroup]="portForm" layoutDirection="row" appLayoutGap="10px">
  <div layoutDirection="column" appFlex="50" xsFlex="100">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="portForm"></app-form-errors>
    <app-credit-warning resourceName="port" i18n-resourceName></app-credit-warning>
    <mat-radio-group *ngIf="selectClient" layoutDirection="column" (ngModelChange)="changeDestination($event)"
      [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
      <mat-radio-button [color]="'primary'" [value]="false" i18n>
        Create port in admin project
      </mat-radio-button>
      <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
        Create port in client's project
      </mat-radio-button>
    </mat-radio-group>

    <ng-container *ngIf="selectClient && createInClientProject">
      <app-client-autocomplete [control]="portForm.controls.client" clientsWithEnabledProject></app-client-autocomplete>
    </ng-container>

    <mat-form-field>
      <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-checkbox color="primary" formControlName="admin_state_up" class="fl-margin-bottom" i18n>
      Enable admin state
    </mat-checkbox>

    <app-autocomplete [control]="portForm.controls.network"
                      [optionsService]="networksApiService"
                      [displayFn]="networkDisplayFn"
                      [optionsQueryParams]="{for_port: true}"
                      [placeholderSelected]="networkSelectedPlaceholder"
                      [placeholderUnselected]="networkUnselectedPlaceholder"></app-autocomplete>

    <mat-form-field>
      <mat-label i18n>IP address or subnet</mat-label>
      <mat-select formControlName="ip_address_or_subnet" placeholder="IP address or subnet" i18n-placeholder>
        <mat-option value="" i18n>Unspecified</mat-option>
        <mat-option value="subnet" i18n>Subnet</mat-option>
        <mat-option value="fixed_ip_address" i18n>Fixed IP Address</mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['ip_address_or_subnet']}}</mat-error>
    </mat-form-field>

    <mat-form-field *ngIf="portForm.controls.ip_address_or_subnet.value === 'fixed_ip_address'">
      <mat-label i18n>Fixed IP address</mat-label>
      <input matInput formControlName="selected_fixed_ip_address"
             placeholder="Fixed IP address" i18n-placeholder
             type="text" required>
      <mat-error>{{portForm.controls.selected_fixed_ip_address.errors | errorFormatter}}</mat-error>
    </mat-form-field>

    <ng-container *ngIf="portForm.controls.ip_address_or_subnet.value === 'subnet'">
      <span class="fl-red-color" *ngIf="!portForm.controls.network.value" i18n>Select a valid network first!</span>
      <mat-form-field *ngIf="portForm.controls.network.value">
        <mat-label i18n>Select subnet</mat-label>
        <mat-select formControlName="subnet" placeholder="Select subnet" i18n-placeholder>
          <mat-option *ngFor="let subnet of portForm.controls.network.value.subnets" [value]="subnet">
            {{ subnet.name }} - {{ subnet.id }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </ng-container>

    <mat-form-field>
      <mat-label i18n>MAC address</mat-label>
      <input matInput placeholder="MAC address" i18n-placeholder type="text" formControlName="mac_address">
      <mat-error>{{fieldErrors['mac_address']}}</mat-error>
    </mat-form-field>

    <mat-checkbox color="primary" formControlName="port_security_enabled" i18n>Port security enabled</mat-checkbox>

    <mat-checkbox color="primary" formControlName="auto_add_security_group" class="fl-margin-bottom" i18n>
      Auto add security group
    </mat-checkbox>

    <mat-form-field>
      <mat-label i18n>vNIC type</mat-label>
      <mat-select formControlName="vnic_type" placeholder="vNIC type" i18n-placeholder>
        <mat-option *ngFor="let vNICType of createOptions.vnic_types" [value]="vNICType[0]">
          {{ vNICType[1] }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Binding: Host</mat-label>
      <input matInput placeholder="Binding: Host" i18n-placeholder type="text" formControlName="host_id">
      <mat-error>{{fieldErrors['host_id']}}</mat-error>
    </mat-form-field>

    <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>
  </div>
  <div appFlex="50" class="hide-xs">
    <div class="fl-help-text">
      <h3 i18n>IP address or subnet</h3>
      <p i18n>If you specify the subnet, OpenStack Networking allocates an available IP from that subnet to
        the port. If you specify the IP address, OpenStack Networking tries to allocate the IP address
        if the address is a valid IP for any of the subnets on the specified network.</p>
    </div>
    <div class="fl-help-text">
      <h3 i18n>MAC address</h3>
      <p i18n>The MAC address of the port. If unspecified, a MAC address is automatically generated.</p>
    </div>
  </div>
</form>
