{{#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="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="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="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="save"
        cancel=close
    }}
  {{/if}}
  {{top-errors errors=errors}}
  {{top-errors errors=otherErrors}}
  {{top-errors errors=clusterErrors}}
{{/accordion-list}}