<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="subnetForm" layoutDirection="column" class="fl-content fl-content-min-height">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="subnetForm"></app-form-errors>

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

  <mat-radio-group formControlName="network_address_source" aria-label="Address source" i18n-aria-label
                   [class.hide]="subnet"
                   layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px" class="fl-margin-bottom-small">
    <mat-radio-button [color]="'primary'" value="manually" i18n>
      Enter address manually
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" value="from_pool" i18n>
      Select from subnet pool
    </mat-radio-button>
  </mat-radio-group>

  <ng-container *ngIf="subnetForm.controls.network_address_source.value === 'manually'">
    <mat-form-field>
      <mat-label i18n>Network address</mat-label>
      <input matInput placeholder="Network address" i18n-placeholder
             type="text" formControlName="cidr" required>
      <mat-error>{{fieldErrors['cidr']}}</mat-error>
    </mat-form-field>

    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="50">
        <mat-label i18n>Gateway IP</mat-label>
        <mat-select formControlName="setGatewayIp" placeholder="Gateway IP" i18n-placeholder required>
          <mat-option [value]="'no-gateway'" i18n>
            Do not set gateway IP
          </mat-option>
          <mat-option [value]="true" i18n>
            Manually set gateway IP
          </mat-option>
          <mat-option [value]="false" *ngIf="!subnet" i18n>
            Set default gateway IP
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appFlex="50" *ngIf="subnetForm.controls.setGatewayIp.value === true">
        <mat-label i18n>Gateway IP</mat-label>
        <input matInput placeholder="Gateway IP" i18n-placeholder type="text" formControlName="gateway_ip">
        <mat-error>{{fieldErrors['gateway_ip']}}</mat-error>
      </mat-form-field>
    </div>
  </ng-container>

  <ng-container *ngIf="subnetForm.controls.network_address_source.value !== 'manually'">
    <mat-form-field>
      <mat-label i18n>Subnet address pool</mat-label>
      <mat-select formControlName="subnet_pool" placeholder="Subnet address pool" i18n-placeholder required>
        <mat-option *ngFor="let subnetPool of subnetCreateOptions.pools" [value]="subnetPool">
          {{subnetPool.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div *ngIf="selectedPool" layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field subscriptSizing="dynamic">
        <mat-label i18n>Network mask</mat-label>
        <input matInput placeholder="Network mask" i18n-placeholder type="number" formControlName="network_mask"
               [min]="selectedPool.min_prefixlen" [max]="selectedPool.max_prefixlen">
        <mat-error>{{fieldErrors['network_mask']}}</mat-error>
      </mat-form-field>
      <p i18n>
        Fill in a number between {{selectedPool.min_prefixlen}} and {{selectedPool.max_prefixlen}}
      </p>
    </div>
  </ng-container>

  <mat-radio-group formControlName="ip_version" aria-label="IP version" i18n-aria-label
                   layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px" class="fl-margin-bottom-small">
    <mat-radio-button [color]="'primary'" [value]="4" i18n>
      IPv4
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" [value]="6" i18n>
      IPv6
    </mat-radio-button>
  </mat-radio-group>

  <ng-container *ngIf="subnetForm.controls.ip_version.value === 6">
    <mat-form-field>
      <mat-label i18n>IPv6 ra mode</mat-label>
      <mat-select formControlName="ipv6_ra_mode" placeholder="IPv6 ra mode" i18n-placeholder>
        <mat-option [value]="null" i18n>
          Unset
        </mat-option>
        <mat-option *ngFor="let ipv6Mode of subnetCreateOptions.ipv6_modes" [value]="ipv6Mode">
          {{ipv6Mode}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>IPv6 address mode</mat-label>
      <mat-select formControlName="ipv6_address_mode" placeholder="IPv6 address mode" i18n-placeholder>
        <mat-option [value]="null" i18n>
          Unset
        </mat-option>
        <mat-option *ngFor="let ipv6Mode of subnetCreateOptions.ipv6_modes" [value]="ipv6Mode">
          {{ipv6Mode}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </ng-container>

  <div class="fl-margin-top">
    <h2 class="fl-detail" i18n>Subnet details</h2>
    <hr>
  </div>

  <mat-checkbox formControlName="enable_dhcp" color="primary" i18n>
    Enable DHCP
  </mat-checkbox>

  <ng-container *ngIf="subnetForm.controls.network_address_source.value === 'manually'">
    <div layoutDirection="column" layoutAlign="start stretch">
      <div *ngFor="let allocationPool of allocationPools.controls; let index=index;"
           layoutDirection="row" appLayoutGap="10px" [formGroup]="allocationPools.controls[index]">
        <mat-form-field appFlex="50">
          <mat-label i18n>Allocation pool start</mat-label>
          <input matInput placeholder="Allocation pool start" i18n-placeholder type="text" formControlName="start">
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Allocation pool end</mat-label>
          <input matInput placeholder="Allocation pool end" i18n-placeholder type="text" formControlName="end">
        </mat-form-field>
        <a mat-icon-button (click)="allocationPools.removeAt(index)">
          <mat-icon>delete</mat-icon>
        </a>
      </div>
    </div>

    <div layoutDirection="column" layoutAlign="center center" class="fl-margin-top fl-margin-bottom-medium">
      <a mat-fab (click)="addAllocationPool()">
        <mat-icon>add</mat-icon>
      </a>
      <span class="fl-detail" i18n>Add allocation pool</span>
    </div>
  </ng-container>

  <div formArrayName="dns_nameservers" layoutDirection="column" layoutAlign="start stretch">
    <div *ngFor="let dnsServer of dnsNameservers.controls; let index=index;" layoutDirection="row" appLayoutGap="10px">
      <mat-form-field appFlex="auto">
        <mat-label i18n>DNS name server</mat-label>
        <input matInput placeholder="DNS name server" i18n-placeholder type="text" [formControlName]="index">
      </mat-form-field>
      <a mat-icon-button (click)="dnsNameservers.removeAt(index)">
        <mat-icon>delete</mat-icon>
      </a>
    </div>
  </div>

  <div layoutDirection="column" layoutAlign="center center" class="fl-margin-top fl-margin-bottom-medium">
    <a mat-fab (click)="addDnsServer()">
      <mat-icon>add</mat-icon>
    </a>
    <span class="fl-detail" i18n>Add DNS name server</span>
  </div>

  <div layoutDirection="column" layoutAlign="start stretch">
    <div *ngFor="let hostRoute of hostRoutes.controls; let index=index;"
         layoutDirection="row" appLayoutGap="10px" [formGroup]="hostRoutes.controls[index]">
      <mat-form-field appFlex="50">
        <mat-label i18n>Destination (CIDR)</mat-label>
        <input matInput placeholder="Destination (CIDR)" i18n-placeholder type="text" formControlName="destination">
      </mat-form-field>
      <mat-form-field appFlex="50">
        <mat-label i18n>Nexthop (IP)</mat-label>
        <input matInput placeholder="Nexthop (IP)" i18n-placeholder type="text" formControlName="nexthop">
      </mat-form-field>
      <a mat-icon-button (click)="hostRoutes.removeAt(index)">
        <mat-icon>delete</mat-icon>
      </a>
    </div>
  </div>

  <div layoutDirection="column" layoutAlign="center center" class="fl-margin-top">
    <a mat-fab (click)="addHostRoute()">
      <mat-icon>add</mat-icon>
    </a>
    <span class="fl-detail" i18n>Add host route</span>
  </div>
</form>
