{{#accordion-list showExpandAll=false as |al expandFn|}}
  {{#if (eq step 1)}}
    {{#accordion-list-item title=(t "clusterNew.huaweicce.access.title")
       detail=(t "clusterNew.huaweicce.access.detail")
       expandOnInit=true
       expandAll=al.expandAll
       expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.region.label"}}
          </label>
          {{searchable-select
            class="form-control"
            content=zones
            value=config.region
            allowCustom=true
          }}
          <p class="text-info text-small m-0">{{t "clusterNew.huaweicce.region.helpText" htmlSafe=true}}</p>
        </div>
        <div class="col span-6 mb-0">
          <label class="acc-label">{{t "clusterNew.huaweicce.projectId.label"}}{{field-required}}</label>
          {{input type="text"
            value=config.projectId
            classNames="form-control"
            placeholder=(t "clusterNew.huaweicce.projectId.placeholder")}}
          <p class="text-info text-small m-0">{{t "clusterNew.huaweicce.projectId.help" htmlSafe=true}}</p>
        </div>
      </div>
      {{#unless authConfigred}}
        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.accessKey.label"}}{{field-required}}
            </label>
            {{input type="text"
              value=config.accessKey
              classNames="form-control"
              placeholder=(t "clusterNew.huaweicce.accessKey.placeholder")}}
            <p class="text-info text-small m-0">{{t "clusterNew.huaweicce.accessKey.help" htmlSafe=true}}</p>
          </div>
          <div class="col span-6 mb-0">
            <label class="acc-label">{{t "clusterNew.huaweicce.secretKey.label"}}{{field-required}}</label>
            {{input type="password"
              value=config.secretKey
              classNames="form-control"
              placeholder=(t "clusterNew.huaweicce.secretKey.placeholder")}}
          </div>
        </div>
      {{/unless}}
    {{/accordion-list-item}}
  {{/if}}
  {{#if (or (eq step 2) (eq step 3))}}
    {{#accordion-list-item title=(t "clusterNew.huaweicce.access.title")
       detail=(t "clusterNew.huaweicce.access.detail")
       expandOnInit=false
       expandAll=al.expandAll
       expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.region.label"}}
          </label>
          <div>{{config.zone}}</div>
        </div>
        <div class="col span-6 mb-0">
          <label class="acc-label">{{t "clusterNew.huaweicce.projectId.label"}}</label>
          <div>{{config.projectId}}</div>
        </div>
      </div>
      {{#unless authConfigred}}
        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.accessKey.label"}}
            </label>
            <div>{{config.accessKey}}</div>
          </div>
          <div class="col span-6 mb-0">
            <label class="acc-label">{{t "clusterNew.huaweicce.secretKey.label"}}</label>
            <div class="text-muted text-italic">{{t "nodeDriver.amazoneks.sessionToken.provided"}}</div>
          </div>
        </div>
      {{/unless}}
    {{/accordion-list-item}}
    {{#accordion-list-item title=(t "clusterNew.huaweicce.clusterOption.title")
       detail=(t "clusterNew.huaweicce.clusterOption.detail")
       expandOnInit=true
       expandAll=al.expandAll
       expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.clusterType.label"}}
          </label>
          {{#if editing}}
            <div>
              {{config.clusterType}}
            </div>
          {{else}}
            {{new-select classNames="form-control"
              value=config.clusterType
              content=clusterType
            }}
          {{/if}}
        </div>
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.description.label"}}
          </label>
          {{input type="text"
            value=config.description
            classNames="form-control"
            placeholder=(t "clusterNew.huaweicce.description.placeholder")}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.masterVersion.label"}}{{field-required}}
          </label>
          {{#if editing}}
            <div>{{config.masterVersion}}</div>
          {{else}}
            {{searchable-select class="form-control"
              content=masterVersions
              value=config.masterVersion
              allowCustom=true
            }}
          {{/if}}
        </div>
        <div class="col span-6 mb-0">
          <label class="acc-label">{{t "clusterNew.huaweicce.managementScale.label"}}</label>
          {{#if editing}}
            <div>{{managementScaleDisplay}}</div>
          {{else}}
            {{new-select classNames="form-control"
              value=managementScale
              content=managementScaleContent
            }}
          {{/if}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.highAvailability.label"}}{{field-required}}
          </label>
          {{#if editing}}
            {{#if (or (eq highAvailabilityEnabled "s2") (eq highAvailabilityEnabled "t2"))}}
              <div>{{t "generic.enabled"}}</div>
            {{else}}
              <div>{{t "generic.disabled"}}</div>
            {{/if}}
          {{else}}
            <div class="radio">
              <label>
                {{#if (eq config.clusterType "BareMetal")}}
                  {{radio-button selection=highAvailabilityEnabled value="t2"}}
                  {{t "generic.enabled"}}
                {{else}}
                  {{radio-button selection=highAvailabilityEnabled value="s2"}}
                  {{t "generic.enabled"}}
                {{/if}}
              </label>
            </div>
            <div class="radio">
              <label>
                {{#if (eq config.clusterType "BareMetal")}}
                  {{radio-button selection=highAvailabilityEnabled value="t1"}}
                  {{t "generic.disabled"}}
                {{else}}
                  {{radio-button selection=highAvailabilityEnabled value="s1"}}
                  {{t "generic.disabled"}}
                {{/if}}
              </label>
            </div>
          {{/if}}
        </div>
        <div class="col span-6 mb-0">
          <label class="acc-label">{{t "clusterNew.huaweicce.containerNetworkMode.label"}}</label>
          {{#if editing}}
            <div>{{config.containerNetworkMode}}</div>
          {{else}}
            {{new-select classNames="form-control"
              value=config.containerNetworkMode
              content=containerNetworkModeContent
            }}
          {{/if}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.containerNetworkCidr.label"}}{{field-required}}
          </label>
          {{#if editing}}
            <div>
              {{#if config.containerNetworkCidr}}
                {{config.containerNetworkCidr}}
              {{else}}
                {{t "clusterNew.huaweicce.containerNetworkCidr.none"}}
              {{/if}}
            </div>
          {{else}}
            {{searchable-select class="form-control"
              content=containerNetworkCidrContent
              value=config.containerNetworkCidr
              allowCustom=true
            }}
          {{/if}}
        </div>
        <div class="col span-6 mb-0">
          <label class="acc-label">{{t "clusterNew.huaweicce.vpcId.label"}}{{field-required}}</label>
          {{#if editing}}
            <div>
              {{editedVpcName}}
            </div>
          {{else}}
            {{new-select classNames="form-control"
              content=vpcContent
              value=config.vpcId
            }}
          {{/if}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">
            {{t "clusterNew.huaweicce.subnetId.label"}}{{field-required}}
          </label>
          {{#if editing}}
            <div>
              {{editedSubnetName}}
            </div>
          {{else}}
            {{#if (gt subnetContent.length 0)}}
              {{new-select classNames="form-control"
                content=subnetContent
                value=config.subnetId
              }}
            {{else}}
              <div style="mt-10">{{t "clusterNew.huaweicce.subnetId.none"}}</div>
            {{/if}}
          {{/if}}
        </div>
        {{#if (eq config.clusterType "BareMetal")}}
          <div class="col span-6 mb-0">
            <label class="acc-label">{{t "clusterNew.huaweicce.highwaySubnet.label"}}</label>
            {{#if (gt networkContent.length 0)}}
              {{#if editing}}
                <div>
                  {{config.highwaySubnet}}
                </div>
              {{else}}
                {{new-select classNames="form-control"
                  content=networkContent
                  value=config.highwaySubnet
                }}
              {{/if}}
            {{else}}
              <div style="margin-top: 10px;">{{t "clusterNew.huaweicce.highwaySubnet.none"}}</div>
            {{/if}}
          </div>
        {{/if}}
      </div>
      <div class="row">
        <div class="col span-6 mb-0">
          <label class="acc-label">{{t "clusterNew.huaweicce.externalServerEnabled.label"}}</label>
          {{#if editing}}
            {{#if config.externalServerEnabled}}
              <div>{{t "generic.enabled"}}</div>
            {{else}}
              <div>{{t "generic.disabled"}}</div>
            {{/if}}
          {{else}}
            <div class="radio">
              <label class="text-muted">
                {{radio-button
                  selection=config.externalServerEnabled
                  value=true
                  disabled=true
                }}
                {{t "clusterNew.huaweicce.externalServerEnabled.enabled"}}
              </label>
            </div>
            <div class="radio">
              <label>
                {{radio-button selection=config.externalServerEnabled value=false}}
                {{t "clusterNew.huaweicce.externalServerEnabled.disabled"}}
              </label>
            </div>
          {{/if}}
        </div>
        {{#if config.externalServerEnabled}}
          <div class="col span-6">
            <label class="acc-label">{{t "clusterNew.huaweicce.clusterEipId.label"}}</label>
            {{#if editing}}
              <div>{{clusterEipName}}</div>
            {{else}}
              {{new-select
                classNames="form-control"
                prompt=(t "clusterNew.huaweicce.clusterEipId.prompt")
                value=config.clusterEipId
                content=eipIdContent
              }}
            {{/if}}
          </div>
        {{/if}}
      </div>
      <div class="row">
        <div class="col span-12 mb-0">
          <label class="acc-label">{{t "clusterNew.huaweicce.clusterLabels.label"}}</label>
          {{#if editing}}
            {{#if (gt config.labels.length 0)}}
              {{huawei-user-labels
                readOnly=true
                initialLabels=config.labels
              }}
            {{else}}
              <div>{{t "clusterNew.huaweicce.clusterLabels.none"}}</div>
            {{/if}}
          {{else}}
            {{huawei-user-labels setLabels=(action "setLabels")}}
          {{/if}}
        </div>
      </div>
    {{/accordion-list-item}}
    {{#if (eq step 3)}}
      {{#accordion-list-item title=(t "clusterNew.huaweicce.nodeOption.title")
         detail=(t "clusterNew.huaweicce.nodeOption.detail")
         expandOnInit=true
         showExpand=false
         expandAll=al.expandAll
         expand=(action expandFn)
      }}
        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.availableZone.label"}}
            </label>
            {{#if editing}}
              <div>{{config.availableZone}}</div>
            {{else}}
              {{new-select classNames="form-control"
                content=availableZoneContent
                value=config.availableZone
              }}
            {{/if}}
          </div>
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.billingMode.label"}}
            </label>
            {{#if editing}}
              <div>{{billingModeName}}</div>
            {{else}}
              {{searchable-select class="form-control"
                content=billingModeContent
                value=config.billingMode
              }}
            {{/if}}
          </div>
        </div>
        {{#if (eq config.billingMode 2)}}
          <div class="row">
            <div class="col span-6 mb-0">
              <label class="acc-label">
                {{t "clusterNew.huaweicce.validityPeriod.label"}}
              </label>
              {{#if editing}}
                <div>{{validityPeriodName}}</div>
              {{else}}
                {{searchable-select classNames="form-control"
                  content=validityPeriodContent
                  value=validityPeriod
                }}
              {{/if}}
            </div>
            <div class="col span-6 mb-0">
              <label class="acc-label">
                {{t "clusterNew.huaweicce.bmsIsAutoRenew.label"}}
              </label>
              {{#if editing}}
                <div>{{bmsIsAutoRenewName}}</div>
              {{else}}
                <div class="radio">
                  <label>
                    {{radio-button selection=config.bmsIsAutoRenew value="false"}}
                    {{t "generic.disabled"}}
                  </label>
                </div>
                <div class="radio">
                  <label>
                    {{radio-button selection=config.bmsIsAutoRenew value="true"}}
                    {{t "generic.enabled"}}
                  </label>
                </div>
              {{/if}}
            </div>
          </div>
        {{/if}}
        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.dataVolumeType.label"}}
            </label>
            {{#if editing}}
              <div>{{config.dataVolumeType}}</div>
            {{else}}
              {{new-select classNames="form-control"
                value=config.dataVolumeType
                content=volumeTypeContent
              }}
            {{/if}}
          </div>
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.dataVolumeSize.label"}}
            </label>
            <div class="input-group">
              {{#if editing}}
                <div>{{config.dataVolumeSize}}{{t "generic.gigabyte"}}</div>
              {{else}}
                {{input-number min=100 value=config.dataVolumeSize max=32768}}
                <span class="input-group-addon bg-default">{{t "generic.gigabyte"}}</span>
              {{/if}}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.rootVolumeType.label"}}
            </label>
            {{#if editing}}
              <div>{{config.rootVolumeType}}</div>
            {{else}}
              {{new-select classNames="form-control"
                value=config.rootVolumeType
                content=volumeTypeContent
              }}
            {{/if}}
          </div>
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.rootVolumeSize.label"}}
            </label>
            <div class="input-group">
              {{#if editing}}
                <div>{{config.rootVolumeSize}}{{t "generic.gigabyte"}}</div>
              {{else}}
                {{input-number min=40 value=config.rootVolumeSize max=1024}}
                <span class="input-group-addon bg-default">{{t "generic.gigabyte"}}</span>
              {{/if}}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col span-6 mb-0">
            <label class="acc-label">{{t "clusterNew.huaweicce.nodeFlavor.label"}}</label>
            {{#if editing}}
              <div>{{config.nodeFlavor}}</div>
            {{else}}
              {{new-select classNames="form-control"
                value=config.nodeFlavor
                content=nodeFlavorContent
              }}
            {{/if}}
          </div>
          <div class="col span-6 mb-0">
            <label class="acc-label">
              {{t "clusterNew.huaweicce.nodeCount.label"}}
            </label>
            {{input-number min=0 value=config.nodeCount max=nodeCountMax}}
          </div>
        </div>
        <div class="row">
          <div class="col span-6">
            <label class="acc-label">{{t "clusterNew.huaweicce.nodeOperationSystem.label"}}</label>
            {{#if editing}}
              <div>{{config.nodeOperationSystem}}</div>
            {{else}}
              {{new-select classNames="form-control"
                value=config.nodeOperationSystem
                content=nodeOperationSystemContent
              }}
            {{/if}}
          </div>
          <div class="col span-6">
            <label class="acc-label">{{t "clusterNew.huaweicce.ssh.label"}}</label>
            {{#if editing}}
              <div>{{editedSshName}}</div>
            {{else}}
              {{new-select classNames="form-control"
                value=config.sshKey
                content=sshkeyContent
              }}
            {{/if}}
          </div>
        </div>
        {{#unless editing}}
          <div class="row">
            <div class="col span-6">
              <label class="acc-label">{{t "clusterNew.huaweicce.eip.label"}}</label>
              <div class="radio">
                <label>
                  {{radio-button selection=eipSelection value="none"}}
                  {{t "clusterNew.huaweicce.eipSelection.none"}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{radio-button selection=eipSelection value="new"}}
                  {{t "clusterNew.huaweicce.eipSelection.new"}}
                </label>
              </div>
              <div class="radio">
                <label class={{unless (gt eipIdContent.length 0) "text-muted"}}>
                  {{radio-button selection=eipSelection value="exist" disabled=(not (gt eipIdContent.length 0))}}
                  {{t "clusterNew.huaweicce.eipSelection.exist"}}
                  {{#unless (gt eipIdContent.length 0)}} &mdash; {{t "clusterNew.huaweicce.eipIds.none"}}
                  {{/unless}}
                </label>
              </div>
            </div>
            <div class="col span-6">
              {{#if (eq eipSelection "new")}}
                <label class="acc-label">
                  {{t "clusterNew.huaweicce.eipCount.label"}}
                </label>
                {{input-number min=1 value=config.eipCount}}
                <label class="acc-label">
                  {{t "clusterNew.huaweicce.eipType.label"}}
                </label>
                {{new-select classNames="form-control"
                  value=config.eipType
                  content=eipTypeContent
                }}
                <label class="acc-label">
                  {{t "clusterNew.huaweicce.eipShareType.label"}}
                </label>
                {{new-select classNames="form-control"
                  value=config.eipShareType
                  content=eipShareTypeContent
                }}
                <label class="acc-label">{{t "clusterNew.huaweicce.eipChargeMode.label"}}</label>
                {{new-select classNames="form-control"
                  value=config.eipChargeMode
                  content=eipChargeModeContent
                }}
                <label class="acc-label">{{t "clusterNew.huaweicce.eipBandwidthSize.label"}}</label>
                <div class="input-group">
                  {{input-number min=1 value=config.eipBandwidthSize max=100}}
                  <span class="input-group-addon bg-default">{{t "generic.mbitS"}}</span>
                </div>
              {{/if}}
              {{#if (eq eipSelection "exist")}}
                <label class="acc-label">
                  {{t "clusterNew.huaweicce.eipIds.label"}}
                </label>
                <select class="form-control existing-eips" multiple="true" onchange={{action "multiEipSelect"}}>
                  {{#each eipIdContent as |choice|}}
                    <option value={{choice.value}} selected={{array-includes config.eipIds choice.value}}>{{choice.label}}</option>
                  {{/each}}
                </select>
              {{/if}}
            </div>
          </div>
          <div class="row">
            <div class="col span-12 mt-0">
              <label class="acc-label">{{t "clusterNew.huaweicce.authentiactionMode.label"}}</label>
              <div class="radio">
                <label>
                  {{radio-button
                    selection=config.authentiactionMode
                    value="rbac"
                  }}
                  {{t "clusterNew.huaweicce.authentiactionMode.rbac"}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{radio-button
                    selection=config.authentiactionMode
                    value="authenticating_proxy"
                  }}
                  {{t "clusterNew.huaweicce.authentiactionMode.authenticating_proxy"}}
                </label>
              </div>
              {{#if (eq config.authentiactionMode "authenticating_proxy")}}
                <div class="clearfix">
                  <label class="acc-label pt-5">{{t "clusterNew.huaweicce.authenticatingProxyCa.label"}}{{field-required}}</label>
                </div>
                {{input-text-file
                  classNames="box"
                  value=authenticatingProxyCa
                  multiple=true
                  canChangeName=false
                  accept="application/x-x509-ca-cert,text/plain,.pem,.crt"
                  minHeight=60
                  placeholder="newCertificate.cert.placeholder"
                  shouldChangeName=false
                }}
              {{/if}}
            </div>
          </div>
          <div class="row">
            <div class="col span-12 mb-0">
              <label class="acc-label">{{t "clusterNew.huaweicce.nodeLabels.label"}}</label>
              {{huawei-user-labels
                setLabels=(action "setNodeLabels")
                expandAll=al.expandAll
                expand=(action expandFn)
                detailKey="formUserLabels.nodeDetail"
              }}
            </div>
          </div>
        {{/unless}}
      {{/accordion-list-item}}
    {{/if}}
  {{/if}}
{{/accordion-list}}
{{top-errors errors=errors}}
{{top-errors errors=otherErrors}}
{{top-errors errors=clusterErrors}}
{{#if (eq step 1)}}
  {{save-cancel
    createLabel="clusterNew.huaweicce.checkAccount"
    savingLabel="clusterNew.huaweicce.checkingAccount"
    save=(action "checkAccount")
    cancel=close
  }}
{{/if}}
{{#if (eq step 2)}}
  {{save-cancel
    createLabel="clusterNew.huaweicce.configureNode"
    savingLabel="clusterNew.huaweicce.configuringNode"
    save=(action "configreNode")
    cancel=close
  }}
{{/if}}
{{#if (eq step 3)}}
  {{save-cancel
    editing=(eq mode "edit")
    save=(action "driverSave")
    cancel=close
  }}
{{/if}}