<DropdownButton
    @renderInPlace={{true}}
    @size="xs"
    @type="magic"
    @icon="folder-tree"
    @iconSize="sm"
    @text={{this.buttonTitle}}
    @buttonClass={{concat "w-full truncate w-48" " " @buttonClass}}
    @buttonWrapperClass={{concat "w-full" " " @buttonWrapperClass}}
    @wrapperClass={{@wrapperClass}}
    {{did-update this.updateArgs @category}}
    as |dd|
>
    <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
        <div role="group" class="px-1 overflow-y-scroll max-h-72">
            {{#if this.loadCategories.isRunning}}
                <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1">
                    <Spinner class="mr-2i" />
                    <span class="dark:text-gray-100 test-sm">{{t "storefront.common.loading"}}</span>
                </div>
            {{else}}
                {{#if this.selectedCategory}}
                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" this.loadParentCategories}}>
                        <FaIcon @icon="arrow-left" class="mr-2" />
                        <span>{{t "storefront.common.back"}}</span>
                    </a>
                {{/if}}
                {{#each this.categories as |category|}}
                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (fn this.onSelectCategory category)}}>
                        {{category.name}}
                    </a>
                {{else}}
                    <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1 truncate">
                        {{#if this.selectedCategory}}
                            <span>{{t "storefront.component.network-category-picker.no-subcategory"}} {{this.selectedCategory.name}}</span>
                        {{else}}
                            <span>{{t "storefront.component.network-category-picker.no-categories"}}</span>
                        {{/if}}
                    </div>
                {{/each}}
            {{/if}}
        </div>
        <div class="px-1">
            <div class="next-dd-menu-seperator"></div>
            <div role="group" class="px-1">
                <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onCreateNewCategory)}}>
                    {{t "storefront.component.network-category-picker.create-category"}}
                </a>
            </div>
        </div>
    </div>
</DropdownButton>