<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" class="fl-content"
      *ngIf="createOptions" [formGroup]="databaseInstanceForm">
  <div layoutDirection="column">
    <app-form-errors #formErrors [formGroup]="databaseInstanceForm"></app-form-errors>
    <app-credit-warning resourceName="dbaas_instance" i18n-resourceName></app-credit-warning>

    <div layoutDirection="row"
         *ngIf="authSvc.feature('ui.staff')">
      <div layoutDirection="column" appFlex="100">
        <mat-radio-group layoutDirection="column" (ngModelChange)="changeDestination($event)"
                         class="fl-margin-bottom-medium"
                         *ngIf="authSvc.feature('ui.openstack.create-as-admin')"
                         [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
          <mat-radio-button [color]="'primary'" [value]="false" i18n>
            Create instance in admin project
          </mat-radio-button>
          <mat-radio-button [color]="'primary'" [value]="true" i18n>
            Create instance in client's project
          </mat-radio-button>
        </mat-radio-group>

        <ng-container *ngIf="createInClientProject === true">
          <app-client-autocomplete [control]="clientControl" clientsWithEnabledProject></app-client-autocomplete>
        </ng-container>
      </div>
    </div>

    <div [hidden]="!(clientControl.value && clientControl.value.id) && authSvc.feature('ui.staff') && createInClientProject">

      <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Name</mat-label>
          <input matInput placeholder="Name" i18n-placeholder maxlength="255" type="text" formControlName="name">
          <mat-error>{{fieldErrors['name']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="auto">
          <mat-label i18n>Region</mat-label>
          <mat-select formControlName="region" placeholder="Region" i18n-placeholder required>
            <mat-option *ngFor="let region of createOptions.regions" [value]="region.id">
              {{region.id}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div *ngIf="authSvc.feature('openstack.dbaas.availability_zones')"
           layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Availability zone</mat-label>
          <mat-select formControlName="availability_zone" placeholder="Datastore type" i18n-placeholder>
            <mat-option [value]="''" i18n>None</mat-option>
            <mat-option *ngFor="let availabilityZone of createOptions.availability_zones" [value]="availabilityZone">
              {{availabilityZone}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['availability_zone']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="auto">
          <mat-label i18n>Locality</mat-label>
          <mat-select formControlName="locality" placeholder="Locality" i18n-placeholder>
            <mat-option [value]="''" i18n>None</mat-option>
            <mat-option *ngFor="let locality of createOptions.locality" [value]="locality">
              {{locality}}
            </mat-option>
          </mat-select>
          <mat-hint i18n>
            Replicas on same host (affinity) or a different one (anti-affinity).
          </mat-hint>
          <mat-error>{{fieldErrors['locality']}}</mat-error>
        </mat-form-field>
      </div>

      <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Volume size</mat-label>
          <input matInput placeholder="Volume size" i18n-placeholder type="number" formControlName="volume_size">
          <mat-error>{{fieldErrors['volume_size']}}</mat-error>
          <mat-hint i18n>Size of the volume in GB</mat-hint>
        </mat-form-field>
        <mat-form-field appFlex="auto">
          <mat-label i18n>Volume type</mat-label>
          <mat-select formControlName="volume_type" placeholder="Volume type" i18n-placeholder>
            <mat-option [value]="''" i18n>None</mat-option>
            <mat-option *ngFor="let volume_type of createOptions.volume_types" [value]="volume_type.name">
              {{volume_type.name}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['volume_type']}}</mat-error>
        </mat-form-field>
      </div>

      <div class="fl-margin-top-medium">
        <app-flavors-as-cards #flavorsAsCards
                              (choseFlavor)="onFlavorChosen($event)"
                              [flavors]="createOptions.flavors">
        </app-flavors-as-cards>
      </div>

      <div layoutDirection="row" appLayoutGap="10px" class="fl-margin-top">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Datastore type</mat-label>
          <mat-select formControlName="datastore_type" placeholder="Datastore type" i18n-placeholder>
            <mat-option *ngFor="let datastore of createOptions.datastores" [value]="datastore.type">
              {{datastore.type}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['datastore_type']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="auto">
          <mat-label i18n>Datastore version</mat-label>
          <mat-select formControlName="datastore_version" placeholder="Datastore version" i18n-placeholder>
            <mat-option *ngFor="let datastore_version of datastoreVersions" [value]="datastore_version">
              {{datastore_version}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['datastore_version']}}</mat-error>
        </mat-form-field>
      </div>

      <div>
        <mat-form-field>
          <mat-label i18n>Network selection</mat-label>
          <mat-select #nicsSelect formControlName="nics" i18n-placeholder placeholder="Network selection">
            <mat-option *ngFor="let network of createOptions.nics" [value]="network.id">{{network.name}}</mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['nics']}}</mat-error>
        </mat-form-field>
      </div>

      <div layoutDirection="column">
        <div layoutDirection="row">
          <mat-checkbox formControlName="access_is_public" [color]="'primary'" i18n>
            Is public
          </mat-checkbox>
          <app-icon [icon]="isPublicInfoIcon"></app-icon>
        </div>
        <h2 class="fl-heading-md fl-margin-top-medium fl-no-margin-bottom">Allowed CIDRs</h2>
        <p class="fl-detail fl-margin-bottom fl-no-margin-top" i18n>
          Define a list of IPv4, IPv6 or mix of both CIDRs that restrict access to the database service.
          0.0.0.0/0 is used by default if this list is empty.
        </p>
        <div formArrayName="access_allowed_cidrs" layoutDirection="row"
             *ngFor="let fixedIp of databaseInstanceForm.get('access_allowed_cidrs')['controls']; let i = index;">
          <div [formGroupName]="i" layoutDirection="row">
            <mat-form-field>
              <mat-label i18n>Address</mat-label>
              <input matInput formControlName="address" placeholder="Address" i18n-placeholder
                     type="text" required>
              <mat-error i18n>{{fixedIp.controls["address"].errors | errorFormatter}}</mat-error>
              <button mat-icon-button matSuffix (click)="removeAddress(i)" fl-tooltip="Remove address" i18n-fl-tooltip>
                <mat-icon>delete</mat-icon>
              </button>
            </mat-form-field>
          </div>
        </div>
        <button mat-mini-fab class="add-item-button fl-margin-left-small fl-margin-bottom-medium"
                fl-tooltip="Add address" i18n-fl-tooltip fl-tooltip-direction="right"
                (click)="addAddress($event)">
          <mat-icon>add</mat-icon>
        </button>
      </div>

      <mat-divider class="fl-margin-top"></mat-divider>
      <mat-checkbox class="fl-margin-top" formControlName="initial_dbs" [color]="'primary'" i18n>
        Define initial databases
      </mat-checkbox>

      <div *ngIf="databaseInstanceForm.controls.initial_dbs.value" class="fl-margin-top" layoutDirection="column">
        <mat-form-field appFlex="50">
          <mat-label i18n>Initial admin user</mat-label>
          <input matInput placeholder="Initial admin user" i18n-placeholder maxlength="255" type="text"
                 formControlName="initial_user_username">
          <mat-hint i18n>This user will have access to all databases you create.</mat-hint>
          <mat-error>{{fieldErrors['initial_user_username']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Password</mat-label>
          <input matInput placeholder="Password" i18n-placeholder
                 [type]="databaseInstanceForm.controls.initial_user_password.value && !showPassword ? 'password': 'text'"
                 formControlName="initial_user_password" autocomplete="new-password">
          <mat-error>{{fieldErrors['initial_user_password']}}</mat-error>
          <a mat-icon-button matSuffix
             (mousedown)="showPassword = true"
             (mouseup)="showPassword = false"
             fl-tooltip="Hold button to reveal password" i18n-fl-tooltip>
            <mat-icon>
              visibility
            </mat-icon>
          </a>
        </mat-form-field>

        <h2 class="fl-heading-md" i18n>Initial Databases</h2>
        <p class="fl-detail fl-no-margin-top fl-margin-bottom" i18n>Optionally, provide a list of databases to
          create.</p>
        <div formArrayName="initial_databases" layoutDirection="row"
             *ngFor="let database of databaseInstanceForm.get('initial_databases')['controls']; let i = index;">
          <div [formGroupName]="i" layoutDirection="row">
            <mat-form-field>
              <mat-label i18n>Database name</mat-label>
              <input matInput formControlName="name" placeholder="Database name" i18n-placeholder
                     type="text" required>
              <mat-error i18n>{{database.controls["name"].errors | errorFormatter}}</mat-error>
              <button mat-icon-button matSuffix (click)="removeDatabase(i)" fl-tooltip="Remove database"
                      i18n-fl-tooltip>
                <mat-icon>delete</mat-icon>
              </button>
            </mat-form-field>
          </div>
        </div>
        <button mat-mini-fab class="add-item-button fl-margin-top-small fl-margin-left-small fl-margin-bottom-medium"
                fl-tooltip="Add database" i18n-fl-tooltip fl-tooltip-direction="right"
                (click)="addDatabase($event)">
          <mat-icon>add</mat-icon>
        </button>
      </div>
    </div>
  </div>
</form>
<div class="fl-margin-right-medium estimated-price-text"
     *ngIf="estimatedCost && createInClientProject"
     [class.invisible]="estimatedCostLoading"
     [class.fl-margin-top-medium]="!estimatedCostLoading"
     [innerHTML]="estimatedCost"></div>
<app-flashing-dots layoutAlign="end center"
                   class="fl-margin-right-small fl-padding-right"
                   *ngIf="estimatedCostLoading"></app-flashing-dots>
