{{#accordion-list showExpandAll=false as | al expandFn |}}
  <div class="over-hr">
    <span>
      {{driverOptionsTitle}}
    </span>
  </div>

  {{#accordion-list-item
     title=(t "nodeDriver.aliyunecs.accountSection.label")
     detail=(t "nodeDriver.aliyunecs.accountSection.detail")
     expandAll=expandAll
     expand=(action expandFn)
     expandOnInit=true
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.aliyunecs.accessKey.label"}}{{field-required}}
        </label>
        {{#input-or-display
           editable=(eq step 1)
           value=config.accessKeyId
        }}
          {{input
            type="text"
            class="form-control"
            value=config.accessKeyId
            placeholder=(t "nodeDriver.aliyunecs.accessKey.placeholder")
          }}
        {{/input-or-display}}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.aliyunecs.accessKeySecret.label"}}{{field-required}}
        </label>
        {{#if (eq step 1)}}
          {{input
            type="password"
            class="form-control"
            value=config.accessKeySecret
            placeholder=(t "nodeDriver.aliyunecs.accessKeySecret.placeholder")
          }}
        {{else}}
          <div class="text-muted text-italic">
            {{t "nodeDriver.aliyunecs.accessKeySecret.provided"}}
          </div>
        {{/if}}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.aliyunecs.apiEndpoint.label"}}
        </label>
        {{#input-or-display
            editable=(eq step 1)
            value=config.apiEndpoint
        }}
          <Input
            @type="checkbox"
            @classNames="form-control"
            @checked={{showCustomApiEndpoint}}
          />
          {{#if showCustomApiEndpoint}} 
            <Input
              @type="text"
              @value={{config.apiEndpoint}}
              @classNames="form-control"
              @placeholder={{t "nodeDriver.aliyunecs.apiEndpoint.placeholder"}}
            />
          {{/if}}
        {{/input-or-display}}
      </div>
    </div>
  {{/accordion-list-item}}

  {{#if (eq step 1)}}
    {{top-errors errors=errors}}
    {{save-cancel
      save=(action "alyLogin")
      cancel=(action "cancel")
      createLabel="nodeDriver.aliyunecs.accountSection.next"
      savingLabel="nodeDriver.aliyunecs.accountSection.loading"
    }}
  {{/if}}

  <div class="{{unless (gte step 2) "hide"}}">
    {{#accordion-list-item
       title=(t "nodeDriver.aliyunecs.networkSection.label")
       detail=(t "nodeDriver.aliyunecs.networkSection.detail")
       expandAll=expandAll
       expand=(action expandFn)
       expandOnInit=true
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.region.label"}}
          </label>
          {{#input-or-display editable=(eq step 2) value=config.region}}
            {{new-select
              classNames="form-control"
              content=regions
              value=config.region
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.zone.label"}}
          </label>
          {{#input-or-display editable=(eq step 2) value=config.zone}}
            {{new-select
              classNames="form-control"
              content=zones
              value=config.zone
              optionLabelPath="raw.LocalName"
              prompt="nodeDriver.aliyunecs.zone.prompt"
              localizedPrompt=true
            }}
          {{/input-or-display}}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.vpcId.label"}}
          </label>
          {{#input-or-display editable=(eq step 2) value=config.vpcId}}
            {{new-select
              classNames="form-control"
              content=vpcs
              value=config.vpcId
              prompt="nodeDriver.aliyunecs.vpcId.prompt"
              localizedPrompt=true
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.securityGroup.label"}}
          </label>
          {{#input-or-display editable=(eq step 2) value=config.securityGroup}}
            {{new-select
              classNames="form-control"
              content=securityGroups
              value=config.securityGroup
              prompt="nodeDriver.aliyunecs.securityGroup.prompt"
              localizedPrompt=true
            }}
            {{#if (or (not config.securityGroup) (eq config.securityGroup "docker-machine"))}}
              <p class="help-block">
                {{t
                  "nodeDriver.aliyunecs.securityGroup.defaultCreate"
                  groupName="docker-machine"
                  htmlSafe=true
                }}
              </p>
            {{/if}}
          {{/input-or-display}}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.vswitchId.label"}}
          </label>
          {{#input-or-display editable=(eq step 2) value=config.vswitchId}}
            {{new-select
              classNames="form-control"
              content=filteredVSwitches
              value=config.vswitchId
              prompt="nodeDriver.aliyunecs.vswitchId.prompt"
              localizedPrompt=true
            }}
          {{/input-or-display}}
        </div>

        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.privateAddressOnly.label"}}
          </label>
          {{#input-or-display editable=(eq step 2) value=config.privateAddressOnly}}
            <div>
              {{input
                type="checkbox"
                class="form-control"
                checked=config.privateAddressOnly
              }}
            </div>
          {{/input-or-display}}
        </div>
      </div>
    {{/accordion-list-item}}

    {{#if (eq step 2)}}
      {{top-errors errors=errors}}
      {{save-cancel
        save=(action "loadStorageTypes")
        cancel=(action "cancel")
        createLabel="nodeDriver.aliyunecs.networkSection.next"
        savingLabel="nodeDriver.aliyunecs.networkSection.loading"
      }}
    {{/if}}
  </div>

  <div class="{{unless (gte step 3) "hide"}}">
    {{#accordion-list-item
       title=(t "nodeDriver.aliyunecs.storageSection.label")
       detail=(t "nodeDriver.aliyunecs.storageSection.detail")
       expandAll=expandAll
       expand=(action expandFn)
       expandOnInit=true
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.ioOptimized.label"}}
          </label>
          {{#input-or-display editable=(eq step 3) value=config.ioOptimized}}
            <div>
              <label class="mr-20 hand">
                {{radio-button
                  selection=config.ioOptimized
                  value="optimized"
                }}
                {{t "nodeDriver.aliyunecs.ioOptimized.optimized"}}
              </label>
              <label class="hand">
                {{radio-button
                  selection=config.ioOptimized
                  value="none"
                }}
                {{t "nodeDriver.aliyunecs.ioOptimized.none"}}
              </label>
            </div>
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.systemDiskCategory.label"}}
          </label>
          {{#input-or-display editable=(eq step 3) value=config.systemDiskCategory}}
            {{new-select
              classNames="form-control"
              content=diskCategoryChoices
              optionLabelPath="value"
              value=config.systemDiskCategory
            }}
          {{/input-or-display}}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.dataDiskCategory.label"}}
          </label>
          {{#input-or-display editable=(eq step 3) value=config.diskCategory}}
            {{new-select
              classNames="form-control"
              content=diskCategoryChoices
              optionLabelPath="value"
              value=config.diskCategory
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.dataDiskSize.label"}}
          </label>
          {{#input-or-display editable=(eq step 3) value=config.diskSize}}
            <div class="input-group">
              {{input
                type="text"
                class="form-control"
                value=config.diskSize
                placeholder=(t "nodeDriver.aliyunecs.dataDiskSize.placeholder")
              }}
              <div class="input-group-addon bg-default">GB</div>
            </div>
          {{/input-or-display}}
        </div>
      </div>
    {{/accordion-list-item}}

    {{#if (eq step 3)}}
      {{top-errors errors=errors}}
      {{save-cancel
        save=(action "loadInstanceTypes")
        cancel=(action "cancel")
        createLabel="nodeDriver.aliyunecs.storageSection.next"
        savingLabel="nodeDriver.aliyunecs.storageSection.loading"
      }}
    {{/if}}
  </div>

  <div class="{{unless (gte step 4) "hide"}}">
    {{#accordion-list-item
       title=(t "nodeDriver.aliyunecs.instanceOptionsSection.label")
       detail=(t "nodeDriver.aliyunecs.instanceOptionsSection.detail")
       expandAll=expandAll
       expand=(action expandFn)
       expandOnInit=true
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.instanceDescription.label"}}
          </label>
          {{input
            type="text"
            class="form-control"
            value=config.description
            placeholder=(t "nodeDriver.aliyunecs.instanceDescription.placeholder")
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.instanceType.label"}}
          </label>
          {{new-select
            classNames="form-control"
            content=instanceTypes
            value=config.instanceType
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.systemImage.label"}}
          </label>
          {{new-select
            classNames="form-control"
            content=images
            optionValuePath="value"
            value=config.imageId
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.aliyunSLB.label"}}
          </label>
          <Input
            @type="text"
            @value={{config.slbId}}
            @classNames="form-control"
            @placeholder={{t "nodeDriver.aliyunecs.aliyunSLB.placeholder"}}
          />
        </div>   
      </div>

      {{#unless config.privateAddressOnly}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.internetMaxBandwidth.label"}}
          </label>
          <div class="input-group">
            {{input-integer
              min=1
              max=100
              class="form-control"
              value=config.internetMaxBandwidth
              placeholder=(t "nodeDriver.aliyunecs.internetMaxBandwidth.placeholder")
            }}
            <div class="input-group-addon bg-default">Mbps</div>
          </div>
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.aliyunecs.internetChargeType.label"}}
          </label>
            <div>
              <label class="mr-20 hand">
                <RadioButton
                  @selection={{config.internetChargeType}}
                  @value="PayByBandwidth"
                />
                {{t "nodeDriver.aliyunecs.internetChargeType.payByBandwidth"}}
              </label>
              <label class="hand">
                <RadioButton
                  @selection={{config.internetChargeType}}
                  @value="PayByTraffic"
                />
                {{t "nodeDriver.aliyunecs.internetChargeType.payByTraffic"}}
              </label>
            </div>
        </div>
      </div>
      {{/unless}}

      <div class="row">
        <div class="col span-6">
          {{form-value-array
            initialValues=config.tag
            addActionLabel="nodeDriver.aliyunecs.tags.addActionLabel"
            valueLabel="nodeDriver.aliyunecs.tags.valueLabel"
            valuePlaceholder="nodeDriver.aliyunecs.tags.placeholder"
            changed=(action (mut config.tag))
          }}
        </div>
      </div>
    {{/accordion-list-item}}

    <div class="over-hr">
      <span>
        {{templateOptionsTitle}}
      </span>
    </div>

    {{form-name-description
      model=model
      nameRequired=true
      rowClass="row mb-10"
    }}

    {{form-user-labels
      initialLabels=labelResource.labels
      setLabels=(action "setLabels")
      expand=(action expandFn)
    }}

    {{form-node-taints
      model=model
      expand=(action expandFn)
    }}

    {{form-engine-opts
      machine=model
      showEngineUrl=showEngineUrl
    }}

    {{top-errors errors=errors}}
    {{save-cancel
      save=(action "save")
      cancel=(action "cancel")
      editing=editing
    }}
  </div>
{{/accordion-list}}