<div class="next-user-button" ...attributes>
    <BasicDropdown
        @defaultClass={{@wrapperClass}}
        @onOpen={{@onOpen}}
        @onClose={{@onClose}}
        @verticalPosition={{@verticalPosition}}
        @horizontalPosition={{@horizontalPosition}}
        @renderInPlace={{or @renderInPlace true}}
        @initiallyOpened={{@initiallyOpened}}
        as |dd|
    >
        <dd.Trigger class={{@triggerClass}}>
            <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                <FaIcon @icon="globe" @size="sm" />
            </div>
        </dd.Trigger>
        <dd.Content class={{@contentClass}}>
            <div class="next-dd-menu {{@dropdownMenuClass}} {{if dd.isOpen 'is-open'}}">
                {{#each-in this.availableLocales as |key country|}}
                    <div class="px-1">
                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
                            <div class="flex flex-row items-center justify-between w-full">
                                <div class="flex-1">
                                    <span class="mr-1">{{country.emoji}}</span>
                                    <span>{{country.language}}</span>
                                </div>
                                {{#if (eq this.currentLocale key)}}
                                    <div>
                                        <FaIcon @icon="check" class="text-green-400" />
                                    </div>
                                {{/if}}
                            </div>
                        </a>
                    </div>
                {{/each-in}}
            </div>
        </dd.Content>
    </BasicDropdown>
</div>