<div *ngIf="createOptions" class="fl-content">
  <div layoutDirection="column" appLayoutGap="5px">
    <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
          [formGroup]="membersForm" layoutDirection="column" appFlex="auto" class="fl-margin-top-small">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="membersForm"></app-form-errors>
      <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>

      <h2 class="fl-heading-md" i18n>Allocated members</h2>
      <ng-container *ngIf="members.controls.length > 0; else noMembers">
        <div formArrayName="members" *ngFor="let member of members.controls; let index = index;"
             layoutDirection="column">
          <div [formGroupName]="index" layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column" appLayoutGap="10px"
               layoutAlign="start center">
            <mat-form-field>
              <mat-label i18n>IP address</mat-label>
              <input matInput placeholder="IP address" i18n-placeholder type="text" formControlName="address" required>
              <mat-error>{{fieldErrors['address']}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Subnet</mat-label>
              <mat-select placeholder="Subnet" i18n-placeholder formControlName="subnet_id">
                <mat-option *ngFor="let subnet of createOptions.subnets" [value]="subnet.id">
                  {{subnet.name}}({{subnet.cidr}})
                </mat-option>
              </mat-select>
              <mat-error>{{fieldErrors['subnet_id']}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Port</mat-label>
              <input matInput type="number" placeholder="Port" i18n-placeholder formControlName="protocol_port"
                     min="1" max="65535" required>
              <mat-error>{{fieldErrors['protocol_port']}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Weight</mat-label>
              <input matInput type="number" placeholder="Weight" i18n-placeholder formControlName="weight"
                     min="1" required>
              <mat-error>{{fieldErrors['weight']}}</mat-error>
            </mat-form-field>
            <a mat-icon-button (click)="removePoolMember(index)">
              <mat-icon>delete</mat-icon>
            </a>
          </div>
        </div>
      </ng-container>
      <ng-template #noMembers>
        <p class="fl-detail" i18n>No members have been allocated</p>
      </ng-template>
      <div layoutDirection="row" layoutAlign="start center">
        <a mat-button color="primary" (click)="addExternalPoolMember()" i18n>
          Add external member
        </a>
      </div>
      <mat-expansion-panel class="mat-elevation-z0" #addExistingInstances>
        <mat-expansion-panel-header class="add-instances-header">
          <mat-panel-title class="fl-bold" i18n>Add existing instances</mat-panel-title>
          <mat-panel-description *ngIf="!addExistingInstances.expanded" i18n>
            Expand to see available instances
          </mat-panel-description>
        </mat-expansion-panel-header>
        <div layoutDirection="column">
          <mat-form-field [formGroup]="searchInstances">
            <mat-label i18n>Search instances</mat-label>
            <input matInput type="text" formControlName="search" placeholder="Search instances" i18n-placeholder>
          </mat-form-field>
          <div layoutDirection="row">
            <p class="fl-bold" appFlex="40%" i18n>Name</p>
            <p class="fl-bold" appFlex="40%" i18n>IP Address</p>
          </div>
          <hr class="full-width">
          <div *ngFor="let instance of filteredInstances$ | async" layoutDirection="row" layoutAlign="start center">
            <p appFlex="40%">{{instance.name}}</p>
            <p appFlex="40%">{{instance.access_ip}}</p>
            <a mat-icon-button (click)="addExistingInstance(instance)">
              <mat-icon>add</mat-icon>
            </a>
          </div>
        </div>
      </mat-expansion-panel>
    </form>
  </div>
</div>
