<div class="row">
  <div class="col span-8">
    <label class="acc-label" for="cloud-credential-selection">
      {{t "formAuthCloudCredential.label"}}
    </label>

    <div>
      <select
        id="cloud-credential-selection"
        class="form-control inline-block"
        onchange={{action (mut primaryResource.cloudCredentialId) value="target.value"}}
        disabled={{if showAddCloudCredential true}}
        style="max-width: 80%;"
      >

        {{#unless primaryResource.cloudCredentialId}}
          <option
            value=""
            selected=true
          >
            {{t "formAuthCloudCredential.selectCreds.prompt"}}
          </option>
        {{/unless}}

        {{#each cloudCredentials as |choice|}}
          <option
            value={{choice.id}}
            selected={{eq primaryResource.cloudCredentialId choice.id}}
          >
            {{choice.displayName}}
          </option>
        {{/each}}
      </select>

      <button
        {{action "addCloudCredential"}}
        class="btn btn-sm bg-default inline-block"
        style="margin-top: -5px;"
        disabled={{if showAddCloudCredential true}}
      >
        {{t "formAuthCloudCredential.add"}}
      </button>

    </div>
  </div>
</div>


{{#if showAddCloudCredential}}
  <div class="row">
    {{cru-cloud-credential
      mode=mode
      driverName=driverName
      region=region
      parseAndCollectErrors=parseAndCollectErrors
      disableHeader=true
      doneSavingCloudCredential=(action "doneSavingCloudCredential")
      cancelAdd=(action "cancleNewCloudCredential")
    }}
  </div>
{{else}}
  {{#unless hideSave}}
    {{save-cancel
      saveDisabled=(unless primaryResource.cloudCredentialId true)
      save=progressStep
      cancel=cancel
      createLabel=createLabel
      savingLabel=savingLabel
    }}
  {{/unless}}
{{/if}}