<section class="horizontal-form container-fluid">
  {{#unless disableHeader}}
    <h2>
      {{#if isNew}}
        {{t "modalAddCloudKey.header.new"}}
      {{else if isEdit}}
        {{t "modalAddCloudKey.header.edit"}}
      {{/if}}
    </h2>
  {{/unless}}
  <hr />

  {{form-name-description
    model=primaryResource
    nameDisabled=originalModel
    namePlaceholder="modalAddCloudKey.name.placeholder"
    descriptionPlaceholder="modalAddCloudKey.description.placeholder"
  }}

  <div class="row">
    <div class="col span-6">
      <label class="acc-label">
        {{t "modalAddCloudKey.type"}}
      </label>

      {{#if singleCloudKeyChoice}}
        <div class="pt-10 pl-10">
          {{singleCloudKeyChoice}}
        </div>
      {{else}}
        <select class="form-control" onchange={{action "selectConfig" value="target.value"}}>
          {{#if (not-eq cloudCredentialType value)}}
            <option value="" selected=true>
              {{t "modalAddCloudKey.typeSelect.prompt"}}
            </option>
          {{/if}}
          {{#each configChoices as |choice|}}
            <option value="{{choice.name}}" selected={{eq choice.name cloudCredentialType}}>
              {{choice.displayName}}
            </option>
          {{/each}}
        </select>
      {{/if}}

    </div>

    {{#if (eq cloudCredentialType "amazon")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.amazonec2.region.label"}}{{field-required}}
          </label>
          <select class="form-control" onchange={{action (mut region) value="target.value"}}>
            <option value="" selected={{eq region choice}}>Select a region</option>
            {{#each regionChoices as |choice|}}
              <option value={{choice}} selected={{eq region choice}}>{{choice}}</option>
            {{/each}}
          </select>
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="amazonec2-accessKey">
            {{t "modalAddCloudKey.amazonec2.accessKey.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            name="username"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.amazonec2.accessKey.placeholder")
            value=config.accessKey
            id="amazonec2-accessKey"
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label" for="amazonec2-secretKey">
            {{t "modalAddCloudKey.amazonec2.secretKey.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            name="password"
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.amazonec2.secretKey.placeholder")
            value=config.secretKey
            id="amazonec2-secretKey"
          }}
        </div>
      </div>
    {{else if (eq cloudCredentialType "azure")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.azure.subscriptionId.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            value=config.subscriptionId
            classNames="form-control"
            placeholder=(t "nodeDriver.azure.subscriptionId.placeholder")
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="azure-clientId">
            {{t "modalAddCloudKey.azure.clientId.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            value=config.clientId
            classNames="form-control"
            id="azure-clientId"
            placeholder=(t "modalAddCloudKey.azure.clientId.placeholder")
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label" for="azure-clientSecret">
            {{t "modalAddCloudKey.azure.clientSecret.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            value=config.clientSecret
            classNames="form-control"
            id="azure-clientSecret"
            placeholder=(t "modalAddCloudKey.azure.clientSecret.placeholder")
          }}
        </div>
      </div>
    {{else if (eq cloudCredentialType "digitalOcean")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="digitalocean-accessToken">
            {{t "modalAddCloudKey.digitalocean.accessToken.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            value=config.accessToken
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.digitalocean.accessToken.placeholder")
            id="digitalocean-accessToken"
          }}
          <p class="text-info">
            {{t "modalAddCloudKey.digitalocean.accessToken.help" htmlSafe=true}}
          </p>
        </div>
      </div>
    {{else if (eq cloudCredentialType "linode")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="linode-token">
            {{t "modalAddCloudKey.linode.token.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            value=config.token
            classNames="form-control"
            placeholder=(t "modalAddCloudKey.linode.token.placeholder")
            id="linode-token"
          }}
          <p class="text-info">
            {{t "modalAddCloudKey.linode.token.help" htmlSafe=true}}
          </p>
        </div>
      </div>
    {{else if (eq cloudCredentialType "vmware")}}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.vcenter.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            class="form-control"
            value=config.vcenter
            placeholder=(t "nodeDriver.vmwarevsphere.vcenter.placeholder")
          }}
        </div>
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.vcenterPort.label"}}{{field-required}}
          </label>
          {{input-integer
            min=1
            max=65535
            class="form-control"
            value=config.vcenterPort
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.username.label"}}{{field-required}}
          </label>
          {{input
            type="text"
            value=config.username
            classNames="form-control"
          }}
        </div>

        <div class="col span-6">
          <label class="acc-label">
            {{t "nodeDriver.vmwarevsphere.password.label"}}{{field-required}}
          </label>
          {{input
            type="password"
            value=config.password
            classNames="form-control"
          }}
        </div>
      </div>
      <p class="help-block">{{t "nodeDriver.vmwarevsphere.access.help"}}</p>
    {{/if}}
  </div>


  {{top-errors errors=errors}}
  <div class="footer-actions">
    {{save-cancel
      cancel=cancelAdd
      editing=isEdit
      save=(action "save")
      savingLabel=savingLabel
    }}
  </div>
</section>
