cloudfoundry/stratos

<app-page-header>
  {{ title$ | async }}
</app-page-header>
<div *ngIf="initialisedService$ | async as inited" class="add-service-instance">
  <app-steppers [cancel]="modeService.cancelUrl">

    <ng-container *ngIf="serviceType === serviceTypes.SERVICE">
      <app-step *ngIf="modeService.viewDetail.showSelectCf && !isSpaceScoped()" title="Cloud Foundry"
        [onEnter]="resetStoreData" [valid]="selectCF.validate | async" [onNext]="onNext"
        [blocked]="cfOrgSpaceService.isLoading$ | async">
        <app-create-application-step1 [stepperText]="stepperText" [isMarketplaceMode]="inMarketplaceMode" #selectCF>
        </app-create-application-step1>
      </app-step>
      <app-step title="Select Service" *ngIf="modeService.viewDetail.showSelectService"
        [valid]="selectService.validate | async" [onNext]="selectService.onNext"
        [blocked]="selectService.isFetching$ | async">
        <app-select-service #selectService></app-select-service>
      </app-step>
      <app-step title="Select Plan" [onNext]="selectPlan.onNext" [blocked]="!inited" [onEnter]="selectPlan.onEnter"
        [valid]="selectPlan.validate | async" cancelButtonText="Cancel">
        <app-select-plan-step #selectPlan></app-select-plan-step>
      </app-step>
      <app-step [title]="bindAppStepperText" *ngIf="modeService.viewDetail.showBindApp" [skip]="skipApps$ | async"
        [onEnter]="bindApp.onEnter" [onNext]="bindApp.submit " [valid]="bindApp.validate | async"
        cancelButtonText="Cancel">
        <app-bind-apps-step #bindApp [boundAppId]="appId" [apps$]="apps$"></app-bind-apps-step>
      </app-step>
      <app-step title="Service Instance" [onNext]="specifyDetails.onNext" [onEnter]="specifyDetails.onEnter"
        [blocked]="!!(specifyDetails.serviceInstancesInit$  | async)" [valid]="specifyDetails.validate | async "
        cancelButtonText="Cancel " nextButtonText="Create ">
        <app-specify-details-step [appId]="appId" #specifyDetails [showModeSelection]="!!appId">
        </app-specify-details-step>
      </app-step>
    </ng-container>

    <ng-container *ngIf="serviceType === serviceTypes.USER_SERVICE">
      <app-step *ngIf="modeService.viewDetail.showSelectCf" title="Cloud Foundry" [onEnter]="resetStoreData"
        [valid]="selectCF.validate | async" [onNext]="onNext" [blocked]="cfOrgSpaceService.isLoading$ | async">
        <app-create-application-step1 [stepperText]="stepperText" [isMarketplaceMode]="inMarketplaceMode" #selectCF>
        </app-create-application-step1>
      </app-step>
      <app-step [title]="bindAppStepperText" *ngIf="modeService.viewDetail.showBindApp" [skip]="skipApps$ | async"
        [onEnter]="bindApp.onEnter" [onNext]="bindApp.submit " [valid]="bindApp.validate | async"
        cancelButtonText="Cancel">
        <app-bind-apps-step #bindApp [boundAppId]="appId" [apps$]="apps$"></app-bind-apps-step>
      </app-step>
      <app-step title="Service Instance" [onNext]="supd.onNext" [valid]="supd.valid | async">
        <app-specify-user-provided-details [appId]="appId" [showModeSelection]="!!appId" [cfGuid]="cfGuid$ | async"
          [spaceGuid]="spaceGuid$ | async" [serviceInstanceId]="serviceInstanceId" #supd>
        </app-specify-user-provided-details>
      </app-step>
    </ng-container>

  </app-steppers>

</div>