cloudfoundry/stratos

<div class="specify-details">
  <div *ngIf="!modeService.isEditServiceInstanceMode() && (hasInstances$ | async) && showModeSelection">
    <div>
      <mat-radio-group [(ngModel)]="formMode" class="specify-details__radio-group"
        [disabled]="(serviceInstances$ | async)?.length === 0">
        <mat-radio-button *ngFor="let mode of formModes" [value]="mode.key" class="specify-details__radio-group__radio"
          (click)="resetForms(mode.key)">
          {{ mode.label }}
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </div>
  <form class="stepper-form" *ngIf="(showModeSelection && formMode === 'create-service-instance') || !showModeSelection"
    [formGroup]="createNewInstanceForm">
    <mat-form-field>
      <input matInput class="form-control" formControlName="name" placeholder="Name" required>
      <mat-error *ngIf="createNewInstanceForm.controls.name?.hasError('nameTaken')">
        A service instance with this name already exists. Please enter a different one.
      </mat-error>
      <mat-error *ngIf="createNewInstanceForm.controls.name?.hasError('maxlength')">
        A service instance name cannot exceed 50 characters.
      </mat-error>
    </mat-form-field>
    <mat-form-field class="stepper-form__tags">
      <mat-chip-list #chipList formControlName="tags" class="stepper-form__tags__chip-list">
        <mat-chip *ngFor="let tag of tags" class="stepper-form__tags__chip-list__chip" [selectable]="tagsSelectable"
          [removable]="tagsRemovable" (removed)="removeTag(tag)">
          {{tag.label}}
          <mat-icon matChipRemove *ngIf="tagsRemovable">cancel</mat-icon>
        </mat-chip>
        <input placeholder="Tags" name="tags" [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="tagsAddOnBlur"
          (matChipInputTokenEnd)="addTag($event)" />
      </mat-chip-list>
    </mat-form-field>
    <div class="stepper-form__params">
      <div>Service Parameters</div>
      <app-schema-form [config]="schemaFormConfig" (dataChange)="setServiceParams($event)"
        (validChange)="setParamsValid($event)"></app-schema-form>
    </div>
  </form>
  <form class="stepper-form" *ngIf="showModeSelection && formMode === 'bind-service-instance'"
    [formGroup]="selectExistingInstanceForm">
    <mat-form-field>
      <mat-select class="form-control" placeholder="Service Instance" required formControlName="serviceInstances">
        <mat-option *ngFor="let sI of bindableServiceInstances$ | async" [disabled]="!sI.metadata.guid"
          [value]="sI.metadata.guid">{{ sI.entity.name }}</mat-option>
      </mat-select>
    </mat-form-field>
  </form>

</div>