<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit [formGroup]="createOpenstackServiceForm" layoutDirection="column"
          (ngSubmit)="createOpenstackService()">
      <app-form-errors #formErrors [formGroup]="createOpenstackServiceForm"></app-form-errors>
      <mat-form-field>
        <mat-label i18n>Product</mat-label>
        <mat-select formControlName="product_id" placeholder="Product" i18n-placeholder>
          <mat-option *ngFor="let product of availableProducts" [value]="product.id">
            {{product.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Product cycle</mat-label>
        <mat-select formControlName="product_cycle_id" placeholder="Product cycle" i18n-placeholder>
          <mat-option
            *ngFor="let productCycle of selectedProductCycles"
            [value]="productCycle.id">
            {{productCycle.display_name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <ng-container *ngIf="auth.feature('ui.openstack.service.select-project')">
        <mat-checkbox formControlName="create_new_project" color="primary" i18n>Create new project</mat-checkbox>
        <app-autocomplete [control]="createOpenstackServiceForm.controls.project_id"
                          [placeholderUnselected]="projectUnselectedPlaceholder"
                          [placeholderSelected]="projectSelectedPlaceholder"
                          [optionsService]="projectsApi"
                          [optionsQueryParams]="{filtering: 'service:null'}"></app-autocomplete>
      </ng-container>
    </form>
  </ng-template>
</app-common-dialog>
