<PowerSelect
    class="money-input-currency-selector"
    @placeholder={{@placeholder}}
    @triggerClass={{@triggerClass}}
    @matcher={{this.searchCurrencies}}
    @searchEnabled={{true}}
    @searchField="code"
    @searchPlaceholder="Search by currency code"
    @renderInPlace={{true}}
    @options={{this.currencies}}
    @selected={{this.currencyData}}
    @onChange={{this.onChange}}
    @triggerComponent={{@triggerComponent}}
    as |currency|
>
    {{#if (has-block)}}
        <div class="truncate flex items-center">{{yield currency}}</div>
    {{else}}
        <div class="truncate flex items-center">
            <div class="w-16">
                <span>{{currency.emoji}}</span>
                <strong>{{currency.code}}</strong>
            </div>
            <span class="w-4">-</span>
            <span>{{currency.name}}</span>
        </div>
    {{/if}}
</PowerSelect>