<div class="complete-card-dropdown" data-complete-card-dropdown>
  <button
      class="complete-card-dropdown__toggle"
      type="button"
      aria-haspopup="listbox"
      aria-expanded="false"
      data-complete-card-dropdown-toggle
  >
        <span class="complete-card-dropdown__value" data-complete-card-dropdown-value>
          {{#if selectedLabel}}{{selectedLabel}}{{else}}{{placeholder}}{{/if}}
        </span>

    <span class="complete-card-dropdown__icon">
            <i class="fas fa-chevron-down"></i>
        </span>
  </button>

  <div class="complete-card-dropdown__menu" role="listbox">
    <button
        class="complete-card-dropdown__option {{#unless selectedValue}}complete-card-dropdown__option--selected{{/unless}}"
        type="button"
        role="option"
        aria-selected="{{#unless selectedValue}}true{{else}}false{{/unless}}"
        data-value=""
        data-complete-card-dropdown-option
    >
      {{placeholder}}
    </button>

    {{#each options}}
      <button
          class="complete-card-dropdown__option {{#if selected}}complete-card-dropdown__option--selected{{/if}}"
          type="button"
          role="option"
          aria-selected="{{#if selected}}true{{else}}false{{/if}}"
          data-value="{{value}}"
          data-complete-card-dropdown-option
      >
        {{label}}
      </button>
    {{/each}}
  </div>

  <div class="complete-card-dropdown__error">
    Select required variant
  </div>
</div>