@if (startClusterCreation) {
<div class="container-fluid">
  <div cdsRow
       class="cds-ml-5 cds-mt-6">
    <div cdsCol
         [columnNumbers]="{'lg': 13, 'md': 8, 'sm': 8}">
      <div class="mb-4">
        <!-- htmllint img-req-src="false" -->
        <img [src]="projectConstants.cephLogo"
             alt="Ceph"
             class="ceph-logo">
      </div>

      <div class="mb-4">
        <span class="cds--type-fluid-heading-05"
              i18n>Welcome to {{ projectConstants.projectName }}
        </span>
      </div>

      <div class="mb-2">
        <span class="cds--type-fluid-heading-04"
              i18n>Your Ceph cluster is initialized and running.
        </span>
      </div>

      <div class="mb-5">
        <span class="cds--type-body-compact-01"
              i18n>
          <cd-icon type="success"
                   [size]="icons.size20">
          </cd-icon>
          The cluster control plane is ready.
        </span>
      </div>

      <div class="mb-2">
        <span class="cds--type-fluid-heading-03"
              i18n>
          <cd-icon type="ibmCloudBareMetalServer"
                   [size]="icons.size20">
          </cd-icon>
          Add storage to begin using your cluster.
        </span>
      </div>

      <div class="mb-2">
        <span class="cds--type-body-01"
              i18n>Set up storage for your cluster to run workloads and store data. You can configure storage and data services now, or skip and configure them later.</span>
      </div>

      <cds-tile class="border-subtle no-border-bottom"
                [cdsLayer]="1">
        <div cdsStack="horizontal"
             gap="3">
          <span class="cds--type-heading-compact-02"
                i18n>
            Storage requirements
          </span>
          <cd-icon type="infoCircle"
                   [size]="icons.size20">
          </cd-icon>
        </div>
      </cds-tile>

      <cds-tile class="border-subtle mb-3"
                [cdsLayer]="2">
        <div cdsStack="horizontal"
             gap="4">
          <cd-icon type="ibmCloudDedicatedHost"
                   [size]="icons.size20">
          </cd-icon>
          <div cdsStack="vertical"
               gap="1">
            <span class="cds--type-heading-compact-01"
                  i18n>
              Hosts
            </span>
            <span class="cds--type-body-compact-01 text-secondary"
                  i18n>
              Minimum 3 hosts required
            </span>
          </div>
        </div>

        <hr/>

        <div cdsStack="horizontal"
             gap="4">
          <cd-icon type="vmdkDisk"
                   [size]="icons.size20">
          </cd-icon>

          <div cdsStack="vertical"
               gap="1">
            <span class="cds--type-heading-compact-01"
                  i18n>
              Disks
            </span>

            <span class="cds--type-body-compact-01 text-secondary"
                  i18n>
              At least 1 disk per host
            </span>
          </div>
        </div>

        <hr/>

        <div cdsStack="horizontal"
             gap="4">
          <cd-icon type="clusterIcon"
                   [size]="icons.size20">
          </cd-icon>

          <div cdsStack="vertical"
               gap="1">
            <span class="cds--type-heading-compact-01"
                  i18n>
              Data services (optional)
            </span>

            <span class="cds--type-body-compact-01 text-secondary"
                  i18n>
              Configure Object, Block, or File services
            </span>
          </div>
        </div>
      </cds-tile>

      <div class="mb-3">
        <cd-alert-panel type="info"
                        [showTitle]="false">
          <span class="cds--type-body-compact-01">
              The cluster cannot store data until storage is added. If storage is already configured, continue to the cluster overview.
          </span>
        </cd-alert-panel>
      </div>

      <div class="mb-5">
        <button cdsButton="primary"
                class="me-3"
                (click)="createCluster()"
                aria-label="Add Storage"
                i18n>
          Add storage
          <svg [cdsIcon]="icons.add"
               [size]="icons.size20"
               class="cds--btn__icon">
          </svg>
        </button>
        <button cdsButton="tertiary"
                (click)="skipClusterCreation()"
                i18n>
          View cluster overview
          <svg [cdsIcon]="icons.right"
               [size]="icons.size20"
               class="cds--btn__icon">
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
}

@else {
<div cdsRow
     class="form cds-mt-6">
  <div cdsCol
       [columnNumbers]="{'lg': 2, 'md': 2, 'sm': 2}"
       class="indicator-wrapper">

    <div class="form-header"
         i18n>Add Storage</div>
    <cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
  </div>

  <div cdsCol
       [columnNumbers]="{'lg': 14, 'md': 14, 'sm': 14}">
    <ng-container [ngSwitch]="currentStep?.stepIndex">
      <div *ngSwitchCase="0"
           class="ms-5">
        <h4 class="title"
            i18n>Add Hosts</h4>

        <cd-hosts [hiddenColumns]="['service_instances']"
                  [hideMaintenance]="true"
                  [hasTableDetails]="false"
                  [showGeneralActionsOnly]="true"
                  [showExpandClusterBtn]="false"></cd-hosts>
      </div>
      <div *ngSwitchCase="1"
           class="ms-5">
        <h4 class="title"
            i18n>Create OSDs</h4>
        <div class="alignForm">
          <cd-osd-form [hideTitle]="true"
                       [hideSubmitBtn]="true"
                       (emitDriveGroup)="setDriveGroup($event)"
                       (emitDeploymentOption)="setDeploymentOptions($event)"
                       (emitMode)="setDeploymentMode($event)"></cd-osd-form>
        </div>
      </div>
      <div *ngSwitchCase="2"
           class="ms-5">
        <h4 class="title"
            i18n>Create Services</h4>
        <cd-services [hasDetails]="false"
                     [hiddenServices]="['mon', 'mgr', 'crash', 'agent']"
                     [hiddenColumns]="['status.running', 'status.size', 'status.last_refresh']"
                     [routedModal]="false"></cd-services>
      </div>
      <div *ngSwitchCase="3"
           class="ms-5">
        <cd-create-cluster-review></cd-create-cluster-review>
      </div>
    </ng-container>
    <div cdsRow
         class="m-5">
      @if (stepTitles[currentStep?.stepIndex]?.label === 'Create OSDs') {
      <button cdsButton="secondary"
              class="me-3"
              id="skipStepBtn"
              (click)="onSkip()"
              aria-label="Skip this step"
              i18n>Skip</button>
      }
      <cd-back-button buttonType="secondary"
                      aria-label="Close"
                      (backAction)="onPreviousStep()"
                      [name]="showCancelButtonLabel()"></cd-back-button>
      <button cdsButton="primary"
              (click)="onNextStep()"
              aria-label="Next"
              i18n>{{ showSubmitButtonLabel() }}</button>
    </div>
  </div>
</div>
}

<ng-template #skipConfirmTpl>
  <span i18n>You are about to skip the storage setup process.
             You'll need to <strong>navigate through the menu to add hosts and services.</strong></span>

  <div class="cds-mt-4"
       i18n>Are you sure you want to continue?</div>
</ng-template>