<section class="horizontal-form">
  <form>
    <div class="container-fluid">
      <div class="over-hr r-mb20">
        <span>{{t "nodeDriver.exoscale.accountSection"}}</span>
      </div>

      <div class="row {{if (eq step 1) "form-group"}}">
        <div class="col-md-2 form-label">
          <label class="form-control-static">
            {{t "nodeDriver.exoscale.apiKey.label"}}
          </label>
        </div>
        <div class="col-md-10">
          {{#if (eq step 1)}}
            {{input
              type="text"
              name="username"
              classNames="form-control"
              placeholder=(t "nodeDriver.exoscale.apiKey.placeholder")
              value=config.apiKey
            }}
          {{else}}
            <div class="form-control-static">
              {{config.apiKey}}
            </div>
          {{/if}}
        </div>
      </div>
      <div class="row {{if (eq step 1) "form-group"}}">
        <div class="col-md-2 form-label">
          <label class="form-control-static">
            {{t "nodeDriver.exoscale.secretKey.label"}}
          </label>
        </div>
        <div class="col-md-10">
          {{#if (eq step 1)}}
            {{input
              type="password"
              name="password"
              classNames="form-control"
              placeholder=(t "nodeDriver.exoscale.secretKey.placeholder")
              value=config.apiSecretKey
            }}
          {{else}}
            <div class="form-control-static text-muted text-italic">
              {{t "nodeDriver.exoscale.secretKey.provided"}}
            </div>
          {{/if}}
          {{#if (eq step 1)}}
            <p class="help-block">
              {{t "nodeDriver.exoscale.accountHelp"}}
            </p>
          {{/if}}
        </div>
      </div>
    </div>
    {{#if (eq step 1)}}
      {{top-errors errors=errors}}
      {{save-cancel
        save=(action "exoscaleLogin")
        cancel=(action "cancel")
        createLabel="nodeDriver.exoscale.loginAction"
      }}
    {{/if}}
  </form>
</section>

<section class="horizontal-form r-pt0 {{if (not-eq step 2) "hide"}}">
  <div class="text-center">
    <i class="icon icon-spinner icon-spin"></i> {{t "nodeDriver.exoscale.loadingZone"}}
  </div>
</section>

<section class="horizontal-form r-pt0 {{unless (gte step 3) "hide"}}">
  <div class="container-fluid">
    <div class="over-hr r-mt20 r-mb20">
      <span>{{t "nodeDriver.exoscale.zoneSection"}}</span>
    </div>

    <div class="row {{if (eq step 3) "form-group"}}">
      <div class="col-md-2 form-label">
        <label class="form-control-static">
          {{t "nodeDriver.exoscale.zone.label"}}
        </label>
      </div>
      <div class="col-md-10">
        {{#if (eq step 3)}}
          {{#each allZones as |choice|}}
            <div class="radio r-pt10">
              <label>
                {{radio-button
                  selection=selectedZone
                  value=choice.id
                }}
                {{ choice.name }}
              </label>
            </div>
          {{/each}}
        {{else}}
          <div class="form-control-static">
            {{config.availabilityZone}}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
  {{#if (eq step 3)}}
    {{top-errors errors=errors}}
    {{save-cancel
      save=(action "selectZone")
      cancel=(action "cancel")
      createLabel="nodeDriver.exoscale.selectZoneAction"
    }}

  {{/if}}
</section>


<section class="horizontal-form r-pt0 {{unless (eq step 4) "hide"}}">
  <div class="text-center">
    <i class="icon icon-spinner icon-spin"></i> {{t "nodeDriver.exoscale.loadingSecurity"}}
  </div>
</section>

<section class="horizontal-form r-pt0 {{unless (gte step 5) "hide"}}">
  <div class="container-fluid">
    <div class="over-hr r-mt20 r-mb20">
      <span>{{t "nodeDriver.exoscale.securityGroupSection"}}</span>
    </div>

    <div class="row {{if (eq step 5) "form-group"}}">
      <div class="col-md-2 form-label">
        <label class="form-control-static">
          {{t "nodeDriver.exoscale.securityGroup.label"}}
        </label>
      </div>
      <div class="col-md-10">
        {{#if (eq step 5)}}
          <div class="radio r-pt10"><label>
            {{radio-button
              selection=whichSecurityGroup
              value="default"
            }}
            {{#if defaultSecurityGroup}}
              {{format-html-message "nodeDriver.exoscale.securityGroup.defaultExisting" groupName=defaultSecurityGroup}}
            {{else}}
              {{format-html-message "nodeDriver.exoscale.securityGroup.defaultCreate" groupName=defaultSecurityGroup}}
            {{/if}}
          </label></div>

          {{#if (and settings.isRancher (not isCustomSecurityGroup))}}
            <p class="help-block r-ml20">
              <a href="{{settings.docsBase}}/hosts/exoscale/#required-ports-for-rancher-to-work" target="_blank">
                {{t "nodeDriver.exoscale.portHelp.link"}}
              </a>
              {{t "nodeDriver.exoscale.portHelp.text"}}
            </p>
          {{/if}}

          <div class="radio">
            <label>
              {{radio-button
                selection=whichSecurityGroup
                value="custom"
              }} {{t "nodeDriver.exoscale.securityGroup.custom"}}
            </label>
          </div>
          {{#if isCustomSecurityGroup}}
            <select class="form-control" onchange={{action (mut securityGroup) value="target.value"}}>
              {{#each allSecurityGroups as |choice|}}
                <option value={{choice.name}} selected={{eq securityGroup choice.name}}
                >
                  {{choice.name}}
                </option>
              {{/each}}
            </select>

            <p style="r-m0 r-mt10">
              {{t "nodeDriver.exoscale.needs.label" appName=settings.appName}}
            </p>
            <ul>
              <li>
                {{format-html-message "nodeDriver.exoscale.needs.item1" appName=settings.appName}}
              </li>
              <li>
                {{format-html-message "nodeDriver.exoscale.needs.item2" appName=settings.appName}}
              </li>
              <li>
                {{format-html-message "nodeDriver.exoscale.needs.item3" appName=settings.appName}}
              </li>
            </ul>
          {{/if}}
        {{else}}
          <div class="form-control-static">
            {{config.securityGroup}}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
  {{#if (eq step 5)}}
    {{top-errors errors=errors}}
    {{save-cancel
      save=(action "selectSecurityGroup")
      cancel=(action "cancel")
      createLabel="nodeDriver.exoscale.selectSecurityGroupAction"
    }}
  {{/if}}
</section>

<section class="horizontal-form {{unless (eq step 6) "hide"}}" style="padding-top: 0">
  <div class="text-center">
    <i class="icon icon-spinner icon-spin"></i>
    {{#if defaultSecurityGroup}}
      {{t "nodeDriver.exoscale.securityGroup.updating"}}
    {{else}}
      {{t "nodeDriver.exoscale.securityGroup.creating"}}
    {{/if}}
  </div>
</section>

<section class="horizontal-form r-pt0 {{unless (eq step 7) "hide"}}">
  <div class="text-center">
    <i class="icon icon-spinner icon-spin"></i> {{t "nodeDriver.exoscale.loadingInstance"}}
  </div>
</section>

<section class="horizontal-form r-pt0 {{unless (gte step 8) "hide"}}">
  <div class="container-fluid">
    <div class="over-hr r-mt20 r-mb20">
      <span>{{t "nodeDriver.exoscale.instanceSection"}}</span>
    </div>

    {{!-- {{partial "host/add-common"}} --}}

    <div class="row form-group">
      <div class="col-md-2 form-label">
        <label class="form-control-static">
          {{t "nodeDriver.exoscale.instanceProfile.label"}}
        </label>
      </div>
      <div class="col-md-4">
        <select class="form-control" onchange={{action (mut config.instanceProfile) value="target.value"}}>
          {{#each allInstanceProfiles as |choice|}}
            <option value={{choice.name}} selected={{eq config.instanceProfile choice.name}}>
              {{choice.displaytext}}
            </option>
          {{/each}}
        </select>
      </div>
      <div class="col-md-2 form-label">
        <label class="form-control-static">
          {{t "nodeDriver.exoscale.diskSize.label"}}
        </label>
      </div>
      <div class="col-md-4">
        {{input
          type="number"
          classNames="form-control"
          min=10
          max=1600
          step=10
          value=config.diskSize
        }}
      </div>
    </div>

    <div class="row form-group">
      <div class="col-md-2 form-label">
        <label class="form-control-static">
          {{t "nodeDriver.exoscale.template.label"}}
        </label>
      </div>
      <div class="col-md-4">
        <select class="form-control" onchange={{action (mut config.image) value="target.value"}}>
          {{#each allTemplates as |choice|}}
            <option value={{choice}} selected={{eq config.image choice}}>
              {{choice}}
            </option>
          {{/each}}
        </select>
      </div>
      <div class="col-md-2 form-label">
        <label class="form-control-static">
          {{t "nodeDriver.exoscale.sshUser.label"}}
        </label>
      </div>
      <div class="col-md-4">
        {{input
          type="text"
          classNames="form-control"
          placeholder=(t "nodeDriver.exoscale.sshUser.placeholder")
          value=config.sshUser
        }}
      </div>
    </div>

    {{!-- {{partial "host/add-options"}} --}}
  </div>

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

  {{form-name-description
    model=model
    nameRequired=true
  }}

  {{#accordion-list showExpandAll=false as | al expandFn |}}
    {{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
    }}
  {{/accordion-list}}

  {{top-errors errors=errors}}
  {{save-cancel
    save=(action "save")
    cancel=(action "cancel")
  }}
</section>