<form *ngIf="!!object && !!createOptions" class="fl-content"
      appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="portForm" layoutDirection="row">
  <div layoutDirection="column" appFlex="{{isEditForm ? 100: 50}}" xsFlex="100">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="portForm"></app-form-errors>
    <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"
                      [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>

    <ng-container *ngIf="portForm.controls.ip_address_or_subnet.value === 'fixed_ip_address'">
      <ng-container *ngFor="let fixedIp of fixedIps.controls; let index = index">
        <div [formGroup]="fixedIp" layoutDirection="row" appLayoutGap="10px">
          <mat-form-field>
            <mat-label i18n>IP address</mat-label>
            <input matInput placeholder="IP address" i18n-placeholder type="text" formControlName="ip_address">
            <mat-error>{{fixedIp.controls.ip_address.errors | errorFormatter}}</mat-error>
          </mat-form-field>
          <a mat-icon-button class="fl-margin-top-small" [attr.fl-tooltip]="removeFixedIpTooltip"
             (click)="deleteFixedIp(index)">
            <mat-icon>delete</mat-icon>
          </a>
        </div>
      </ng-container>
      <div layoutDirection="row" appLayoutGap="10px" class="fl-margin-bottom">
        <a mat-mini-fab (click)="addFixedIp()" class="add-item-button">
          <mat-icon>add</mat-icon>
        </a>
        <p i18n>
          Add fixed IP
        </p>
      </div>
    </ng-container>

    <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.id">
            {{ 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"
                  class="fl-margin-bottom" i18n>Port security enabled</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>Description</mat-label>
      <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
      <mat-error>{{fieldErrors['description']}}</mat-error>
    </mat-form-field>
  </div>
  <div *ngIf="!isEditForm" appFlex="50" class="hide-xs">
    <div class="fl-help-text">
      <h3 i18n>Project</h3>
      <p i18n>The project that owns the resource. Leave blank to create the resource under admin project.</p>
    </div>
    <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>
