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

  {{#accordion-list-item
    title=(t "nodeDriver.azure.access.title")
    detail=(t "nodeDriver.azure.access.detail")
    expandAll=expandAll
    expand=(action expandFn)
    expandOnInit=true
  }}
    {{form-auth-cloud-credential
      driverName=driverName
      parseAndCollectErrors=(action "errorHandler")
      primaryResource=primaryResource
      cloudCredentials=cloudCredentials
      finishAndSelectCloudCredential=(action "finishAndSelectCloudCredential")
      progressStep=(action "finishAndSelectCloudCredential")
      cancel=(action "cancel")
      hideSave=true
    }}

  {{/accordion-list-item}}

  {{#accordion-list-item
     title=(t "nodeDriver.azure.placement.title")
     detail=(t "nodeDriver.azure.placement.detail")
     expandAll=expandAll
     expand=(action expandFn)
     expandOnInit=true
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.environment.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=environments
          optionLabelPath="value"
          value=config.environment
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.region.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=regionChoices
          optionLabelPath="displayName"
          optionValuePath="name"
          value=config.location
        }}
      </div>
    </div>

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

      <div class="col span-6">
        <label class="acc-label" for="input-fault-domain-count">
          {{t "nodeDriver.azure.faultDomainCount.label"}}
        </label>
        {{input-number
          id="input-fault-domain-count"
          value=config.faultDomainCount
          min=1
          max=3
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.faultDomainCount.placeholder")
        }}
        <p class="help-block">
          {{t "nodeDriver.azure.faultDomainCount.helpText"}}
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label" for="input-update-domain-count">
          {{t "nodeDriver.azure.updateDomainCount.label"}}
        </label>
        {{input-number
          value=config.updateDomainCount
          id="input-update-domain-count"
          min=1
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.updateDomainCount.placeholder")
        }}
        <p class="help-block">
          {{t "nodeDriver.azure.updateDomainCount.helpText"}}
        </p>
      </div>

      <div class="col span-6">
        <label class="acc-label" for="input-resource-group">
          {{t "nodeDriver.azure.resourceGroup.label"}}
        </label>
        {{input
          type="text"
          id="input-resource-group"
          value=config.resourceGroup
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.resourceGroup.placeholder")
        }}
      </div>
    </div>
  {{/accordion-list-item}}

  {{#accordion-list-item
    title=(t "nodeDriver.azure.network.title")
    detail=(t "nodeDriver.azure.network.detail")
    expandAll=expandAll
    expand=(action expandFn)
    expandOnInit=true
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.subnet.label"}}
        </label>
        {{input
          type="text"
          value=config.subnet
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.subnet.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.subnetPrefix.label"}}
        </label>
        {{input
          type="text"
          value=config.subnetPrefix
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.subnetPrefix.placeholder")
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.vnet.label"}}
        </label>
        {{input
          type="text"
          value=config.vnet
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.vnet.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.staticPublicIp.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=publicIpChoices
          optionLabelPath="name"
          optionValuePath="value"
          value=publicIpChoice
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.privateIpAddress.label"}}
        </label>
        {{input
          type="text"
          value=config.privateIpAddress
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.privateIpAddress.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.usePrivateIp.label"}}
        </label>
        <div>
          {{input
            type="checkbox"
            checked=config.usePrivateIp
            disabled=privateSet
          }}
        </div>
      </div>
    </div>
  {{/accordion-list-item}}

  {{#accordion-list-item
    title=(t "nodeDriver.azure.instance.title")
    detail=(t "nodeDriver.azure.instance.detail")
    expandAll=expandAll
    expand=(action expandFn)
    expandOnInit=true
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.image.label"}}
        </label>
        {{input
          type="text"
          value=config.image
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.image.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.size.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=sizeChoices
          optionLabelPath="value"
          optionGroupPath="group"
          value=config.size
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.dockerPort.label"}}
        </label>
        {{input
          type="text"
          value=config.dockerPort
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.dockerPort.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.openPort.label"}}
        </label>
        {{input
          type="text"
          value=openPorts
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.openPort.placeholder")
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.sshUser.label"}}
        </label>
        {{input
          type="text"
          value=config.sshUser
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.sshUser.placeholder")
        }}
      </div>
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.storageType.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=storageTypeChoices
          optionLabelPath="name"
          optionValuePath="value"
          value=config.storageType
        }}
      </div>
    </div>

    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "nodeDriver.azure.managedDisks.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=diskChoices
          localizedLabel=true
          value=managedDisks
        }}
      </div>

      <div class="col span-6">
        <label class="acc-label" for="input-disk-size">
          {{t "nodeDriver.azure.diskSize.label"}}
        </label>
        {{input-number
          value=config.diskSize
          id="input-disk-size"
          min=1
          max=32767
          classNames="form-control"
          placeholder=(t "nodeDriver.azure.diskSize.placeholder")
        }}
      </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
  }}
{{/accordion-list}}
