<div class="dropdown">

  <button class="dropdown__btn js-dropdown-btn" aria-haspopup="listbox">

    <div class="dropdown__inner js-dropdown-inner"></div>

    <div class="dropdown__icon">
      <div class="icon"></div>
    </div>

  </button>

  <input class="js-data-output" type="hidden" />

  <ul class="dropdown__list js-dropdown-list" role="listbox" tabindex="-1">

    <li id="dropdown__item__{{_id}}__{{_dropdownIndex}}__0" class="dropdown__placeholder dropdown__item js-dropdown-list-item" role="option" disabled="true" hidden="true" default="true" text="{{placeholder}}" value="{{placeholder}}">
      <div class="dropdown__item-inner js-dropdown-list-item-inner">
        {{{placeholder}}}
      </div>
    </li>

    {{#each _options}}
    <li id="dropdown__item__{{../_id}}__{{../_dropdownIndex}}__{{inc @index}}" class="dropdown__item js-dropdown-list-item" role="option" text="{{text}}" value="{{_index}}">
      <div class="dropdown__item-inner js-dropdown-list-item-inner">
      {{#if displayText}}
        {{{displayText}}}
      {{else}}
        {{{text}}}
      {{/if}}
      </div>
    </li>
    {{/each}}

  </ul>

</div>
