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

  {{#accordion-list-item
     title=(t "nodeDriver.amazonec2.access.title")
     detail=(t "nodeDriver.amazonec2.access.detail")
     expandAll=expandAll
     expand=(action expandFn)
     expandOnInit=true
  }}
    {{#unless hideRegionSelection}}
      <div class="row">
        <div class="col span-4">
          <label class="acc-label" for="amazonec2-region-select">
            {{t "nodeDriver.amazonec2.region.label"}}
          </label>
          {{#if (eq step 1)}}
            <select
              id="amazonec2-region-select"
              class="form-control"
              onchange={{action (mut config.region) value="target.value"}}
            >
              {{#each regionChoices as |choice|}}
                <option
                  value={{choice}}
                  selected={{eq config.region choice}}
                >
                  {{choice}}
                </option>
              {{/each}}
            </select>
          {{else}}
            <div>{{config.region}}</div>
          {{/if}}
        </div>
      </div>
    {{/unless}}
    {{#if (eq step 1)}}
      {{form-auth-cloud-credential
        cancel=(action "cancel")
        cloudCredentials=cloudCredentials
        createLabel="nodeDriver.amazonec2.access.next"
        driverName=driverName
        parseAndCollectErrors=(action "errorHandler")
        finishAndSelectCloudCredential=(action "finishAndSelectCloudCredential")
        primaryResource=primaryResource
        progressStep=(action "awsLogin")
        region=config.region
        showAddCloudCredential=hideRegionSelection
      }}
      {{top-errors errors=errors}}
    {{else}}
      <div class="row">
        <div class="col span-4">
          <label class="acc-label">
            {{t "nodeDriver.amazonec2.accessKey.label"}}
          </label>
          <div>{{config.accessKey}}</div>
        </div>

        <div class="col span-4">
          <label class="acc-label">
            {{t "nodeDriver.amazonec2.secretKey.label"}}
          </label>
          <div class="text-muted text-italic">
            {{t "nodeDriver.amazonec2.secretKey.provided"}}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="span-8 offset-4">
          <p class="text-info text-small m-0">
            {{t "nodeDriver.amazonec2.access.help"}}
          </p>
        </div>
      </div>
    {{/if}}
  {{/accordion-list-item}}

  <div class="{{unless (gte step 2) "hide"}}">
    {{#accordion-list-item
       title=(t "nodeDriver.amazonec2.zone.title")
       detail=(t "nodeDriver.amazonec2.zone.detail")
       expandAll=expandAll
       expand=(action expandFn)
       expandOnInit=true
    }}
      {{#if (eq step 2)}}
        <div class="row">
          <label class="acc-label" for="amazonec2-availabilityZone">
            {{t "nodeDriver.amazonec2.availabilityZone"}}
          </label>
          <select
            class="form-control"
            id="amazonec2-availabilityZone"
            onchange={{action (mut selectedZone) value="target.value"}}
          >
            {{#each zoneChoices as |choice|}}
              <option
                value={{choice}}
                selected={{eq selectedZone choice}}
              >
                {{choice}}
              </option>
            {{/each}}
          </select>
        </div>

        <div class="row">
          <label class="acc-label pt-20">
            {{t "nodeDriver.amazonec2.subnet"}}
          </label>
          {{#if subnetChoices.length}}
            {{#each subnetChoices as |choice|}}
              {{#if choice.isVpc}}
                <hr class="mt-20 mb-20" />
                <div class="radio">
                  <label class="acc-label pb-0">
                    {{radio-button
                      selection=selectedSubnet
                      value=choice.value
                    }}
                    {{choice.label}}
                    {{#each choice.tags as |tag|}}
                      <span class="tag-xs bg-info mr-5">
                        <i class="icon icon-tag"></i>
                        {{tag}}
                      </span>
                    {{/each}}
                  </label>
                </div>
            {{else}}
                <div class="radio">
                  <label class="ml-20">
                    {{radio-button
                      selection=selectedSubnet
                      value=choice.value
                    }}
                    <i
                      class="icon icon-level-down text-muted"
                      style="transform: scaleX(-1) rotate(90deg);"
                    ></i>
                    {{choice.label}}
                    {{#each choice.tags as |tag|}}
                      <span class="tag-xs bg-info mr-5">
                        <i class="icon icon-tag"></i>
                        {{tag}}
                      </span>
                    {{/each}}
                  </label>
                </div>
              {{/if}}
            {{/each}}
          {{else}}
            {{t "nodeDriver.amazonec2.noSubnet"}}
          {{/if}}
        </div>
      {{else}}
        <div class="row">
          <div class="span-6">
            <label class="acc-label">
              {{t "nodeDriver.amazonec2.availabilityZone"}}
            </label>
            {{config.region}}{{config.zone}}
          </div>
          <div class="span-6">
            <label class="acc-label pt-20">
              {{t "nodeDriver.amazonec2.subnet"}}
            </label>
            {{#if config.subnetId}}
              {{config.subnetId}}
            {{else}}
              {{config.vpcId}}
            {{/if}}
          </div>
        </div>
      {{/if}}
    {{/accordion-list-item}}

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

  <div class="{{unless (gte step 3) "hide"}}">
    {{#accordion-list-item
       title=(t "nodeDriver.amazonec2.securityGroup.title")
       detail=(t "nodeDriver.amazonec2.securityGroup.detail")
       expandAll=expandAll
       expand=(action expandFn)
       expandOnInit=true
    }}
      <div class="row">
        {{#if (eq step 3)}}
          <div class="radio pt-10">
            <label>
              {{radio-button
                selection=whichSecurityGroup
                value="default"
              }}
              {{t
                "nodeDriver.amazonec2.securityGroup.defaultCreate"
                groupName=defaultSecurityGroupName
                htmlSafe=true
              }}
            </label>
          </div>

          {{#if (and settings.isRancher (not isCustomSecurityGroup))}}
            <p class="text-info ml-20">
              <a href="{{settings.docsBase}}/installation/references/" target="_blank">
                {{t "nodeDriver.amazonec2.portHelp.link"}}
              </a>
              {{t "nodeDriver.amazonec2.portHelp.text"}}
            </p>
          {{/if}}

          <div class="radio pt-10">
            <label>
              {{radio-button
                selection=whichSecurityGroup
                value="custom"
              }}
              {{t "nodeDriver.amazonec2.securityGroup.choose"}}
            </label>
          </div>

          {{#if isCustomSecurityGroup}}
            <select
              class="form-control existing-security-groups"
              multiple="true"
              onchange={{action "multiSecurityGroupSelect" ""}}
            >
              {{#each allSecurityGroups as |choice|}}
                <option
                  value={{choice.name}}
                  selected={{array-includes selectedSecurityGroup choice.name}}
                >
                  {{choice.name}} ({{choice.id}})
                </option>
              {{/each}}
            </select>
          {{/if}}
        {{else}}
          <div>
            {{#if (is-array config.securityGroup)}}
              <div class="comma-seperated-list">
                {{#each config.securityGroup as |group|}}
                  <span>{{group}}</span>
                {{/each}}
              </div>
            {{else}}
              {{defaultSecurityGroupName}}
            {{/if}}
          </div>
        {{/if}}
      </div>
    {{/accordion-list-item}}

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

  <div class="{{unless (gte step 4) "hide"}}">
    {{#accordion-list-item
       title=(t "nodeDriver.amazonec2.instance.title")
       detail=(t "nodeDriver.amazonec2.instance.detail")
       expandAll=expandAll
       expand=(action expandFn)
       expandOnInit=true
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="amazonec2-instancetype">
            {{t "nodeDriver.amazonec2.instanceType.label"}}
          </label>
          {{new-select
            classNames="form-control"
            id="amazonec2-instancetype"
            value=config.instanceType
            content=instanceTypes
            optionValuePath="name"
            optionLabelPath="name"
            optionGroupPath="group"
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label" for="amazonec2-rootsize">
            {{t "nodeDriver.amazonec2.rootSize.label"}}
          </label>
          <div class="input-group">
            {{input
              id="amazonec2-rootsize"
              type="text"
              classNames="form-control"
              placeholder=""
              value=config.rootSize
            }}
            <span class="input-group-addon bg-default">
              {{t "nodeDriver.amazonec2.rootSize.unit"}}
            </span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="amazonec2-ami">
            {{t "nodeDriver.amazonec2.ami.label"}}
          </label>
          {{input
            id="amazonec2-ami"
            type="text"
            classNames="form-control"
            placeholder=(t "nodeDriver.amazonec2.ami.placeholder")
            value=config.ami
          }}
          {{#if settings.isRancher}}
            <p class="help-block">
              <a
                href="https://github.com/rancher/os/blob/master/README.md/#user-content-amazon"
                target="_blank"
                rel="noreferrer nofollow"
              >
                {{t "nodeDriver.amazonec2.ami.rancherList"}}
              </a>
            </p>
          {{/if}}
        </div>

        <div class="col span-6">
          <label class="acc-label" for="amazonec2-sshUser">
            {{t "nodeDriver.amazonec2.sshUser.label"}}
          </label>
          {{input
            id="amazonec2-sshUser"
            type="text"
            classNames="form-control"
            placeholder=(t "nodeDriver.amazonec2.sshUser.placeholder")
            value=config.sshUser
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="amazonec2-iam">
            {{t "nodeDriver.amazonec2.iam.label"}}
          </label>
          {{input
            id="amazonec2-iam"
            type="text"
            classNames="form-control"
            value=config.iamInstanceProfile
            placeholder=(t "nodeDriver.amazonec2.iam.placeholder")
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.amazonec2.privateIp.label"}}
          </label>
          <div class="checkbox">
            <label class="acc-label" for="amazonec2-privateip">
              {{input
                id="amazonec2-privateip"
                type="checkbox"
                checked=config.privateAddressOnly
              }}&nbsp;
              {{t "nodeDriver.amazonec2.onlyPrivate.label"}}
            </label>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.amazonec2.requestSpotInstance.label"}}
          </label>
          <div class="checkbox">
            <label class="acc-label" for="amazonec2-requestspotinstance">
              {{input
                id="amazonec2-requestspotinstance"
                type="checkbox"
                checked=config.requestSpotInstance
              }}&nbsp;
              {{t "nodeDriver.amazonec2.requestSpotInstance.enable"}}
            </label>
          </div>
        </div>

        {{#if config.requestSpotInstance}}
          <div class="col span-6">
            <label class="acc-label" for="amazonec2-spotprice">
              {{t "nodeDriver.amazonec2.spotPrice.label"}}
            </label>
            <div class="input-group">
              {{input
                id="amazonec2-spotprice"
                type="text"
                classNames="form-control"
                placeholder=""
                value=config.spotPrice
              }}
              <span class="input-group-addon bg-default">
                {{t "nodeDriver.amazonec2.spotPrice.unit"}}
              </span>
            </div>
          </div>
        {{/if}}
      </div>

      <div class="row">
        <div class="col span-12">
          {{form-key-value
            addActionLabel="nodeDriver.amazonec2.tags.addActionLabel"
            initialMap=tags
            changed=(action (mut tags))
          }}
        </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}}
