<form *ngIf="regions" [formGroup]="networkOptionsForm" layoutDirection="column"
      class="fl-content fl-content-min-height">
  <app-form-errors #formErrors [formGroup]="networkOptionsForm"></app-form-errors>
  <ng-container *ngIf="autoCreateNetworkOptions">
    <span i18n>Current config:</span>
    <ul>
      <li *ngIf="autoCreateNetworkOptions.options.config.network" i18n>
        <strong>Network:</strong> {{autoCreateNetworkOptions.options.config.network.name}}
      </li>
      <li *ngIf="autoCreateNetworkOptions.options.config.ipv4_subnetpool" i18n>
        <strong>IPv4 subnet pool:</strong> {{autoCreateNetworkOptions.options.config.ipv4_subnetpool.name}}
      </li>
      <li *ngIf="autoCreateNetworkOptions.options.config.ipv6_subnetpool" i18n>
        <strong>IPv6 subnet pool:</strong> {{autoCreateNetworkOptions.options.config.ipv6_subnetpool.name}}
      </li>
    </ul>
  </ng-container>
  <mat-form-field>
    <mat-label i18n>Region</mat-label>
    <mat-select formControlName="region" placeholder="Region" i18n-placeholder required>
      <mat-option *ngFor="let region of regions.objects" [value]="region.id">
        {{region.id}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <ng-container *ngIf="autoCreateNetworkOptions">
    <div layoutDirection="row" appLayoutGap="10px">
      <mat-form-field *ngIf="autoCreateNetworkOptions.options.networks.length; else noNetworks" appFlex="auto">
        <mat-label i18n>Network</mat-label>
        <mat-select formControlName="network" placeholder="Network" i18n-placeholder>
          <mat-option *ngFor="let network of autoCreateNetworkOptions.options.networks" [value]="network.id">
            {{network.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <ng-template #noNetworks>
        <p appFlex="auto" i18n>No networks available, create one by pressing the add button</p>
      </ng-template>
      <button mat-mini-fab [attr.fl-tooltip]="createNetworkTooltip"
              class="add-item-button"
              fl-tooltip-direction="left" color="primary"
              [routerLink]="config.getPanelUrl('openstack/networks/create')">
        <mat-icon>add</mat-icon>
      </button>
    </div>

    <div layoutDirection="row" appLayoutGap="10px">
      <mat-form-field *ngIf="autoCreateNetworkOptions.options.ipv4_subnetpools.length; else noIPv4Pools" appFlex="auto">
        <mat-label i18n>IPv4 subnet pool</mat-label>
        <mat-select formControlName="ipv4_subnetpool" placeholder="IPv4 subnet pool" i18n-placeholder>
          <mat-option *ngFor="let subnetPool of autoCreateNetworkOptions.options.ipv4_subnetpools"
                      [value]="subnetPool.id">
            {{subnetPool.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <ng-template #noIPv4Pools>
        <p appFlex="auto" i18n>No IPv4 subnet pools available, create one by pressing the add button</p>
      </ng-template>
      <button mat-mini-fab [attr.fl-tooltip]="createSubnetpoolTooltip"
              class="add-item-button"
              fl-tooltip-direction="left" color="primary"
              [routerLink]="config.getPanelUrl('openstack/subnet-pools/create')">
        <mat-icon>add</mat-icon>
      </button>
    </div>

    <div layoutDirection="row" appLayoutGap="10px" class="fl-margin-top-medium">
      <mat-form-field  *ngIf="autoCreateNetworkOptions.options.ipv4_subnetpools.length; else noIPv6Pools" appFlex="auto">
        <mat-label i18n>IPv6 subnet pool</mat-label>
        <mat-select formControlName="ipv6_subnetpool" placeholder="IPv6 subnet pool" i18n-placeholder>
          <mat-option *ngFor="let subnetPool of autoCreateNetworkOptions.options.ipv6_subnetpools"
                      [value]="subnetPool.id">
            {{subnetPool.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <ng-template #noIPv6Pools>
        <p appFlex="auto" i18n>No IPv6 subnet pools available, create one by pressing the add button</p>
      </ng-template>
      <button mat-mini-fab [attr.fl-tooltip]="createSubnetpoolTooltip" fl-tooltip-direction="left" color="primary"
              class="add-item-button"
              [routerLink]="config.getPanelUrl('openstack/subnet-pools/create')">
        <mat-icon>add</mat-icon>
      </button>
    </div>
  </ng-container>
</form>
