{{#accordion-list showExpandAll=false as | al expandFn |}}
  {{#accordion-list-item title=(t "clusterNew.tencenttke.access.title")
     detail=(t "clusterNew.tencenttke.access.detail")
     expandAll=expandAll
     expand=(action expandFn)
     expandOnInit=true
  }}
    <div class="row">
      <div class="col span-4">
        <label class="acc-label">
          {{t "clusterNew.tencenttke.region.label"}}
        </label>
        {{#input-or-display editable=(and (eq step 1) isNew) value=config.region}}
          {{searchable-select class="form-control"
            content=regionChoices
            value=config.region
          }}
        {{/input-or-display}}
      </div>
      <div class="col span-4">
        <label class="acc-label">
          {{t "clusterNew.tencenttke.secretId.label"}}{{field-required}}
        </label>
        {{#input-or-display editable=(eq step 1) value=config.secretId}}
          {{input
            type="text"
            name="username"
            classNames="form-control"
            placeholder=(t "clusterNew.tencenttke.secretId.placeholder")
            value=config.secretId
          }}
        {{/input-or-display}}
      </div>
      <div class="col span-4">
        <label class="acc-label">
          {{t "clusterNew.tencenttke.secretKey.label"}}{{field-required}}
        </label>
        {{#if (eq step 1)}}
          {{input
            type="password"
            name="password"
            classNames="form-control"
            placeholder=(t "clusterNew.tencenttke.secretKey.placeholder")
            value=config.secretKey
          }}
        {{else}}
          <div class="text-muted text-italic">
            {{t "clusterNew.tencenttke.secretKey.provided"}}
          </div>
        {{/if}}
      </div>
    </div>
  {{/accordion-list-item}}
  {{#if (eq step 1)}}
    {{save-cancel editing=(eq mode "edit")
      save=(action "tencentLogin")
      cancel=close
      createLabel="clusterNew.tencenttke.access.next"
      savingLabel="clusterNew.tencenttke.access.loading"
    }}
  {{/if}}
  {{#if (gte step 2)}}
    {{#accordion-list-item title=(t "clusterNew.tencenttke.cluster.title")
       detail=(t "clusterNew.tencenttke.cluster.detail")
       showExpand=false
       expandOnInit=true
       expandAll=al.expandAll
       expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.version.label"}}
          </label>
          {{#input-or-display editable=(and (eq step 2) isNew) value=config.clusterVersion}}
            {{searchable-select class="form-control"
              content=versionChoices
              value=config.clusterVersion
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.nodeCount.label"}}{{field-required}}
          </label>
          {{#input-or-display editable=(eq step 2) value=config.nodeCount}}
            {{input-integer
              min=1
              max=100
              value=config.nodeCount
              classNames="form-control"
              placeholder=(t "clusterNew.tencenttke.nodeCount.placeholder")
            }}
            <p class="help-block">
              {{t "clusterNew.tencenttke.nodeCount.help"}}
            </p>
          {{/input-or-display}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.vpc.label"}}{{field-required}}
          </label>
          {{#input-or-display editable=(and (eq step 2) isNew) value=config.vpcId}}
            {{searchable-select class="form-control"
              content=vpcChoices
              value=config.vpcId
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.cidr.label"}}{{field-required}}
          </label>
          {{#input-or-display editable=(and (eq step 2) isNew) value=config.clusterCidr}}
            {{input
              type="text"
              value=config.clusterCidr
              placeholder=(t "clusterNew.tencenttke.cidr.placeholder")
            }}
          {{/input-or-display}}
        </div>
      </div>
    {{/accordion-list-item}}
    {{#if (eq step 2)}}
      {{save-cancel editing=(eq mode "edit")
        save=(action "loadNodeConfig")
        cancel=close
        createLabel="clusterNew.tencenttke.cluster.next"
        savingLabel="clusterNew.tencenttke.cluster.loading"
      }}
    {{/if}}
  {{/if}}
  {{#if (gte step 3)}}
    {{#accordion-list-item title=(t "clusterNew.tencenttke.node.title")
       detail=(t "clusterNew.tencenttke.node.detail")
       showExpand=false
       expandOnInit=true
       expandAll=al.expandAll
       expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.zone.label"}}{{field-required}}
          </label>
          {{#if (and (eq step 3) isNew)}}
            {{searchable-select class="form-control"
              content=zoneChoices
              value=config.zoneId
            }}
          {{else}}
            <div>{{selectedZone.label}}</div>
          {{/if}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.subnet.label"}}{{field-required}}
          </label>
          {{#input-or-display editable=(and (eq step 3) isNew) value=config.subnetId}}
            {{searchable-select class="form-control"
              content=subnetChoices
              value=config.subnetId
            }}
          {{/input-or-display}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.instanceType.label"}}{{field-required}}
          </label>
          {{#input-or-display editable=(and (eq step 3) isNew) value=config.instanceType}}
            {{searchable-select class="form-control"
              content=instanceChoices
              value=config.instanceType
            }}
          {{/input-or-display}}
        </div>
      </div>
    {{/accordion-list-item}}
    {{#if (eq step 3)}}
      {{save-cancel editing=(eq mode "edit")
        save=(action "loadInstanceConfig")
        cancel=close
        createLabel="clusterNew.tencenttke.node.next"
        savingLabel="clusterNew.tencenttke.node.loading"
      }}
    {{/if}}
  {{/if}}
  {{#if (gte step 4)}}
    {{#accordion-list-item title=(t "clusterNew.tencenttke.instance.title")
       detail=(t "clusterNew.tencenttke.instance.detail")
       showExpand=false
       expandOnInit=true
       expandAll=al.expandAll
       expand=(action expandFn)
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.os.label"}}
          </label>
          {{#input-or-display editable=isNew value=config.osName}}
            {{searchable-select class="form-control"
              content=osChoices
              value=config.osName
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.securityGroup.label"}}{{field-required}}
          </label>
          {{#input-or-display editable=isNew value=config.sgId}}
            {{searchable-select class="form-control"
              content=sgChoices
              value=config.sgId
            }}
          {{/input-or-display}}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.rootType.label"}}
          </label>
          {{#input-or-display editable=isNew value=config.rootType}}
            {{searchable-select class="form-control"
              content=rootDiskChoices
              localizedLabel=true
              value=config.rootType
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.rootSize.label"}}
          </label>
          <div class="input-group">
            {{#input-or-display editable=isNew value=config.rootSize}}
              {{input-integer
                min=20
                max=50
                value=config.rootSize
                classNames="form-control"
                placeholder=(t "clusterNew.tencenttke.rootSize.placeholder")
              }}
            {{/input-or-display}}
            <span class="input-group-addon bg-default">{{t "generic.gigabyte"}}</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.storageType.label"}}
          </label>
          {{#input-or-display editable=isNew value=config.storageType}}
            {{searchable-select class="form-control"
              content=storageDiskChoices
              localizedLabel=true
              value=config.storageType
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.storageSize.label"}}
          </label>
          <div class="input-group">
            {{#input-or-display editable=isNew value=config.storageSize}}
              {{input-integer
                min=0
                value=config.storageSize
                classNames="form-control"
                placeholder=(t "clusterNew.tencenttke.storageSize.placeholder")
              }}
            {{/input-or-display}}
            <span class="input-group-addon bg-default">{{t "generic.gigabyte"}}</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.bandwidthType.label"}}
          </label>
          {{#input-or-display editable=isNew value=config.bandwidthType}}
            {{searchable-select class="form-control"
              content=bandWidthChoices
              localizedLabel=true
              value=config.bandwidthType
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.bandwidth.label"}}
          </label>
          <div class="input-group">
            {{#input-or-display editable=isNew value=config.bandwidth}}
              {{input-integer
                min=0
                value=config.bandwidth
                classNames="form-control"
                placeholder=(t "clusterNew.tencenttke.bandwidth.placeholder")
              }}
            {{/input-or-display}}
            <span class="input-group-addon bg-default">{{t "generic.mbps"}}</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterNew.tencenttke.keyPair.label"}}{{field-required}}
          </label>
          {{#input-or-display editable=isNew value=config.keyId}}
            {{searchable-select class="form-control"
              content=keyChoices
              value=config.keyId
            }}
          {{/input-or-display}}
        </div>
      </div>
    {{/accordion-list-item}}
    {{save-cancel
      editing=(eq mode "edit")
      save=(action "save")
      cancel=close
    }}
  {{/if}}
  {{top-errors errors=errors}}
  {{top-errors errors=otherErrors}}
  {{top-errors errors=clusterErrors}}
{{/accordion-list}}