<form class="selectable-card is-rounded no-flex data-test-get-credentials-card">
  <div class="is-flex-between is-fullwidth card-details">
    <h3 class="title is-5">{{@title}}</h3>
  </div>
  <div class="has-top-bottom-margin">
    <p class="is-label search-label">{{@searchLabel}}</p>
  </div>
  <p class="sub-text">{{@subText}}</p>
  <SearchSelect
    @id={{this.id}}
    @models={{@models}}
    @selectLimit="1"
    @backend={{@backend}}
    @fallbackComponent="input-search"
    @shouldUseFallback={{@shouldUseFallback}}
    @onChange={{action "handleRoleInput"}}
    @inputValue={{get this.model this.valuePath}}
    @placeHolder={{@placeHolder}}
    data-test-search-roles
  />
  <input
    type="submit"
    value={{@title}}
    class="button is-secondary"
    disabled={{this.buttonDisabled}}
    onclick={{action "transitionToCredential"}}
    data-test-get-credentials
  />
</form>