<form {{on "submit" this.transitionToCredential}} 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>
  {{#if @renderInputSearch}}
    <InputSearch
      @id="search-input-{{@type}}"
      @onChange={{this.handleInput}}
      @placeholder={{@placeholder}}
      @initialValue={{@initialValue}}
      data-test-search-roles
    />
  {{else}}
    <SearchSelect
      @id="search-input-{{@type}}"
      @models={{@models}}
      @selectLimit="1"
      @backend={{@backend}}
      @fallbackComponent="input-search"
      @onChange={{this.handleInput}}
      @placeholder={{@placeholder}}
      data-test-search-roles
    />
  {{/if}}
  <button type="submit" class="button is-secondary" disabled={{this.buttonDisabled}} data-test-get-credentials>
    {{this.buttonText}}
  </button>
</form>